initial commit with Youssef work

2025-12-22 20:20:39 +01:00
parent c0228d67d0
commit 3731e3f476
106 changed files with 12531 additions and 1 deletions
@@ -0,0 +1,88 @@
+"use client"
+
+import { Plus, Loader2, Key, User } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+interface PageData {
+  id: number
+  title: string
+  image: string
+  prompt: string
+  characterUpload?: string
+  style: string
+}
+
+interface PageSidebarProps {
+  pages: PageData[]
+  currentPage: number
+  onPageSelect: (index: number) => void
+  onAddPage: () => void
+  loadingPageId?: number | null
+  onApiKeyClick?: () => void
+}
+
+export function PageSidebar({
+  pages,
+  currentPage,
+  onPageSelect,
+  onAddPage,
+  loadingPageId,
+  onApiKeyClick,
+}: PageSidebarProps) {
+  return (
+    <aside className="w-16 md:w-20 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
+      {/* Top section: page numbers */}
+      <div className="flex flex-col items-center gap-2">
+        {pages.map((page, index) => (
+          <button
+            key={page.id}
+            onClick={() => onPageSelect(index)}
+            disabled={loadingPageId === page.id}
+            className={`
+              w-9 h-9 rounded-md transition-all
+              flex items-center justify-center font-medium text-sm tracking-tight
+              ${
+                currentPage === index
+                  ? "bg-black border-2 border-indigo text-white shadow-lg shadow-indigo/20"
+                  : "glass-panel glass-panel-hover text-muted-foreground hover:text-white"
+              }
+              ${loadingPageId === page.id ? "opacity-50" : ""}
+            `}
+          >
+            {loadingPageId === page.id ? <Loader2 className="w-4 h-4 animate-spin" /> : index + 1}
+          </button>
+        ))}
+
+        <Button
+          onClick={onAddPage}
+          variant="ghost"
+          size="icon"
+          className="w-9 h-9 bg-white hover:bg-neutral-200 text-black border-0 transition-all group"
+        >
+          <Plus className="w-4 h-4 text-black transition-transform group-hover:scale-110" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col items-center gap-3">
+        {/* API Key Button */}
+        <Button
+          onClick={onApiKeyClick}
+          variant="ghost"
+          size="icon"
+          className="w-9 h-9 glass-panel glass-panel-hover text-muted-foreground hover:text-white"
+          title="Manage API Key"
+        >
+          <Key className="w-4 h-4" />
+        </Button>
+
+        {/* Avatar Circle - placeholder for future Clerk integration */}
+        <button
+          className="w-9 h-9 glass-panel rounded-full flex items-center justify-center text-muted-foreground hover:text-white transition-colors"
+          title="User Profile (Coming Soon)"
+        >
+          <User className="w-4 h-4" />
+        </button>
+      </div>
+    </aside>
+  )
+}