Files
638683a1-6d3d-41a5-bb83-d06…/src/components/sections/footer/FooterCard.tsx
2026-01-19 19:37:33 +00:00

82 lines
2.4 KiB
TypeScript

"use client";
import FillWidthText from "@/components/shared/FillWidthText/FillWidthText";
import SocialLinks from "@/components/shared/SocialLinks";
import { cls } from "@/lib/utils";
import type { SocialLink } from "@/components/shared/SocialLinks";
interface FooterCardProps {
// logoSrc?: string;
// logoAlt?: string;
logoText?: string;
logoLineHeight?: number;
copyrightText?: string;
socialLinks?: SocialLink[];
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
logoClassName?: string;
dividerClassName?: string;
copyrightContainerClassName?: string;
copyrightTextClassName?: string;
socialContainerClassName?: string;
socialIconClassName?: string;
}
const FooterCard = ({
// logoSrc,
// logoAlt = "Logo",
logoText = "Webild",
logoLineHeight = 1.1,
copyrightText = `© 2025 | Webild`,
socialLinks,
ariaLabel = "Site footer",
className = "",
containerClassName = "",
cardClassName = "",
logoClassName = "",
dividerClassName = "",
copyrightContainerClassName = "",
copyrightTextClassName = "",
socialContainerClassName = "",
socialIconClassName = "",
}: FooterCardProps) => {
return (
<footer
role="contentinfo"
aria-label={ariaLabel}
className={cls("relative w-full pt-20 pb-40", className)}
>
<div className={cls("relative w-content-width mx-auto card rounded-theme-capped px-10", containerClassName, cardClassName)}>
<div className={cls("relative z-1 w-full", logoClassName)}>
<FillWidthText lineHeight={logoLineHeight}>
{logoText}
</FillWidthText>
</div>
<div className={cls("relative z-1 w-full h-px bg-accent/20 mb-6", dividerClassName)} />
<div
className={cls("relative z-1 w-full flex flex-col md:flex-row items-center justify-between gap-4 mb-6", copyrightContainerClassName)}
>
<span className={cls("text-accent/75 text-sm", copyrightTextClassName)}>
{copyrightText}
</span>
{socialLinks && socialLinks.length > 0 && (
<SocialLinks
socialLinks={socialLinks}
className={socialContainerClassName}
iconClassName={socialIconClassName}
/>
)}
</div>
</div>
</footer>
);
};
FooterCard.displayName = "FooterCard";
export default FooterCard;