83 lines
3.4 KiB
TypeScript
83 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cls } from "@/lib/utils";
|
|
import MediaContent from "@/components/shared/MediaContent";
|
|
import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
|
|
|
|
export type MediaStackItem = {
|
|
imageSrc?: string;
|
|
videoSrc?: string;
|
|
imageAlt?: string;
|
|
};
|
|
|
|
interface BentoMediaStackProps {
|
|
items: [MediaStackItem, MediaStackItem, MediaStackItem];
|
|
useInvertedBackground: InvertedBackground;
|
|
className?: string;
|
|
}
|
|
|
|
const BentoMediaStack = ({
|
|
items,
|
|
className = "",
|
|
}: BentoMediaStackProps) => {
|
|
return (
|
|
<div
|
|
className={cls("group/stack relative w-full h-full card shadow rounded-theme-capped flex items-center justify-center select-none", className)}
|
|
>
|
|
<div
|
|
className={cls(
|
|
"absolute! w-3/5 2xl:w-1/2 aspect-[4/3] p-1 rounded-theme-capped overflow-hidden primary-button z-[1]",
|
|
"rotate-8 translate-x-[12%] -translate-y-[8%] transition-all duration-500 ease-out",
|
|
"2xl:translate-x-[8%] 2xl:-translate-y-[6%]",
|
|
"group-hover/stack:translate-x-[22%] group-hover/stack:rotate-12 group-hover/stack:-translate-y-[14%]",
|
|
"2xl:group-hover/stack:translate-x-[16%] 2xl:group-hover/stack:-translate-y-[10%]"
|
|
)}
|
|
>
|
|
<MediaContent
|
|
imageSrc={items[2].imageSrc}
|
|
videoSrc={items[2].videoSrc}
|
|
imageAlt={items[2].imageAlt}
|
|
imageClassName="h-full rounded-[calc(var(--radius-theme-capped)*0.95)]!"
|
|
/>
|
|
</div>
|
|
<div
|
|
className={cls(
|
|
"absolute! w-3/5 2xl:w-1/2 aspect-[4/3] p-1 rounded-theme-capped overflow-hidden primary-button z-[2]",
|
|
"-rotate-8 -translate-x-[12%] -translate-y-[8%] transition-all duration-500 ease-out",
|
|
"2xl:-translate-x-[8%] 2xl:-translate-y-[6%]",
|
|
"group-hover/stack:-translate-x-[22%] group-hover/stack:-rotate-12 group-hover/stack:-translate-y-[14%]",
|
|
"2xl:group-hover/stack:-translate-x-[16%] 2xl:group-hover/stack:-translate-y-[10%]"
|
|
)}
|
|
>
|
|
<MediaContent
|
|
imageSrc={items[1].imageSrc}
|
|
videoSrc={items[1].videoSrc}
|
|
imageAlt={items[1].imageAlt}
|
|
imageClassName="h-full rounded-[calc(var(--radius-theme-capped)*0.95)]!"
|
|
/>
|
|
</div>
|
|
<div
|
|
className={cls(
|
|
"absolute! w-3/5 2xl:w-1/2 aspect-[4/3] p-1 rounded-theme-capped overflow-hidden primary-button z-30",
|
|
"translate-y-[10%] transition-all duration-500 ease-out",
|
|
"2xl:translate-y-[7%]",
|
|
"group-hover/stack:translate-y-[20%]",
|
|
"2xl:group-hover/stack:translate-y-[14%]"
|
|
)}
|
|
>
|
|
<MediaContent
|
|
imageSrc={items[0].imageSrc}
|
|
videoSrc={items[0].videoSrc}
|
|
imageAlt={items[0].imageAlt}
|
|
imageClassName="h-full rounded-[calc(var(--radius-theme-capped)*0.95)]!"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
BentoMediaStack.displayName = "BentoMediaStack";
|
|
|
|
export default memo(BentoMediaStack);
|