gradient-heading

1"use client"
2 
3import * as React from "react"
4 
5import { GradientHeading, Size, Variant, Weight } from "../ui/gradient-heading"
6 
7export function GradientHeadingDemo() {
8  const variants: Variant[] = ["default", "pink", "light"]
9  const sizes: Size[] = ["lg", "xl", "xxl", "xxxl"]
10  const weights: Weight[] = ["thin", "base", "semi", "bold", "black"]
11 
12  return (
13    <div className="space-y-8 p-4">
14      {variants.map((variant) => (
15        <div key={variant}>
16          <h2 className="text-xl font-semibold mb-4">Variant: {variant}</h2>
17          {sizes.map((size) => (
18            <div key={size} className="mb-2">
19              {weights.map((weight) => (
20                <GradientHeading
21                  key={`${variant}-${size}-${weight}`}
22                  variant={variant}
23                  size={size}
24                  weight={weight}
25                  className="mb-2"
26                >
27                  {`Heading - ${size}`}
28                </GradientHeading>
29              ))}
30            </div>
31          ))}
32        </div>
33      ))}
34    </div>
35  )
36}