54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import {
|
|
Calendar,
|
|
Eye,
|
|
FileText,
|
|
MessageSquare,
|
|
} from "lucide-react"
|
|
import type { FormSummary } from "@/lib/types"
|
|
import { FormButton } from "@/components/shared/form-button"
|
|
import { Link } from "react-router";
|
|
|
|
interface FormCardProps {
|
|
form: FormSummary
|
|
}
|
|
|
|
export function FormCard({ form }: FormCardProps) {
|
|
return (
|
|
<div className="group flex flex-col rounded-xl border border-border bg-card shadow-sm transition-shadow hover:shadow-md">
|
|
<div className="h-1.5 rounded-t-xl bg-primary" />
|
|
|
|
<div className="flex flex-1 flex-col p-5">
|
|
<div className="mb-3">
|
|
<h3 className="text-base font-semibold leading-snug text-foreground text-pretty">
|
|
{form.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<p className="mb-4 line-clamp-2 text-sm leading-relaxed text-muted-foreground">
|
|
{form.description}
|
|
</p>
|
|
|
|
<div className="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<MessageSquare className="h-3.5 w-3.5" />
|
|
{form.response_count} responses
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="h-3.5 w-3.5" />
|
|
{new Date(form.updated_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-4 border-t border-border pt-4">
|
|
<Link to={`/form/${form.id}`}>
|
|
<FormButton variant="outline" size="sm" className="w-full">
|
|
<Eye className="h-3.5 w-3.5" />
|
|
Preview Form
|
|
</FormButton>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|