feat: Initialize AI Studio project structure

Sets up a new project for an AI Studio application. Includes essential files like `package.json`, `vite.config.ts`, `tsconfig.json`, and a basic React application structure (`App.tsx`, `main.tsx`, `index.html`, `index.css`). Also adds a `README.md` with instructions for running locally, an `.env.example` for API key configuration, and a `.gitignore` to manage project dependencies and build artifacts.
2026-08-03 17:05:24 +02:00 · 2026-03-27 11:34:09 +01:00
parent f5988c70c7
commit a3bbc6607e
22 changed files with 5664 additions and 8 deletions
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Upload, FileSpreadsheet, FileText, CheckSquare, Table } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface SidebarProps {
+  activeModule: string;
+  setActiveModule: (m: 'descriptions' | 'completeness' | 'matrix' | 'upload') => void;
+}
+
+export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
+  const navItems = [
+    { id: 'descriptions', label: 'Product Descriptions', icon: FileText },
+    { id: 'completeness', label: 'Data Completeness', icon: CheckSquare },
+    { id: 'matrix', label: 'Matrix', icon: Table },
+    { id: 'upload', label: 'Upload / Reload', icon: Upload },
+  ] as const;
+
+  return (
+    <aside className="w-60 bg-slate-800 border-r border-slate-700 flex flex-col shrink-0">
+      <div className="p-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
+        Modules
+      </div>
+      <nav className="flex-1 px-2 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = activeModule === item.id;
+          return (
+            <button
+              key={item.id}
+              onClick={() => setActiveModule(item.id)}
+              className={cn(
+                "w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
+                isActive 
+                  ? "bg-blue-600/10 text-blue-400" 
+                  : "text-slate-300 hover:bg-slate-700/50 hover:text-white"
+              )}
+            >
+              <Icon className={cn("w-5 h-5", isActive ? "text-blue-500" : "text-slate-400")} />
+              {item.label}
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}