project init

2025-12-01 02:29:08 +01:00
commit 78a0f6c646
106 changed files with 13132 additions and 0 deletions
--- a/frontend/components/admin/stack-form.tsx
+++ b/frontend/components/admin/stack-form.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import type { StackCategory } from "@/lib/types"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { X, Plus } from "lucide-react"
+
+interface StackFormProps {
+  category?: StackCategory | null
+  onSubmit: (data: Omit<StackCategory, "id">) => void
+  onCancel: () => void
+}
+
+export function StackForm({ category, onSubmit, onCancel }: StackFormProps) {
+  const [title, setTitle] = useState("")
+  const [items, setItems] = useState<string[]>([])
+  const [newItem, setNewItem] = useState("")
+
+  useEffect(() => {
+    if (category) {
+      setTitle(category.title)
+      setItems(category.items)
+    }
+  }, [category])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit({ title, items })
+  }
+
+  const addItem = () => {
+    if (newItem.trim()) {
+      setItems((prev) => [...prev, newItem.trim()])
+      setNewItem("")
+    }
+  }
+
+  const removeItem = (index: number) => {
+    setItems((prev) => prev.filter((_, i) => i !== index))
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="title" className="font-mono text-sm">
+          Category Name
+        </Label>
+        <Input
+          id="title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="e.g. Backend, Infrastructure, Databases"
+          required
+        />
+      </div>
+
+      <div className="space-y-3">
+        <Label className="font-mono text-sm">Technologies</Label>
+        <div className="flex gap-2">
+          <Input
+            value={newItem}
+            onChange={(e) => setNewItem(e.target.value)}
+            placeholder="Add a technology..."
+            onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addItem())}
+          />
+          <Button type="button" variant="secondary" onClick={addItem}>
+            <Plus size={16} />
+          </Button>
+        </div>
+        {items.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {items.map((item, i) => (
+              <span
+                key={i}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-mono bg-secondary text-secondary-foreground rounded"
+              >
+                <span className="w-1 h-1 bg-primary rounded-full" />
+                {item}
+                <button
+                  type="button"
+                  onClick={() => removeItem(i)}
+                  className="ml-1 text-muted-foreground hover:text-destructive"
+                >
+                  <X size={14} />
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+        {items.length === 0 && (
+          <p className="text-sm text-muted-foreground">Add at least one technology to this category.</p>
+        )}
+      </div>
+
+      <div className="flex justify-end gap-3 pt-4 border-t border-border">
+        <Button type="button" variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={items.length === 0}>
+          {category ? "Update Category" : "Create Category"}
+        </Button>
+      </div>
+    </form>
+  )
+}