110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
import { Link, useParams } from "react-router"
|
|
import {
|
|
ArrowLeft,
|
|
Calendar,
|
|
FileText,
|
|
Lock,
|
|
MessageSquare,
|
|
} from "lucide-react"
|
|
import { dummyForms } from "@/lib/dummy-data"
|
|
import { Navbar } from "@/components/shared/navbar"
|
|
import { Footer } from "@/components/shared/footer"
|
|
import { FormButton } from "@/components/shared/form-button"
|
|
import { QuestionPreview } from "@/components/forms/question-preview"
|
|
|
|
export default function FormPreviewPage() {
|
|
const { id } = useParams()
|
|
const form = dummyForms.find((f) => f.id === id)
|
|
|
|
if (!form) {
|
|
throw new Response("Form not found", { status: 404 })
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background">
|
|
<Navbar />
|
|
|
|
<main className="flex-1">
|
|
<div className="mx-auto max-w-3xl px-4 py-8 lg:px-8">
|
|
<Link
|
|
to="/forms"
|
|
className="mb-6 inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to forms
|
|
</Link>
|
|
|
|
<div className="mb-8 rounded-xl border border-border bg-card shadow-sm">
|
|
<div className="h-2 rounded-t-xl bg-primary" />
|
|
<div className="p-6">
|
|
<div className="mb-4 flex flex-wrap items-center gap-3">
|
|
|
|
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Lock className="h-3 w-3" />
|
|
Read-only preview
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-xl font-bold text-foreground text-balance sm:text-2xl">
|
|
{form.title}
|
|
</h1>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
{form.description}
|
|
</p>
|
|
|
|
<div className="mt-5 flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-border pt-5 text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1.5">
|
|
<FileText className="h-3.5 w-3.5" />
|
|
{form.questions.length} questions
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<MessageSquare className="h-3.5 w-3.5" />
|
|
{form.responseCount} responses
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<Calendar className="h-3.5 w-3.5" />
|
|
Created {form.createdAt}
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<Calendar className="h-3.5 w-3.5" />
|
|
Updated {form.updatedAt}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
{form.questions.map((question, index) => (
|
|
<QuestionPreview
|
|
key={question.id}
|
|
question={question}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 flex flex-col items-center gap-3 rounded-xl border border-dashed border-border bg-card/50 p-6">
|
|
<p className="text-sm text-muted-foreground">
|
|
This is a read-only preview. Form submission is disabled.
|
|
</p>
|
|
<FormButton disabled size="lg">
|
|
Submit (Preview Mode)
|
|
</FormButton>
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-center">
|
|
<Link to="/forms">
|
|
<FormButton variant="ghost" size="sm">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to all forms
|
|
</FormButton>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|