contact-3

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