nicholais-website/app/components/dotbackground.tsx

21 lines
755 B
TypeScript

import { cn } from "@/lib/utils"
export function DotBackground({ className }: { className?: string }) {
return (
<div className={cn(
"fixed inset-0 -z-10",
className
)}>
<div
className={cn(
"absolute inset-0",
"[background-size:20px_20px]",
"[background-image:radial-gradient(#d4d4d4_1px,transparent_1px)]",
"dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]",
)}
/>
{/* Radial gradient for the container to give a faded look */}
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
</div>
)
}