4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T30d5,"use client"; import { useId, useRef, useState, type ComponentProps, type FormEvent } from "react"; import { ArrowUpRight, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; export type ContactValues = { name: string; email: string; company: string; topic: string; message: string; }; export type ContactChannel = { label: string; value: string; href?: string; detail?: string; }; export type ContactBlockProps = { eyebrow?: string; title?: string; intro?: string; channels?: ContactChannel[]; responseNote?: string; topics?: string[]; onSubmit?: (values: ContactValues) => void | Promise; } & Omit, "onSubmit">; const DEFAULT_CHANNELS: ContactChannel[] = [ { label: "New work", value: "projects@halden.studio", href: "mailto:projects@halden.studio", detail: "Briefs, budgets, timelines. A rough outline is fine.", }, { label: "Everything else", value: "hello@halden.studio", href: "mailto:hello@halden.studio", detail: "Press, talks, internships, saying hello.", }, { label: "Studio", value: "Torstraße 118, 10119 Berlin", detail: "Mon–Thu, 09:30–18:00 CET. Visits by appointment.", }, ]; const DEFAULT_TOPICS = ["New project", "Existing project", "Press", "Something else"]; type Errors = Partial>; const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; function validate(values: ContactValues): Errors { const errors: Errors = {}; if (!values.name.trim()) errors.name = "Tell us who you are."; if (!values.email.trim()) errors.email = "We need an email to reply to."; else if (!EMAIL_PATTERN.test(values.email.trim())) errors.email = "That email looks incomplete — check for a typo."; if (!values.topic) errors.topic = "Pick the closest topic."; if (values.message.trim().length < 20) errors.message = "A sentence or two, please (20 characters minimum)."; return errors; } const defaultSubmit = () => new Promise((resolve) => setTimeout(resolve, 900)); export default function ContactBlock({ eyebrow = "Contact", title = "Start with an email. We'll take it from there.", intro = "Halden is a six-person design studio working on identities, websites and the occasional book. We take on four or five projects a year.", channels = DEFAULT_CHANNELS, responseNote = "We reply within one working day.", topics = DEFAULT_TOPICS, onSubmit = defaultSubmit, className, ...props }: ContactBlockProps) { const id = useId(); const formRef = useRef(null); const [status, setStatus] = useState<"idle" | "sending" | "sent">("idle"); const [errors, setErrors] = useState({}); const [topic, setTopic] = useState(topics[0] ?? ""); const [sentName, setSentName] = useState(""); const fieldId = (name: keyof ContactValues) => `${id}-${name}`; const errorId = (name: keyof ContactValues) => `${id}-${name}-error`; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); const values: ContactValues = { name: String(data.get("name") ?? ""), email: String(data.get("email") ?? ""), company: String(data.get("company") ?? ""), topic, message: String(data.get("message") ?? ""), }; const nextErrors = validate(values); setErrors(nextErrors); const firstInvalid = Object.keys(nextErrors)[0] as keyof ContactValues | undefined; if (firstInvalid) { formRef.current ?.querySelector(`#${CSS.escape(fieldId(firstInvalid))}`) ?.focus(); return; } setStatus("sending"); try { await onSubmit(values); setSentName(values.name.trim().split(" ")[0]); setStatus("sent"); } catch { setStatus("idle"); } }; const clearError = (name: keyof ContactValues) => { if (errors[name]) setErrors((current) => ({ ...current, [name]: undefined })); }; const fieldProps = (name: keyof ContactValues) => ({ id: fieldId(name), name, "aria-invalid": errors[name] ? true : undefined, "aria-describedby": errors[name] ? errorId(name) : undefined, onChange: () => clearError(name), }); const errorText = (name: keyof ContactValues) => errors[name] ? (

{errors[name]}

) : null; return (

{eyebrow}

{title}

{intro}

{channel.label}: {channel.href ? ( {channel.value} ) : ( {channel.value} )} {channel.detail ? (
{channel.detail}
) : null}

{status === "sent" ? (

Message received

Thanks{sentName ? `, ${sentName}` : ""}. It's in our inbox.

{responseNote} If it's urgent, reply to the confirmation email and mark the subject with [urgent].

) : null}

{status !== "sent" ? (

Name {errorText("name")}

Email {errorText("email")}

Company{" "} (optional)

Topic { setTopic(value); clearError("topic"); }} aria-invalid={errors.topic ? true : undefined} aria-describedby={errors.topic ? errorId("topic") : undefined} className="grid grid-cols-2 gap-0 border-t border-l" > {topics.map((option, index) => { const optionId = `${id}-topic-${index}`; return ( {option} ); })} {errorText("topic")}

Message

{errorText("message")}
                </div>

<div className="flex flex-wrap items-center justify-between gap-4 border-t pt-6">
                  <p className="text-muted-foreground max-w-xs text-xs leading-relaxed">
                    We only use your details to reply. Nothing goes on a mailing list.
                  </p>
                  <Button type="submit" disabled={status === "sending"}>
                    {status === "sending" ? (
                      <>
                        <Loader2 aria-hidden="true" className="animate-spin" />
                        Sending…
                      </>
                    ) : (
                      "Send message"
                    )}
                  </Button>
                </div>
              </form>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}

export { ContactBlock };
4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@devsloka","registryDependencies":["button","input","label","radio-group","textarea"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/contact-block.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>