project init
This commit is contained in:
39
frontend/components/admin/admin-shell.tsx
Normal file
39
frontend/components/admin/admin-shell.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useAuth } from "@/lib/auth-context"
|
||||
import { AdminSidebar } from "./admin-sidebar"
|
||||
import { Loader2 } from "lucide-react"
|
||||
|
||||
export function AdminShell({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated, isLoading } = useAuth()
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !isAuthenticated) {
|
||||
router.push("/admin/login")
|
||||
}
|
||||
}, [isAuthenticated, isLoading, router])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-primary" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex">
|
||||
<AdminSidebar />
|
||||
<main className="flex-1 overflow-auto">{children}</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
74
frontend/components/admin/admin-sidebar.tsx
Normal file
74
frontend/components/admin/admin-sidebar.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useAuth } from "@/lib/auth-context"
|
||||
import { LayoutDashboard, FolderKanban, Layers, LogOut, Terminal, ExternalLink } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const navItems = [
|
||||
{ href: "/admin", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ href: "/admin/projects", label: "Projects", icon: FolderKanban },
|
||||
{ href: "/admin/stack", label: "Tech Stack", icon: Layers },
|
||||
]
|
||||
|
||||
export function AdminSidebar() {
|
||||
const pathname = usePathname()
|
||||
const { logout } = useAuth()
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-card border-r border-border flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-border">
|
||||
<Link href="/admin" className="flex items-center gap-2 text-primary">
|
||||
<Terminal size={20} />
|
||||
<span className="font-mono font-semibold">atticl</span>
|
||||
<span className="text-xs font-mono text-muted-foreground bg-secondary px-1.5 py-0.5 rounded">admin</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2 rounded-md text-sm font-mono transition-colors",
|
||||
isActive
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-secondary",
|
||||
)}
|
||||
>
|
||||
<item.icon size={16} />
|
||||
{item.label}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-border space-y-2">
|
||||
<Link
|
||||
href="/"
|
||||
target="_blank"
|
||||
className="flex items-center gap-2 px-3 py-2 text-sm font-mono text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<ExternalLink size={14} />
|
||||
View site
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={logout}
|
||||
className="w-full justify-start gap-2 font-mono text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<LogOut size={14} />
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
109
frontend/components/admin/stack-form.tsx
Normal file
109
frontend/components/admin/stack-form.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user