101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
|
import { KleapForm, KleapFormField } from "@/components/kleap-form";
|
|
import { useLanguage } from "@/context/language-provider";
|
|
import Image from "next/image";
|
|
|
|
export function ReportForm() {
|
|
const { t } = useLanguage();
|
|
|
|
const fields: KleapFormField[] = [
|
|
{
|
|
name: "incident_type",
|
|
label: t("incident_type"),
|
|
type: "select",
|
|
required: true,
|
|
options: [
|
|
t("car_accident"),
|
|
t("train_accident"),
|
|
t("crime"),
|
|
t("violent_crime"),
|
|
t("emergency"),
|
|
t("other"),
|
|
],
|
|
},
|
|
{
|
|
name: "location",
|
|
label: t("location"),
|
|
type: "text",
|
|
placeholder: t("placeholder_location"),
|
|
required: true,
|
|
},
|
|
{
|
|
name: "description",
|
|
label: t("description"),
|
|
type: "textarea",
|
|
placeholder: t("placeholder_description"),
|
|
required: true,
|
|
},
|
|
{
|
|
name: "contact_info",
|
|
label: t("contact_info"),
|
|
type: "text",
|
|
placeholder: t("placeholder_contact"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="report" className="py-20 bg-neutral-50">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
<div className="order-2 lg:order-1">
|
|
<div className="mb-8">
|
|
<Heading className="mb-4">{t("submit_report")}</Heading>
|
|
<Subheading className="text-lg font-medium text-red-600 mb-4">
|
|
{t("hero_title_1")} {t("hero_title_2")}
|
|
</Subheading>
|
|
<Subheading>{t("anonymous_note")}</Subheading>
|
|
</div>
|
|
<Card className="border-2 border-red-100">
|
|
<CardHeader>
|
|
<CardTitle>{t("incident_details")}</CardTitle>
|
|
<CardDescription>
|
|
{t("accuracy_note")}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<KleapForm
|
|
formId="incident-report"
|
|
title={t("incident_details")}
|
|
fields={fields}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="order-1 lg:order-2 space-y-6">
|
|
<div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-lg">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1607264469190-4abbbd14f5ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
|
|
alt="Ambulance Emergency"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-lg">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1713111392302-6b70d996a639?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
|
|
alt="Fire Truck Response"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|