project init
This commit is contained in:
257
frontend/components/admin/project-form.tsx
Normal file
257
frontend/components/admin/project-form.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import type { Project } from "@/lib/types"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { X, Plus } from "lucide-react"
|
||||
|
||||
interface ProjectFormProps {
|
||||
project?: Project | null
|
||||
onSubmit: (data: Omit<Project, "id">) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function ProjectForm({ project, onSubmit, onCancel }: ProjectFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
role: "",
|
||||
description: "",
|
||||
highlights: [] as string[],
|
||||
stack: [] as string[],
|
||||
website: "",
|
||||
github: "",
|
||||
featured: false,
|
||||
})
|
||||
const [newHighlight, setNewHighlight] = useState("")
|
||||
const [newTech, setNewTech] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (project) {
|
||||
setFormData({
|
||||
name: project.name,
|
||||
role: project.role,
|
||||
description: project.description,
|
||||
highlights: project.highlights,
|
||||
stack: project.stack,
|
||||
website: project.website || "",
|
||||
github: project.github || "",
|
||||
featured: project.featured,
|
||||
})
|
||||
}
|
||||
}, [project])
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
onSubmit({
|
||||
...formData,
|
||||
website: formData.website || null,
|
||||
github: formData.github || null,
|
||||
})
|
||||
}
|
||||
|
||||
const addHighlight = () => {
|
||||
if (newHighlight.trim()) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
highlights: [...prev.highlights, newHighlight.trim()],
|
||||
}))
|
||||
setNewHighlight("")
|
||||
}
|
||||
}
|
||||
|
||||
const removeHighlight = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
highlights: prev.highlights.filter((_, i) => i !== index),
|
||||
}))
|
||||
}
|
||||
|
||||
const addTech = () => {
|
||||
if (newTech.trim()) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
stack: [...prev.stack, newTech.trim()],
|
||||
}))
|
||||
setNewTech("")
|
||||
}
|
||||
}
|
||||
|
||||
const removeTech = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
stack: prev.stack.filter((_, i) => i !== index),
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="font-mono text-sm">
|
||||
Project Name
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
|
||||
placeholder="My Project"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role" className="font-mono text-sm">
|
||||
Your Role
|
||||
</Label>
|
||||
<Input
|
||||
id="role"
|
||||
value={formData.role}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, role: e.target.value }))}
|
||||
placeholder="Creator / Lead / Contributor"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description" className="font-mono text-sm">
|
||||
Description
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
|
||||
placeholder="A brief description of the project..."
|
||||
rows={3}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="website" className="font-mono text-sm">
|
||||
Website URL
|
||||
</Label>
|
||||
<Input
|
||||
id="website"
|
||||
type="url"
|
||||
value={formData.website}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, website: e.target.value }))}
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="github" className="font-mono text-sm">
|
||||
GitHub URL
|
||||
</Label>
|
||||
<Input
|
||||
id="github"
|
||||
type="url"
|
||||
value={formData.github}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, github: e.target.value }))}
|
||||
placeholder="https://github.com/..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Highlights */}
|
||||
<div className="space-y-3">
|
||||
<Label className="font-mono text-sm">Key Highlights</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newHighlight}
|
||||
onChange={(e) => setNewHighlight(e.target.value)}
|
||||
placeholder="Add a highlight..."
|
||||
onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addHighlight())}
|
||||
/>
|
||||
<Button type="button" variant="secondary" onClick={addHighlight}>
|
||||
<Plus size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
{formData.highlights.length > 0 && (
|
||||
<ul className="space-y-2">
|
||||
{formData.highlights.map((highlight, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground bg-secondary px-3 py-2 rounded"
|
||||
>
|
||||
<span className="text-primary">→</span>
|
||||
<span className="flex-1">{highlight}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeHighlight(i)}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tech stack */}
|
||||
<div className="space-y-3">
|
||||
<Label className="font-mono text-sm">Tech Stack</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newTech}
|
||||
onChange={(e) => setNewTech(e.target.value)}
|
||||
placeholder="Add a technology..."
|
||||
onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addTech())}
|
||||
/>
|
||||
<Button type="button" variant="secondary" onClick={addTech}>
|
||||
<Plus size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
{formData.stack.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{formData.stack.map((tech, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-mono bg-secondary text-secondary-foreground rounded"
|
||||
>
|
||||
{tech}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeTech(i)}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Featured toggle */}
|
||||
<div className="flex items-center justify-between bg-secondary p-4 rounded-lg">
|
||||
<div>
|
||||
<Label htmlFor="featured" className="font-mono text-sm">
|
||||
Featured Project
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">Display prominently on the homepage</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="featured"
|
||||
checked={formData.featured}
|
||||
onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, featured: checked }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<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">{project ? "Update Project" : "Create Project"}</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user