Blob Card

1"use client";
2 
3import * as React from "react";
4import { FluidBlobs } from "@/components/ui/FluidBlobs";
5import { GlowEffect } from "@/components/ui/glow-effect";
6import { cn } from "@/lib/utils";
7 
8export interface BlobCardProps {
9  header?: React.ReactNode;
10  children?: React.ReactNode;
11  headerHeight?: number;
12  lightColors?: string[];
13  darkColors?: string[];
14  glowColors?: string[];
15  className?: string;
16}
17 
18const DEFAULT_LIGHT = ["#ff0020", "#fc0f60", "#e8227a", "#ff85b3"];
19const DEFAULT_DARK = ["#8c0f60", "#e8227a", "#e8227a", "#ff85b3"];
20const DEFAULT_GLOW = ["#ff96a9", "#e8b4f0", "#ffb3c6", "#d44d8a", "#ff96a9"];
21 
22export function BlobCard({
23  header,
24  children,
25  headerHeight = 224,
26  lightColors = DEFAULT_LIGHT,
27  darkColors = DEFAULT_DARK,
28  glowColors = DEFAULT_GLOW,
29  className,
30}: BlobCardProps) {
31  return (
32    <div className={cn("relative w-full", className)}>
33      <div className="absolute -inset-[1.5px] rounded-[21.5px] overflow-hidden z-0">
34        <GlowEffect
35          colors={glowColors}
36          mode="rotate"
37          blur="strongest"
38          duration={5}
39          scale={1}
40        />
41      </div>
42 
43      <div className="relative z-10 rounded-[20px] overflow-hidden bg-background">
44        <div
45          className="relative overflow-hidden rounded-t-[20px]"
46          style={{ height: headerHeight }}
47        >
48          <FluidBlobs
49            lightColors={lightColors}
50            darkColors={darkColors}
51            origins={[
52              { x: 50, y: -55 },
53              { x: 50, y: -25 },
54              { x: 50, y: -25 },
55              { x: 50, y: -25 },
56            ]}
57            margin={60}
58            blur={50}
59          />
60          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background pointer-events-none" />
61          {header && <div className="relative z-10 p-8 pb-0">{header}</div>}
62        </div>
63 
64        {children && <div>{children}</div>}
65      </div>
66    </div>
67  );
68}