143 lines
5.1 KiB
TypeScript
143 lines
5.1 KiB
TypeScript
"use client";
|
|
|
|
import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
|
|
import FooterColumns from "@/components/shared/FooterColumns";
|
|
import MediaContent from "@/components/shared/MediaContent";
|
|
import { cls } from "@/lib/utils";
|
|
import type { FooterColumn } from "@/components/shared/FooterColumns";
|
|
|
|
type MediaProps =
|
|
| {
|
|
imageSrc: string;
|
|
imageAlt?: string;
|
|
videoSrc?: never;
|
|
videoAriaLabel?: never;
|
|
}
|
|
| {
|
|
videoSrc: string;
|
|
videoAriaLabel?: string;
|
|
imageSrc?: never;
|
|
imageAlt?: never;
|
|
};
|
|
|
|
type FooterMediaProps = MediaProps & {
|
|
// logoSrc?: string;
|
|
logoText?: string;
|
|
// logoWidth?: number;
|
|
// logoHeight?: number;
|
|
columns: FooterColumn[];
|
|
copyrightText?: string;
|
|
onPrivacyClick?: () => void;
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
containerClassName?: string;
|
|
mediaWrapperClassName?: string;
|
|
mediaClassName?: string;
|
|
// logoClassName?: string;
|
|
logoTextClassName?: string;
|
|
columnsClassName?: string;
|
|
columnClassName?: string;
|
|
columnTitleClassName?: string;
|
|
columnItemClassName?: string;
|
|
copyrightContainerClassName?: string;
|
|
copyrightTextClassName?: string;
|
|
privacyButtonClassName?: string;
|
|
};
|
|
|
|
const FooterMedia = ({
|
|
imageSrc,
|
|
videoSrc,
|
|
imageAlt = "",
|
|
videoAriaLabel = "Footer video",
|
|
// logoSrc = "/brand/logowhite.svg",
|
|
logoText = "Webild",
|
|
// logoWidth = 120,
|
|
// logoHeight = 40,
|
|
columns,
|
|
copyrightText = `© 2025 | Webild`,
|
|
onPrivacyClick,
|
|
ariaLabel = "Site footer",
|
|
className = "",
|
|
containerClassName = "",
|
|
mediaWrapperClassName = "",
|
|
mediaClassName = "",
|
|
// logoClassName = "",
|
|
logoTextClassName = "",
|
|
columnsClassName = "",
|
|
columnClassName = "",
|
|
columnTitleClassName = "",
|
|
columnItemClassName = "",
|
|
copyrightContainerClassName = "",
|
|
copyrightTextClassName = "",
|
|
privacyButtonClassName = "",
|
|
}: FooterMediaProps) => {
|
|
return (
|
|
<footer
|
|
role="contentinfo"
|
|
aria-label={ariaLabel}
|
|
className={cls("relative overflow-hidden w-full mt-20", className)}
|
|
>
|
|
<div className={cls("w-full aspect-square md:aspect-[16/6] mask-fade-top-long", mediaWrapperClassName)}>
|
|
<MediaContent
|
|
imageSrc={imageSrc}
|
|
videoSrc={videoSrc}
|
|
imageAlt={imageAlt}
|
|
videoAriaLabel={videoAriaLabel}
|
|
imageClassName={cls("w-full h-full object-cover rounded-none!", mediaClassName)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="primary-button text-background py-15">
|
|
<div
|
|
className={cls("relative w-content-width mx-auto z-10", containerClassName)}
|
|
>
|
|
<div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
|
|
{/* {logoSrc ? (
|
|
<div className="flex-shrink-0">
|
|
<Image
|
|
src={logoSrc}
|
|
alt="Logo"
|
|
width={logoWidth}
|
|
height={logoHeight}
|
|
className={cls("object-contain", logoClassName)}
|
|
unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
|
|
aria-hidden={true}
|
|
/>
|
|
</div>
|
|
) : ( */}
|
|
<h2 className={cls("text-4xl font-medium text-background", logoTextClassName)}>
|
|
{logoText}
|
|
</h2>
|
|
{/* )} */}
|
|
|
|
<FooterColumns
|
|
columns={columns.filter(column => column.title === "Game" || column.title === "Community")}
|
|
className={columnsClassName}
|
|
columnClassName={columnClassName}
|
|
columnTitleClassName={cls("text-background/50", columnTitleClassName)}
|
|
columnItemClassName={cls("text-background", columnItemClassName)}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className={cls("w-full flex items-center justify-between pt-9 border-t border-background/20", copyrightContainerClassName)}
|
|
>
|
|
<span className={cls("text-background/50 text-sm", copyrightTextClassName)}>
|
|
{copyrightText}
|
|
</span>
|
|
<ButtonTextUnderline
|
|
text="Privacy Policy"
|
|
onClick={onPrivacyClick}
|
|
className={cls("text-background/50", privacyButtonClassName)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
FooterMedia.displayName = "FooterMedia";
|
|
|
|
export default FooterMedia;
|