nicholais-website/app/components/dotbackground.tsx

22 lines
709 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:28px_28px]",
"[background-image:radial-gradient(var(--dot-color)_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 [mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]"></div>
</div>
)
}