Dotted Glow Background

"use client";
import React from "react";
import { DottedGlowBackground } from "@/lab/aceternity/ui/dotted-glow-background";
import { Fit } from "./_fit";

export default function DottedGlowBackgroundDemo() {
  return (
    <Fit width={460} height={460} max={1.4}>
      <div className="flex h-full w-full items-center justify-center">
        <div className="relative flex size-100 items-end justify-end overflow-hidden rounded-md rounded-tl-3xl rounded-br-3xl rounded-bl-3xl border border-transparent px-4 shadow ring-1 shadow-black/10 ring-black/5 dark:shadow-white/10 dark:ring-white/5">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="https://assets.aceternity.com/logos/calcom.png"
            alt="Cal.com logo"
            className="absolute inset-0 z-20 m-auto size-20 dark:invert dark:filter"
          />
          <div className="relative z-20 flex w-full justify-between px-4 py-3 backdrop-blur-[2px]">
            <p className="text-sm font-normal text-neutral-600 dark:text-neutral-400">
              The modern call scheduling app
            </p>
            <p className="text-sm font-normal text-neutral-600 dark:text-neutral-400">&rarr;</p>
          </div>
          <DottedGlowBackground
            className="pointer-events-none mask-radial-to-90% mask-radial-at-center"
            opacity={1}
            gap={10}
            radius={1.6}
            colorLightVar="--color-neutral-500"
            glowColorLightVar="--color-neutral-600"
            colorDarkVar="--color-neutral-500"
            glowColorDarkVar="--color-sky-800"
            backgroundOpacity={0}
            speedMin={0.3}
            speedMax={1.6}
            speedScale={1}
          />
        </div>
      </div>
    </Fit>
  );
}