<script setup lang="ts">
import { Button as ShadcnButton } from '@/shadcn/components/ui/button';
import { Input as ShaInput } from '@/shadcn/components/ui/input';
</script>

<template>
  <div class="flex flex-col items-start justify-center gap-4 bg-white p-4 dark:bg-gray-900">
    <div class="demo-block">
      <div class="demo-block">
        <a-button type="primary">Primary Button</a-button>
        <a-button>Default Button</a-button>
        <a-button type="dashed">Dashed Button</a-button>
        <a-button type="text">Text Button</a-button>
        <a-button type="link">Link Button</a-button>
      </div>
      <div class="demo-block">
        <Button label="PrimevueButton" />
        <Button variant="outlined" label="Outlined" />
        <Button variant="text" label="Text" />
        <Button variant="link" label="Link" />
      </div>
      <div class="demo-block">
        <ShadcnButton>ShadcnButton</ShadcnButton>
        <ShadcnButton variant="secondary">Secondary</ShadcnButton>
        <ShadcnButton variant="destructive">Destructive</ShadcnButton>
        <ShadcnButton variant="outline">Outline</ShadcnButton>
        <ShadcnButton variant="ghost">Ghost</ShadcnButton>
        <ShadcnButton variant="link">Link</ShadcnButton>
      </div>
    </div>
    <div class="demo-block">
      <a-input placeholder="Ant Design" />
      <InputText placeholder="Primevue" />
      <ShaInput placeholder="Shadcn" />
    </div>
  </div>
</template>

<style scoped>
.demo-block {
  @apply flex flex-wrap gap-4 b b-solid b-red-500 p-4 dark:bg-gray-800;
}
</style>
