contact-2

1---
2import { cn } from "@/lib/utils"
3import { Button } from "@/components/ui/button"
4import {
5  Field,
6  FieldGroup,
7  FieldLabel,
8  FieldLegend,
9  FieldSet,
10} from "@/components/ui/field"
11import { Icon } from "@/components/ui/icon"
12import { Input } from "@/components/ui/input"
13import { Section, SectionContainer } from "@/components/ui/section"
14import { Textarea } from "@/components/ui/textarea"
15 
16type Props = {
17  class?: string
18  title: string
19  description: string
20  contactItems: {
21    icon: string
22    title: string
23    description: string
24    href?: string
25  }[]
26  form: {
27    title: string
28    legend: string
29    nameLabel: string
30    namePlaceholder: string
31    emailLabel: string
32    emailPlaceholder: string
33    messageLabel: string
34    messagePlaceholder: string
35    actionLabel: string
36  }
37}
38 
39const { class: className, title, description, contactItems, form } = Astro.props
40---
41 
42<Section class={cn("", className)}>
43  <SectionContainer
44    class="grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start"
45  >
46    <div class="flex flex-col gap-6">
47      <div class="flex flex-col gap-4">
48        <h2
49          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
50        >
51          {title}
52        </h2>
53        <p class="text-muted-foreground max-w-xl text-base leading-relaxed">
54          {description}
55        </p>
56      </div>
57      <div class="rounded-xl border p-6">
58        <div class="mb-6">
59          <h3 class="text-lg font-medium">{form.title}</h3>
60        </div>
61        <FieldSet>
62          <FieldLegend class="sr-only">{form.legend}</FieldLegend>
63          <FieldGroup>
64            <div class="grid gap-4 md:grid-cols-2">
65              <Field>
66                <FieldLabel for="contact-name-2">{form.nameLabel}</FieldLabel>
67                <Input id="contact-name-2" placeholder={form.namePlaceholder} />
68              </Field>
69              <Field>
70                <FieldLabel for="contact-email-2">{form.emailLabel}</FieldLabel>
71                <Input
72                  id="contact-email-2"
73                  type="email"
74                  placeholder={form.emailPlaceholder}
75                />
76              </Field>
77            </div>
78            <Field>
79              <FieldLabel for="contact-message-2"
80                >{form.messageLabel}</FieldLabel
81              >
82              <Textarea
83                id="contact-message-2"
84                rows={5}
85                placeholder={form.messagePlaceholder}
86              />
87// … truncated