Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Label } from "@/components/ui/label";
|
|
import { dataConsent } from "@/content/consent";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
id: string;
|
|
checked: boolean;
|
|
onCheckedChange: (checked: boolean) => void;
|
|
/** Defaults to standard form consent; use `payment` for checkout */
|
|
variant?: "default" | "payment";
|
|
className?: string;
|
|
};
|
|
|
|
export function DataConsentField({
|
|
id,
|
|
checked,
|
|
onCheckedChange,
|
|
variant = "default",
|
|
className,
|
|
}: Props) {
|
|
const labelPrefix =
|
|
variant === "payment" ? dataConsent.paymentLabel : dataConsent.label;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-4",
|
|
className
|
|
)}
|
|
>
|
|
<Checkbox
|
|
id={id}
|
|
checked={checked}
|
|
onCheckedChange={(v) => onCheckedChange(v === true)}
|
|
className="mt-0.5"
|
|
required
|
|
/>
|
|
<Label htmlFor={id} className="text-sm font-normal leading-snug text-muted-foreground">
|
|
{labelPrefix}{" "}
|
|
<Link href="/privacy" className="font-medium text-[#1a5c38] underline underline-offset-2">
|
|
{dataConsent.privacyLinkText}
|
|
</Link>
|
|
.
|
|
</Label>
|
|
</div>
|
|
);
|
|
}
|