<template>
  <div class="docs-example grid grid-cols-4 gap-8">
    <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 "@/components/badge/AisBadge.vue";
import Example from "@/components/docs/ComponentExample.vue";
import AisIcon from "@/components/icon/AisIcon.vue";

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

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