diff --git a/src/components/sections/TemplateGallery.tsx b/src/components/sections/TemplateGallery.tsx index 1b921ed..dc142d8 100644 --- a/src/components/sections/TemplateGallery.tsx +++ b/src/components/sections/TemplateGallery.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useState } from "react"; +import { useState } from "react"; import { useRouter } from "next/navigation"; import Link from "next/link"; import { AnimatePresence, motion } from "framer-motion"; @@ -8,7 +8,6 @@ import { ArrowRight } from "lucide-react"; import { useTranslations } from "next-intl"; import { cn } from "@/lib/utils"; -import { createVideoProject } from "@/lib/create-video-project"; import type { AdminProject } from "@/lib/admin-api"; import { SectionReveal } from "./SectionReveal"; @@ -58,7 +57,6 @@ export function TemplateGallery({ className, adminItems }: TemplateGalleryProps) const router = useRouter(); const t = useTranslations("templates"); const [activeTab, setActiveTab] = useState("All"); - const [usingTemplateId, setUsingTemplateId] = useState(null); // Real admin templates only — no hardcoded demo fallback. const allItems: TemplateItem[] = (adminItems ?? []).map(adminProjectToTemplateItem); @@ -74,38 +72,11 @@ export function TemplateGallery({ className, adminItems }: TemplateGalleryProps) Business: t("tabBusiness"), }; - const handleUseTemplate = useCallback( - async (template: TemplateItem) => { - if (usingTemplateId) return; - setUsingTemplateId(template.id); - - // Image templates → create an image project (future) - // All others → video project - const isImage = template.category === "Images"; - if (isImage) { - router.push("/dashboard"); - setUsingTemplateId(null); - return; - } - - const result = await createVideoProject({ name: template.name }); - setUsingTemplateId(null); - - if (!result.ok) { - // Dev mode: Supabase not configured → go to new-project onboarding - if (result.error.includes("Supabase is not configured")) { - router.push("/studio/video/new"); - return; - } - // Any other failure (unauth, server error) → send to sign-in - router.push(`/auth?next=${encodeURIComponent("/templates")}`); - return; - } - - router.push(`/studio/video/${result.projectId}`); - }, - [router, usingTemplateId] - ); + // "Use this template" → open the template detail page (where the user picks + // aspect/style and starts an editable project). template.id is the slug. + const handleUseTemplate = (template: TemplateItem) => { + router.push(`/templates/${template.id}`); + }; return (
void handleUseTemplate(template)} - isUsingTemplate={usingTemplateId === template.id} + onUseTemplate={() => handleUseTemplate(template)} + isUsingTemplate={false} useTemplateLabel={t("useTemplate")} openingLabel={t("opening")} />