"use client";

import GlowArea from "@/components/showcase/glow-area/glow-area";
import { DotPattern } from "@/components/ui/dot-pattern";
import { cn } from "@/lib/utils";

type CardProps = {
  title: string;
  description: string;
};

const Card = ({ title, description }: CardProps) => {
  return (
    <div className="h-full w-[300px] min-h-[300px] bg-background border rounded-xl p-6">
      <div className="relative  h-[300px]">
        <DotPattern
          width={20}
          height={20}
          cx={1}
          cy={1}
          cr={1}
          className={cn(
            "[mask-image:linear-gradient(to_top_left,white,transparent,transparent)]"
          )}
        />
        <h2 className="text-lg font-semibold">{title}</h2>
        <p className="text-muted-foreground">{description}</p>
      </div>
    </div>
  );
};

export default function Glow_Ex_01() {
  return (
    <GlowArea
      className="gap-5 flex items-center justify-center p-24 "
      showcaseMode
    >
      <GlowArea.Element color="var(--color-purple-800)" className="rounded-xl">
        <Card
          title="Hover this card."
          description="When you move your mouse, the glow will follow it around."
        />
      </GlowArea.Element>
      <GlowArea.Element color="var(--color-teal-800)" className="rounded-xl">
        <Card
          title="See? It's so easy!"
          description="Just wrap any element with GlowArea.Element"
        />
      </GlowArea.Element>
    </GlowArea>
  );
}

"use client";

import GlowArea from "@/components/showcase/glow-area/glow-area";
import { DotPattern } from "@/components/ui/dot-pattern";
import { cn } from "@/lib/utils";

type CardProps = {
  title: string;
  description: string;
};

const Card = ({ title, description }: CardProps) => {
  return (
    <div className="h-full w-[300px] min-h-[300px] bg-background border rounded-xl p-6">
      <div className="relative  h-[300px]">
        <DotPattern
          width={20}
          height={20}
          cx={1}
          cy={1}
          cr={1}
          className={cn(
            "[mask-image:linear-gradient(to_top_left,white,transparent,transparent)]"
          )}
        />
        <h2 className="text-lg font-semibold">{title}</h2>
        <p className="text-muted-foreground">{description}</p>
      </div>
    </div>
  );
};

export default function Glow_Ex_01() {
  return (
    <GlowArea
      className="gap-5 flex items-center justify-center p-24 "
      showcaseMode
    >
      <GlowArea.Element color="var(--color-purple-800)" className="rounded-xl">
        <Card
          title="Hover this card."
          description="When you move your mouse, the glow will follow it around."
        />
      </GlowArea.Element>
      <GlowArea.Element color="var(--color-teal-800)" className="rounded-xl">
        <Card
          title="See? It's so easy!"
          description="Just wrap any element with GlowArea.Element"
        />
      </GlowArea.Element>
    </GlowArea>
  );
}

Glow Area