Upload components/ProjectManager.jsx with huggingface_hub

components/ProjectManager.jsx

@@ -0,0 +1,258 @@
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { 
+  FaFolder, FaFolderOpen, FaFile, FaFileCode, FaFileAlt, FaImage,
+  FaVideo, FaMusic, FaArchive, FaDatabase, FaCloud, FaGitAlt,
+  FaPlus, FaMinus, FaEdit, FaTrash, FaCopy, FaMove, FaDownload,
+  FaUpload, FaSearch, FaFilter, FaSort, FaSortAmountDown,
+  FaSortAmountUp, FaEye, FaEyeSlash, FaLock, FaUnlock,
+  FaShare, FaLink, FaStar, FaRegStar, FaClock, FaCalendar,
+  FaUser, FaUsers, FaTag, FaTags, FaFlag, FaBookmark,
+  FaCheck, FaTimes, FaInfo, FaWarning, FaExclamationTriangle,
+  FaCheckCircle, FaTimesCircle, FaPlay, FaPause, FaStop,
+  FaRedo, FaUndo, FaSave, FaPrint, FaSync, FaRefresh,
+  FaSpinner, FaCog, Fa wrench, FaTools, FaMagic, FaRocket,
+  FaCode, FaDatabase, FaServer, FaCloud, FaShieldAlt,
+  FaChartLine, FaProjectDiagram, FaBug, FaTest, FaFlask,
+  FaBook, FaGraduationCap, FaLightbulb, FaLightbulbAlt,
+  FaFire, FaBolt, FaZap, FaAtom, FaDna, FaMicroscope,
+  FaTelescope, FaSatellite, FaRocket, FaSpace, FaGlobe,
+  FaMap, FaMapMarked, FaMapMarkedAlt, FaCompass, FaRoute,
+  FaNavigator, FaSailboat, FaShip, FaAnchor, FaBuoy,
+  FaWater, FaWind, FaCloudRain, FaCloudSun, FaSun,
+  FaMoon, FaStar, FaRegStar, FaStarHalf, FaStarAndCrescent,
+  FaMeteor, FaComet, FaPlanet, FaRing, FaOrbital,
+  FaBlackHole, FaGalaxy, FaNebula, FaConstellation, FaAstronomy
+} from 'react-icons/fa'
+import toast from 'react-hot-toast'
+
+export default function ProjectManager({ language, theme }) {
+  const [projects, setProjects] = useState([])
+  const [selectedProject, setSelectedProject] = useState(null)
+  const [files, setFiles] = useState([])
+  const [viewMode, setViewMode] = useState('grid')
+  const [sortBy, setSortBy] = useState('name')
+  const [sortOrder, setSortOrder] = useState('asc')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [showHidden, setShowHidden] = useState(false)
+  const [selectedFiles, setSelectedFiles] = useState(new Set())
+
+  useEffect(() => {
+    // Initialize with sample projects
+    setProjects([
+      {
+        id: 1,
+        name: 'E-Commerce Platform',
+        type: 'web',
+        status: 'active',
+        progress: 75,
+        lastModified: new Date(),
+        size: '125 MB',
+        files: 234,
+        stars: 5,
+        tags: ['react', 'nodejs', 'mongodb'],
+        description: 'Full-stack e-commerce solution'
+      },
+      {
+        id: 2,
+        name: 'Mobile Banking App',
+        type: 'mobile',
+        status: 'development',
+        progress: 45,
+        lastModified: new Date(),
+        size: '89 MB',
+        files: 156,
+        stars: 4,
+        tags: ['react-native', 'firebase', 'typescript'],
+        description: 'Secure mobile banking application'
+      },
+      {
+        id: 3,
+        name: 'AI Data Pipeline',
+        type: 'data',
+        status: 'testing',
+        progress: 90,
+        lastModified: new Date(),
+        size: '2.3 GB',
+        files: 412,
+        stars: 5,
+        tags: ['python', 'tensorflow', 'aws'],
+        description: 'Machine learning data processing pipeline'
+      }
+    ])
+  }, [])
+
+  const createProject = () => {
+    const newProject = {
+      id: Date.now(),
+      name: `New Project ${projects.length + 1}`,
+      type: 'web',
+      status: 'planning',
+      progress: 0,
+      lastModified: new Date(),
+      size: '0 MB',
+      files: 0,
+      stars: 0,
+      tags: [],
+      description: 'New project description'
+    }
+    setProjects([...projects, newProject])
+    setSelectedProject(newProject)
+    toast.success(language === 'fa' ? 'پروژه ایجاد شد' : 'Project created')
+  }
+
+  const deleteProject = (id) => {
+    setProjects(projects.filter(p => p.id !== id))
+    if (selectedProject?.id === id) {
+      setSelectedProject(null)
+    }
+    toast.success(language === 'fa' ? 'پروژه حذف شد' : 'Project deleted')
+  }
+
+  const duplicateProject = (project) => {
+    const duplicate = {
+      ...project,
+      id: Date.now(),
+      name: `${project.name} (Copy)`,
+      lastModified: new Date()
+    }
+    setProjects([...projects, duplicate])
+    toast.success(language === 'fa' ? 'پروژه کپی شد' : 'Project duplicated')
+  }
+
+  const getFileIcon = (fileName) => {
+    const ext = fileName.split('.').pop().toLowerCase()
+    if (['js', 'jsx', 'ts', 'tsx', 'py', 'java', 'cpp', 'c'].includes(ext)) return FaFileCode
+    if (['txt', 'md', 'doc', 'docx', 'pdf'].includes(ext)) return FaFileAlt
+    if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext)) return FaImage
+    if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) return FaVideo
+    if (['mp3', 'wav', 'ogg', 'm4a'].includes(ext)) return FaMusic
+    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) return FaArchive
+    if (['sql', 'db', 'sqlite'].includes(ext)) return FaDatabase
+    return FaFile
+  }
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'active': return 'text-green-400'
+      case 'development': return 'text-blue-400'
+      case 'testing': return 'text-yellow-400'
+      case 'planning': return 'text-purple-400'
+      case 'completed': return 'text-emerald-400'
+      default: return 'text-gray-400'
+    }
+  }
+
+  const sortProjects = (projects) => {
+    return [...projects].sort((a, b) => {
+      let comparison = 0
+      switch (sortBy) {
+        case 'name':
+          comparison = a.name.localeCompare(b.name)
+          break
+        case 'date':
+          comparison = a.lastModified - b.lastModified
+          break
+        case 'size':
+          comparison = parseFloat(a.size) - parseFloat(b.size)
+          break
+        case 'progress':
+          comparison = a.progress - b.progress
+          break
+        case 'files':
+          comparison = a.files - b.files
+          break
+        default:
+          comparison = 0
+      }
+      return sortOrder === 'asc' ? comparison : -comparison
+    })
+  }
+
+  const filteredProjects = sortProjects(projects).filter(project =>
+    project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    project.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+  )
+
+  return (
+    <div className="flex flex-col h-full space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 bg-gray-800 rounded-lg">
+        <div className="flex items-center space-x-reverse space-x-3">
+          <FaProjectDiagram className="w-6 h-6 text-primary-400" />
+          <h2 className="text-lg font-semibold">Project Manager</h2>
+        </div>
+        <div className="flex items-center space-x-reverse space-x-2">
+          <button
+            onClick={createProject}
+            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-all flex items-center space-x-reverse space-x-2"
+          >
+            <FaPlus className="w-4 h-4" />
+            <span>{language === 'fa' ? 'پروژه جدید' : 'New Project'}</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex space-x-reverse space-x-4 min-h-0">
+        {/* Projects List */}
+        <div className="w-96 bg-gray-800 rounded-lg p-4 space-y-4 overflow-y-auto">
+          {/* Search and Filter */}
+          <div className="space-y-3">
+            <div className="relative">
+              <FaSearch className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search projects..."
+                className="w-full pr-10 px-3 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              />
+            </div>
+            
+            <div className="flex items-center space-x-reverse space-x-2">
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value)}
+                className="flex-1 px-3 py-2 bg-gray-700 text-white rounded-lg focus:outline-none"
+              >
+                <option value="name">Name</option>
+                <option value="date">Date</option>
+                <option value="size">Size</option>
+                <option value="progress">Progress</option>
+                <option value="files">Files</option>
+              </select>
+              
+              <button
+                onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
+                className="p-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-all"
+              >
+                {sortOrder === 'asc' ? <FaSortAmountUp className="w-4 h-4" /> : <FaSortAmountDown className="w-4 h-4" />}
+              </button>
+            </div>
+          </div>
+
+          {/* Projects Grid */}
+          <div className="space-y-2">
+            <AnimatePresence>
+              {filteredProjects.map(project => (
+                <motion.div
+                  key={project.id}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: -20 }}
+                  onClick={() => setSelectedProject(project)}
+                  className={`p-3 rounded-lg cursor-pointer transition-all ${
+                    selectedProject?.id === project.id
+                      ? 'bg-primary-600 text-white'
+                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  }`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center space-x-reverse space-x-2">
+                        <FaFolder className="w-4 h-4" />
+                        <h3 className="font-medium text-sm">{project.name}</h3>
+                      </div>
+                      <p className="text-xs opacity-75 mt-1">{project.description}</p>
+                      <div className="