49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
"use client";
|
|
import { useRouter } from "next/navigation";
|
|
import { createSite, Site } from "@/lib/sites";
|
|
import { useState } from "react";
|
|
|
|
export default function TemplateSelect() {
|
|
const router = useRouter();
|
|
const userId = parseInt(localStorage.getItem("userId") || "0");
|
|
const templates = ["template1"];
|
|
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
|
|
|
|
const handleSelect = () => {
|
|
if (!selectedTemplate) return;
|
|
const site = createSite({
|
|
userId,
|
|
businessName: "My Business",
|
|
template: selectedTemplate,
|
|
});
|
|
router.push(`/dashboard`);
|
|
};
|
|
|
|
return (
|
|
<main className="container mx-auto p-8">
|
|
<h1 className="text-2xl font-bold mb-6">Select a Template</h1>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{templates.map((t) => (
|
|
<div
|
|
key={t}
|
|
onClick={() => setSelectedTemplate(t)}
|
|
className={`border p-4 rounded shadow cursor-pointer hover:shadow-lg transition ${
|
|
selectedTemplate === t ? "border-blue-600" : ""
|
|
}`}
|
|
>
|
|
<h2 className="font-semibold mb-2">{t}</h2>
|
|
<div className="h-40 bg-gray-100 flex items-center justify-center">
|
|
Preview
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={handleSelect}
|
|
className="mt-6 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
|
|
>
|
|
Create Site
|
|
</button>
|
|
</main>
|
|
);
|
|
}
|