Color Palette

// demo.tsx
import { BrandingCard } from "@/components/ui/color-palette"; // Adjust the import path

const BrandingCardDemo = () => {
  const brandColors = ["#2A2A2A", "#5D4435", "#A5B592", "#F0F0E6"];

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-10">
      <BrandingCard
        category="Branding"
        title="Typography"
        subtitle="SF Pro"
        displayElement={
          <span>
            Aa<span className="text-muted-foreground/50">Bb</span>
          </span>
        }
        colors={brandColors}
      />
    </div>
  );
};

export default BrandingCardDemo;