Next.js Bookmark/File Manager Web App with AI Features

import React, { useState } from 'react';

const App = () => {
  const [spaces, setSpaces] = useState([
    { id: 1, name: 'Personal', items: [] },
    { id: 2, name: 'Work', items: [] }
  ]);
  const [activeSpace, setActiveSpace] = useState(1);
  const [activeTab, setActiveTab] = useState('Links');
  const [searchQuery, setSearchQuery] = useState('');

  const addItem = (type, content) => {
    const newItem = {
      id: Date.now(),
      type,
      content,
      title: content.substring(0, 20),
      preview: content
    };
    setSpaces(prevSpaces =>
      prevSpaces.map(space =>
        space.id === activeSpace
          ? { ...space, items: [...space.items, newItem] }
          : space
      )
    );
  };

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };

  const filteredItems = spaces.find(space => space.id === activeSpace)?.items.filter(item =>
    item.content.toLowerCase().includes(searchQuery.toLowerCase())
  ) || [];

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <div className="flex">
        <div className="w-64 bg-gray-800 p-4">
          <h2 className="text-xl font-bold mb-4">Spaces</h2>
          {spaces.map(space => (
            <div
              key={space.id}
              className={`p-2 mb-2 rounded ${activeSpace === space.id ? 'bg-purple-600' : 'bg-gray-700'} cursor-pointer`}
              onClick={() => setActiveSpace(space.id)}
            >
              {space.name}
            </div>
          ))}
        </div>
        <div className="flex-1 p-4">
          <div className="flex justify-between mb-4">
            <div className="flex space-x-2">
              {['Links', 'Notes', 'Files'].map(tab => (
                <button
                  key={tab}
                  className={`px-4 py-2 rounded ${activeTab === tab ? 'bg-purple-600' : 'bg-gray-700'}`}
                  onClick={() => setActiveTab(tab)}
                >
                  {tab}
                </button>
              ))}
            </div>
            <input
              type="text"
              placeholder="Search..."
              className="px-4 py-2 bg-gray-700 rounded"
              value={searchQuery}
              onChange={handleSearch}
            />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {filteredItems.map(item => (
              <div key={item.id} className="bg-gray-800 p-4 rounded relative">
                <h3 className="text-lg font-bold">{item.title}</h3>
                <p className="text-sm text-gray-400">{item.content}</p>
                <button className="absolute top-2 right-2 bg-purple-600 px-2 py-1 rounded text-sm">Preview</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;