84 lines
4.2 KiB
TypeScript
84 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cls } from "@/lib/utils";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
|
|
|
|
interface BentoRevealIconProps {
|
|
icon: LucideIcon;
|
|
useInvertedBackground: InvertedBackground;
|
|
className?: string;
|
|
}
|
|
|
|
const BentoRevealIcon = ({
|
|
icon: Icon,
|
|
useInvertedBackground,
|
|
className = "",
|
|
}: BentoRevealIconProps) => {
|
|
void useInvertedBackground;
|
|
|
|
return (
|
|
<div
|
|
className={cls(
|
|
"group relative h-full w-full flex items-center justify-center overflow-hidden",
|
|
className
|
|
)}
|
|
style={{
|
|
maskImage: "linear-gradient(to right, transparent, black 15%, black 85%, transparent), linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)",
|
|
WebkitMaskImage: "linear-gradient(to right, transparent, black 15%, black 85%, transparent), linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)",
|
|
maskComposite: "intersect",
|
|
WebkitMaskComposite: "source-in",
|
|
}}
|
|
>
|
|
<div className="relative h-26 w-[6.5rem]">
|
|
<div
|
|
className="absolute right-full top-1/2 -mt-48 transition-transform duration-500 ease-out group-hover:-translate-x-12"
|
|
style={{ transform: "translateX(calc(52px + 1px - 2px))" }}
|
|
>
|
|
<div className="relative h-96 aspect-[224/280] -scale-x-100">
|
|
<svg viewBox="0 0 224 280" fill="none" className="absolute inset-0 h-full w-full overflow-visible">
|
|
<path fill="currentColor" className="text-background-accent/10" d="M8 .25a8 8 0 0 0-8 8v91.704c0 2.258.954 4.411 2.628 5.927l10.744 9.738A7.998 7.998 0 0 1 16 121.546v36.408a7.998 7.998 0 0 1-2.628 5.927l-10.744 9.738A7.998 7.998 0 0 0 0 179.546v92.204a8 8 0 0 0 8 8h308a8 8 0 0 0 8-8V8.25a8 8 0 0 0-8-8H8Z" />
|
|
<path stroke="currentColor" className="text-background-accent" d="M.5 99.954V8.25A7.5 7.5 0 0 1 8 .75h308a7.5 7.5 0 0 1 7.5 7.5v263.5a7.5 7.5 0 0 1-7.5 7.5H8a7.5 7.5 0 0 1-7.5-7.5v-92.204a7.5 7.5 0 0 1 2.464-5.557l10.744-9.737a8.5 8.5 0 0 0 2.792-6.298v-36.408a8.5 8.5 0 0 0-2.792-6.298l-10.744-9.737A7.5 7.5 0 0 1 .5 99.954Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="absolute left-full top-1/2 -mt-48 transition-transform duration-500 ease-out group-hover:translate-x-12"
|
|
style={{ transform: "translateX(calc(-52px - 1px + 2px))" }}
|
|
>
|
|
<div className="relative h-96 aspect-[224/280]">
|
|
<svg viewBox="0 0 224 280" fill="none" className="absolute inset-0 h-full w-full overflow-visible">
|
|
<path fill="currentColor" className="text-background-accent/10" d="M8 .25a8 8 0 0 0-8 8v91.704c0 2.258.954 4.411 2.628 5.927l10.744 9.738A7.998 7.998 0 0 1 16 121.546v36.408a7.998 7.998 0 0 1-2.628 5.927l-10.744 9.738A7.998 7.998 0 0 0 0 179.546v92.204a8 8 0 0 0 8 8h308a8 8 0 0 0 8-8V8.25a8 8 0 0 0-8-8H8Z" />
|
|
<path stroke="currentColor" className="text-background-accent" d="M.5 99.954V8.25A7.5 7.5 0 0 1 8 .75h308a7.5 7.5 0 0 1 7.5 7.5v263.5a7.5 7.5 0 0 1-7.5 7.5H8a7.5 7.5 0 0 1-7.5-7.5v-92.204a7.5 7.5 0 0 1 2.464-5.557l10.744-9.737a8.5 8.5 0 0 0 2.792-6.298v-36.408a8.5 8.5 0 0 0-2.792-6.298l-10.744-9.737A7.5 7.5 0 0 1 .5 99.954Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full h-full p-2">
|
|
<div className="relative w-full h-full primary-button rounded-theme flex items-center justify-center">
|
|
<Icon className="relative z-10 h-4/10 w-auto text-background" strokeWidth={1.25} />
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="absolute inset-px z-10 rounded-full mix-blend-overlay"
|
|
style={{ clipPath: "circle(50%)" }}
|
|
>
|
|
<div
|
|
className="absolute inset-0 z-10 transition-transform duration-500 ease-out group-hover:translate-x-0 group-hover:translate-y-0"
|
|
style={{
|
|
backgroundImage: "linear-gradient(to bottom right, transparent 30%, black, transparent 70%)",
|
|
transform: "translate(-65px, -65px)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
BentoRevealIcon.displayName = "BentoRevealIcon";
|
|
|
|
export default memo(BentoRevealIcon);
|