contact-1

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