46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
type GridSize = "small" | "medium" | "large";
|
|
|
|
interface GridBackroundProps {
|
|
size?: GridSize;
|
|
className?: string;
|
|
perspectiveThreeD?: boolean;
|
|
}
|
|
|
|
const GRID_SIZES: Record<GridSize, string> = {
|
|
small: "6.25vw 6.25vw",
|
|
medium: "10vw 10vw",
|
|
large: "20vw 20vw",
|
|
};
|
|
|
|
const GridBackround = ({
|
|
size = "medium",
|
|
className = "",
|
|
perspectiveThreeD = false
|
|
}: GridBackroundProps) => {
|
|
return (
|
|
<div
|
|
className={cls(
|
|
"fixed inset-0 -z-10 bg-background [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
|
|
perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
|
|
className
|
|
)}
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, color-mix(in srgb, var(--background-accent) 10%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--background-accent) 10%, transparent) 1px, transparent 1px)",
|
|
backgroundSize: GRID_SIZES[size],
|
|
backgroundRepeat: "repeat",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
};
|
|
|
|
GridBackround.displayName = "GridBackround";
|
|
|
|
export default memo(GridBackround);
|