Badge

import { Badge } from "@/components/ui/badge";

export default function BadgeVariants() {
  return (
    <>
      <Badge>New</Badge>
      <Badge variant="secondary">Draft</Badge>
      <Badge variant="tinted">2 spots left</Badge>
      <Badge variant="neutral">Video ads</Badge>
      <Badge variant="outline">In review</Badge>
    </>
  );
}

import { ChevronRightIcon } from "lucide-react";
import { Image } from "@/components/media/image";

import { Badge } from "@/components/ui/badge";
import { siteConfig } from "@/config/site";

export default function BadgeIconLink() {
  return (
    <Badge asChild variant="neutral" size="lg">
      <a href={siteConfig.whatsapp.href} target="_blank" rel="noopener noreferrer">
        <Image
          src={siteConfig.whatsapp.icon}
          alt=""
          width={96}
          height={96}
          data-icon="inline-start"
        />
        Message on WhatsApp
        <ChevronRightIcon aria-hidden data-icon="inline-end" className="text-label-secondary" />
      </a>
    </Badge>
  );
}