DaisyUI Button

// Este é um arquivo com uma demonstração do seu componente
// É o que os usuários verão na pré-visualização
// Crie novos arquivos neste diretório para adicionar mais demonstrações
import { ButtonDaisyUI } from "@/components/ui/daisy-ui-button";

// SOMENTE A EXPORTAÇÃO PADRÃO SERÁ TRATADA COMO DEMONSTRAÇÃO
export default function DemoOne() {
  return <div className="flex flex-col gap-4 item-center justify-center">
    <h2 className="text-xl">Button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI>Default</ButtonDaisyUI>     
    </div>

    <h2 className="text-xl">Button sizes</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI size="xs">Xsmall</ButtonDaisyUI>
      <ButtonDaisyUI size="sm">Small</ButtonDaisyUI>
      <ButtonDaisyUI>Medium</ButtonDaisyUI>
      <ButtonDaisyUI size="lg">Large</ButtonDaisyUI>
      <ButtonDaisyUI size="xl">Xlarge</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Responsive button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI size="xl" className="sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl">Responsive</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Buttons colors</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI color="neutral">Neutral</ButtonDaisyUI>
      <ButtonDaisyUI color="primary">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Soft buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="soft">Default</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" variant="soft">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" variant="soft">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" variant="soft">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" variant="soft">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" variant="soft">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" variant="soft">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" variant="soft">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Outline buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="outline">Default</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" variant="outline">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" variant="outline">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" variant="outline">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" variant="outline">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" variant="outline">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" variant="outline">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" variant="outline">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Dash buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="dash">Default</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" variant="dash">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" variant="dash">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" variant="dash">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" variant="dash">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" variant="dash">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" variant="dash">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" variant="dash">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">neutral button with outline or dash style</h2>
    <div className="flex flex-row bg-white gap-4">
      <ButtonDaisyUI color="neutral" variant="outline">Outline</ButtonDaisyUI>
      <ButtonDaisyUI color="neutral" variant="dash">Dash</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Active buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI color="neutral" behavior="active">Neutral</ButtonDaisyUI>
      <ButtonDaisyUI color="primary" behavior="active">Primary</ButtonDaisyUI>
      <ButtonDaisyUI color="secondary" behavior="active">Secondary</ButtonDaisyUI>
      <ButtonDaisyUI color="accent" behavior="active">Accent</ButtonDaisyUI>
      <ButtonDaisyUI color="info" behavior="active">Info</ButtonDaisyUI>
      <ButtonDaisyUI color="success" behavior="active">Success</ButtonDaisyUI>
      <ButtonDaisyUI color="warning" behavior="active">Warning</ButtonDaisyUI>
      <ButtonDaisyUI color="error" behavior="active">Error</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Buttons ghost and button link</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI variant="ghost">Ghost</ButtonDaisyUI>
      <ButtonDaisyUI variant="link">Link</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Wide button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI shape="wide">Wide</ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Buttons with any HTML tags</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI as="a" role="button">Link</ButtonDaisyUI>
      <ButtonDaisyUI type="submit">Button</ButtonDaisyUI>
      <ButtonDaisyUI as="input" type="button" value="Input"/>
      <ButtonDaisyUI as="input" type="submit" value="Submit"/>
      <ButtonDaisyUI as="input" type="radio" aria-label="Radio"/>
      <ButtonDaisyUI as="input" type="checkbox" aria-label="Checkbox"/>
      <ButtonDaisyUI as="input" type="reset" value="Reset"/>
    </div>

    <h2 className="text-xl">Disabled buttons</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI disabled="disabled">
       Disabled using attribute
      </ButtonDaisyUI>
      <ButtonDaisyUI behavior="disabled">
        Disabled using class name
      </ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Square button and circle button</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI shape="square">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
      </ButtonDaisyUI>
      <ButtonDaisyUI shape="circle">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
      </ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Button with Icon</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
        Like
      </ButtonDaisyUI>
      <ButtonDaisyUI>
        Like
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="size-[1.2em]"><path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
      </ButtonDaisyUI>
    </div>

    <h2 className="text-xl">Button block</h2>
    <div className="flex flex-row gap-4">
      <ButtonDaisyUI shape="block">block</ButtonDaisyUI>
    </div>
  </div>;
}