46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
type GridSize = "small" | "medium" | "large";
|
|
|
|
interface DotGridBackgroundProps {
|
|
size?: GridSize;
|
|
className?: string;
|
|
perspectiveThreeD?: boolean;
|
|
}
|
|
|
|
const GRID_SIZES: Record<GridSize, string> = {
|
|
small: "1vw 1vw",
|
|
medium: "2vw 2vw",
|
|
large: "4vw 4vw",
|
|
};
|
|
|
|
const DotGridBackground = ({
|
|
size = "medium",
|
|
className = "",
|
|
perspectiveThreeD = false
|
|
}: DotGridBackgroundProps) => {
|
|
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:
|
|
"radial-gradient(circle, color-mix(in srgb, var(--background-accent) 30%, transparent) 1px, transparent 1px)",
|
|
backgroundSize: GRID_SIZES[size],
|
|
backgroundRepeat: "repeat",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
};
|
|
|
|
DotGridBackground.displayName = "DotGridBackground";
|
|
|
|
export default memo(DotGridBackground);
|