Interactive luminous tier badge pills with radiant curved glow accents
"use client";
import React, { useState } from "react";
import { TierBadge, type BadgeTier } from "@/components/ui/tier-badge";
export default function Demo() {
const [selectedTier, setSelectedTier] = useState<BadgeTier>("ultra");
const tiers: BadgeTier[] = ["free", "pro", "ultra"];
return (
<div className="flex min-h-[420px] w-full flex-col items-center justify-center bg-slate-50 dark:bg-[#07090d] p-8 transition-colors">
{/* Badges in a single horizontal row */}
<div className="flex flex-row flex-wrap items-center justify-center gap-6 sm:gap-8">
{tiers.map((tier) => (
<TierBadge
key={tier}
tier={tier}
size="md"
isActive={selectedTier === tier}
onClick={() => setSelectedTier(tier)}
/>
))}
</div>
</div>
);
}