DaisyUI Badge

import { BadgeDaisyUI } from "@/components/ui/daisy-ui-badge";

export default function DemoOne() {
  return <div className="flex flex-col gap-4">
    <h2 className="text-xl">Badge</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI>Badge</BadgeDaisyUI >
    </div>
    
    <h2 className="text-xl">Badge sizes</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" size="xs">Xsmall</BadgeDaisyUI>
      <BadgeDaisyUI as="div" size="sm">Small</BadgeDaisyUI>
      <BadgeDaisyUI as="div">Medium</BadgeDaisyUI>
      <BadgeDaisyUI as="div" size="lg">Large</BadgeDaisyUI>
      <BadgeDaisyUI as="div" size="xl">Xlarge</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with colors</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="neutral">Neutral</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with soft style</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="soft" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="soft" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with outline style</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="outline" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="outline" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with dash style</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="dash" color="primary">Primary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="secondary">Secondary</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="accent">Accent</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="info">Info</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="success">Success</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="warning">Warning</BadgeDaisyUI>
      <BadgeDaisyUI as="div" variant="dash" color="error">Error</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">neutral badge with outline or dash style</h2>
    These badges use dark text, only use them on light backgrounds
    <div className="flex gap-2">
      <div className="bg-white p-6">
        <BadgeDaisyUI as="div" color="neutral" variant="outline">Outline</BadgeDaisyUI>
        <BadgeDaisyUI as="div" color="neutral" variant="dash">Dash</BadgeDaisyUI>
      </div>
    </div>

    <h2 className="text-xl">Badge ghost</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" variant="ghost">ghost</BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Empty badge</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" color="primary" size="xl"></BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="primary" size="md"></BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="primary" size="sm"></BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="primary" size="xs"></BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge with icon</h2>
    <div className="flex gap-2">
      <BadgeDaisyUI as="div" color="info">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" strokeLinejoin="miter" strokeLinecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></circle><path d="m12,17v-5.5c0-.276-.224-.5-.5-.5h-1.5" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></path><circle cx="12" cy="7.25" r="1.25" fill="currentColor" strokeWidth="2"></circle></g></svg>
        Info
      </BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="success">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" strokeLinejoin="miter" strokeLinecap="butt"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></circle><polyline points="7 13 10 16 17 8" fill="none" stroke="currentColor" strokeLinecap="square" stroke-miterlimit="10" strokeWidth="2"></polyline></g></svg>
        Success
      </BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="warning">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><g fill="currentColor"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"></path><line x1="9" y1="6.5" x2="9" y2="10" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-stroke="none" stroke="none"></path></g></svg>
        Warning
      </BadgeDaisyUI>
      <BadgeDaisyUI as="div" color="error">
        <svg className="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor"><rect x="1.972" y="11" width="20.056" height="2" transform="translate(-4.971 12) rotate(-45)" fill="currentColor" strokeWidth={0}></rect><path d="m12,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm0-20C7.038,3,3,7.037,3,12s4.038,9,9,9,9-4.037,9-9S16.962,3,12,3Z" strokeWidth={0} fill="currentColor"></path></g></svg>
        Error
      </BadgeDaisyUI>
    </div>

    <h2 className="text-xl">Badge in a text</h2>
    <div className="flex flex-col gap-2">
      <h1 className="text-xl font-semibold">
        Heading 1 <BadgeDaisyUI size="xl">Badge</BadgeDaisyUI >
      </h1>

      <h2 className="text-lg font-semibold">
        Heading 2 <BadgeDaisyUI  size="lg">Badge</BadgeDaisyUI >
      </h2>

      <h3 className="text-base font-semibold">
        Heading 3 <BadgeDaisyUI  size="md">Badge</BadgeDaisyUI >
      </h3>

      <h4 className="text-sm font-semibold">
        Heading 4 <BadgeDaisyUI  size="sm">Badge</BadgeDaisyUI >
      </h4>

      <h5 className="text-xs font-semibold">
        Heading 5 <BadgeDaisyUI  size="xs">Badge</BadgeDaisyUI >
      </h5>

      <p className="text-xs">
        Paragraph <BadgeDaisyUI  size="xs">Badge</BadgeDaisyUI >
      </p>
    </div>

    <h2 className="text-xl">Badge in a button</h2>
    <div className="flex gap-2">
      <button className="btn">
        Inbox <BadgeDaisyUI as="div" size="sm">+99</BadgeDaisyUI>
      </button>

      <button className="btn">
        Inbox <BadgeDaisyUI as="div" size="sm" color="secondary">+99</BadgeDaisyUI>
      </button>
    </div>
  </div>;
}