AisBadge #

<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="Primary">
        <AisBadge variant="primary">Badge</AisBadge>
      </Example>
      <Example label="Secondary">
        <AisBadge variant="secondary">Badge</AisBadge>
      </Example>
      <Example label="Default">
        <AisBadge variant="default">Badge</AisBadge>
      </Example>
      <Example label="Plain">
        <AisBadge variant="plain">Badge</AisBadge>
      </Example>
    </div>
    <div class="flex items-center space-x-4">
      <Example label="Info">
        <AisBadge variant="info">Badge</AisBadge>
      </Example>
      <Example label="Success">
        <AisBadge variant="success">Badge</AisBadge>
      </Example>
      <Example label="Warning">
        <AisBadge variant="warning">Badge</AisBadge>
      </Example>
      <Example label="Danger">
        <AisBadge variant="danger">Badge</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
</script>

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
import { variants } from "@/util/variants-util";
import { capitalizeFirst } from "@/util/util";
</script>

<template>
  <div class="grid grid-cols-3 md:grid-cols-4 gap-x-4  gap-y-8">
    <Example v-for="variant in variants" :label="capitalizeFirst(variant)">
      <AisBadge :variant="variant" outline
                 hover fast press
      >
        Outline
      </AisBadge>
    </Example>
  </div>
</template>

<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="xl">
        <AisBadge size="xl">X-Large</AisBadge>
      </Example>
      <Example label="lg">
        <AisBadge size="lg">Large</AisBadge>
      </Example>
      <Example label="md">
        <AisBadge size="md">Medium</AisBadge>
      </Example>
      <Example label="sm">
        <AisBadge size="sm">Small</AisBadge>
      </Example>
      <Example label="xs">
        <AisBadge size="xs">X-Small</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
</script>

<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="sans">
        <AisBadge font="sans" size="lg">Sans</AisBadge>
      </Example>
      <Example label="serif">
        <AisBadge font="serif" size="lg">Serif</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import Example from "@/components/docs/ComponentExample.vue";
import { AisBadge } from "@ais-public/ais-components";
</script>

<template>
  <div class="docs-example flex flex-wrap gap-4">
    <Example label="Locked">
      <AisBadge variant="secondary">
        <span>Locked</span>
        <AisIcon :icon="faLock" />
      </AisBadge>
    </Example>
    <Example label="Unlocked">
      <AisBadge variant="secondary">
        <span>Unlocked</span>
        <AisIcon :icon="faUnlock" />
      </AisBadge>
    </Example>
  </div>
</template>

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
import { AisIcon } from "@ais-public/ais-components";

import { faLock, faUnlock } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(faLock, faUnlock);
</script>