Backgrounds

1"use client";
2import React from "react";
3import { cn } from "@falnix/ui";
4
5export const GridBackground = ({
6  children,
7  className,
8}: {
9  children?: React.ReactNode;
10  className?: string;
11}) => {
12  return (
13    <div
14      className={cn(
15        "h-full w-full dark:bg-black bg-white  dark:bg-grid-white/20 bg-grid-black/20 relative flex items-center justify-center",
16        className
17      )}
18    >
19      {/* Radial gradient for the container to give a faded look */}
20      <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
21      {children}
22    </div>
23  );
24};
25
26export const DotBackground = ({
27  children,
28  className,
29}: {
30  children?: React.ReactNode;
31  className?: string;
32}) => {
33  return (
34    <div
35      className={cn(
36        "h-full w-full dark:bg-black bg-white  dark:bg-dot-white/20 bg-dot-black/20 relative flex items-center justify-center",
37        className
38      )}
39    >
40      <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white mask-[radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
41      {children}
42    </div>
43  );
44};