<script lang="ts" setup>

const initState = () => ({
  crumbs: [
    {
      label: 'Главная',
      to: '/'
    },
    {
      label: 'Каталог',
      to: '/'
    },
    {
      label: 'Классификатор ОКЕД',
    }
  ],
})
</script>

<template>
  <Story
    :layout="{
      type: 'grid',
      width: 400,
      height: 300
    }"
    title="Elements/Breadcrumbs"
  >
    <Variant :init-state="initState" title="ABreadcrumbs">
      <template #default="{ state }">
        <div class="flex flex-col gap-4">
          <a-breadcrumbs :links="state.crumbs" />
          <p>
            Has default arrow icon. <br />Works on
            <code class="text-green-500 dark:text-green-400">nuxt-link</code>
          </p>
        </div>
      </template>

      <template #controls="{ state }">
        <HstText v-model="state.textClasses" label="Text Classes" />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
