211 lines
8.2 KiB
TypeScript
211 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { createProjectAction, updateProjectAction } from "./actions";
|
|
import { useRouter } from "@/i18n/routing";
|
|
import { Loader2, Upload, PlusCircle, ArrowLeft, Save } from "lucide-react";
|
|
|
|
export function ProjectForm({ initialData, projectId }: { initialData?: any; projectId?: string }) {
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [preview, setPreview] = useState<string | null>(initialData?.imageUrl || null);
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setLoading(true);
|
|
|
|
try {
|
|
const formData = new FormData(e.currentTarget);
|
|
const url = projectId ? `/api/admin/projects/${projectId}` : "/api/admin/projects";
|
|
const method = projectId ? "PUT" : "POST";
|
|
|
|
const response = await fetch(url, {
|
|
method,
|
|
body: formData,
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok || !result.success) {
|
|
setError(result.message || "An error occurred");
|
|
setLoading(false);
|
|
} else {
|
|
setLoading(false);
|
|
router.refresh();
|
|
router.push("/admin/dashboard/projects");
|
|
}
|
|
} catch (err) {
|
|
setError("An unexpected error occurred during submission.");
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto p-6 lg:p-10 rounded-3xl bg-card border border-border overflow-hidden relative shadow-sm">
|
|
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-accent to-purple-500" />
|
|
|
|
<div className="mb-8 flex items-center gap-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => router.back()}
|
|
className="p-2 rounded-full hover:bg-muted text-muted-foreground transition-colors"
|
|
>
|
|
<ArrowLeft size={20} />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">
|
|
{projectId ? "Edit Project" : "Create New Project"}
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
{projectId ? "Update your portfolio case study" : "Add a new case study to your portfolio"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{error && (
|
|
<div className="p-4 rounded-xl bg-error/10 border border-error/20 text-error text-sm font-medium">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold">Project Title</label>
|
|
<input
|
|
name="title"
|
|
required
|
|
defaultValue={initialData?.title}
|
|
placeholder="Core Banking API"
|
|
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold">URL Slug</label>
|
|
<input
|
|
name="slug"
|
|
required
|
|
defaultValue={initialData?.slug}
|
|
placeholder="core-banking-api"
|
|
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold">Category</label>
|
|
<select
|
|
name="category"
|
|
required
|
|
defaultValue={initialData?.category || "Enterprise Backend"}
|
|
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono cursor-pointer"
|
|
>
|
|
<option value="Enterprise Backend">Enterprise Backend</option>
|
|
<option value="Frontend Development">Frontend Development</option>
|
|
<option value="Mobile Development">Mobile Development</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold">Description</label>
|
|
<textarea
|
|
name="description"
|
|
required
|
|
defaultValue={initialData?.description}
|
|
rows={4}
|
|
placeholder="High-performance API Gateway handling 500K+ daily transactions..."
|
|
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono resize-y"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold">Live URL (Optional)</label>
|
|
<input
|
|
name="liveUrl"
|
|
type="url"
|
|
defaultValue={initialData?.liveUrl || ""}
|
|
placeholder="https://example.com"
|
|
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold">Repository URL (Optional)</label>
|
|
<input
|
|
name="repoUrl"
|
|
type="url"
|
|
defaultValue={initialData?.repoUrl || ""}
|
|
placeholder="https://github.com/..."
|
|
className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all font-mono"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-semibold">Cover Image</label>
|
|
<label className="flex flex-col items-center justify-center w-full h-40 rounded-xl border-2 border-dashed border-border hover:border-accent/50 bg-muted/10 hover:bg-muted/30 cursor-pointer transition-colors relative overflow-hidden">
|
|
{preview ? (
|
|
<img src={preview} alt="Preview" className="w-full h-full object-cover opacity-80" />
|
|
) : (
|
|
<div className="flex flex-col items-center text-muted-foreground">
|
|
<Upload size={24} className="mb-2" />
|
|
<span className="text-sm font-medium">Click to upload image</span>
|
|
<span className="text-xs mt-1 opacity-75">PNG, JPG, WEBP recommended</span>
|
|
</div>
|
|
)}
|
|
<input
|
|
type="file"
|
|
name="image"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) setPreview(URL.createObjectURL(file));
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 pt-2">
|
|
<input
|
|
type="checkbox"
|
|
name="isPublished"
|
|
id="isPublished"
|
|
className="w-5 h-5 rounded border-border text-accent focus:ring-accent/50"
|
|
defaultChecked={initialData ? initialData.isPublished : true}
|
|
/>
|
|
<label htmlFor="isPublished" className="text-sm font-medium cursor-pointer">
|
|
Publish immediately (visible to visitors)
|
|
</label>
|
|
</div>
|
|
|
|
<div className="pt-6 border-t border-border/50 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="flex items-center gap-2 px-8 py-3 rounded-xl bg-foreground text-background font-semibold text-sm hover:opacity-90 transition-all disabled:opacity-50 disabled:scale-100 hover:scale-[1.02] shadow-md"
|
|
>
|
|
{loading ? (
|
|
<Loader2 size={18} className="animate-spin" />
|
|
) : projectId ? (
|
|
<>
|
|
<Save size={18} />
|
|
Update Project
|
|
</>
|
|
) : (
|
|
<>
|
|
<PlusCircle size={18} />
|
|
Save Project
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|