footer-2

1---
2import { cn } from "@/lib/utils"
3import { Icon } from "@/components/ui/icon"
4import { Logo, LogoText } from "@/components/ui/logo"
5import { Section, SectionContainer } from "@/components/ui/section"
6import { Separator } from "@/components/ui/separator"
7 
8type Props = {
9  class?: string
10  brandName: string
11  brandHref: string
12  description: string
13  links?: {
14    label: string
15    href: string
16  }[]
17  socials?: {
18    label: string
19    href: string
20    icon: string
21  }[]
22  copyright: string
23}
24 
25const {
26  class: className,
27  brandName,
28  brandHref,
29  description,
30  links,
31  socials,
32  copyright,
33} = Astro.props
34---
35 
36<footer class={cn("", className)}>
37  <Section class="py-12 lg:py-16">
38    <SectionContainer class="items-center text-center">
39      <Logo href={brandHref}>
40        <LogoText>{brandName}</LogoText>
41      </Logo>
42      <p class="text-muted-foreground max-w-md text-sm leading-relaxed">
43        {description}
44      </p>
45      {
46        links && links.length > 0 && (
47          <nav class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
48            {links.map((link) => (
49              <a
50                href={link.href}
51                class="text-muted-foreground hover:text-foreground text-sm transition-colors"
52              >
53                {link.label}
54              </a>
55            ))}
56          </nav>
57        )
58      }
59      {
60        socials && socials.length > 0 && (
61          <div class="flex items-center justify-center gap-3">
62            {socials.map((social) => (
63              <a
64                href={social.href}
65                class="text-muted-foreground hover:text-foreground transition-colors"
66                aria-label={social.label}
67                target="_blank"
68                rel="noreferrer"
69              >
70                <Icon name={social.icon} class="size-4" />
71              </a>
72            ))}
73          </div>
74        )
75      }
76      <Separator />
77      <p class="text-muted-foreground text-sm">{copyright}</p>
78    </SectionContainer>
79  </Section>
80</footer>