Skeleton

<script setup lang="ts">
import { Card, Skeleton } from '@typlog/ui'
</script>

<template>
  <Card class="w-full max-w-md">
    <div class="flex items-center gap-3">
      <Skeleton
        class="size-10 shrink-0"
        radius="full"
      />
      <div class="min-w-0 flex-1 space-y-2">
        <Skeleton class="h-4 w-2/5" />
        <Skeleton class="h-3 w-4/5" radius="small" />
      </div>
    </div>
    <div class="mt-5 space-y-2">
      <Skeleton class="h-3 w-full" />
      <Skeleton class="h-3 w-11/12" />
      <Skeleton class="h-3 w-3/5" />
    </div>
  </Card>
</template>

<script setup lang="ts">
import { Skeleton } from '@typlog/ui'

const radii = ['none', 'small', 'medium', 'large', 'full'] as const
</script>

<template>
  <div class="grid grid-cols-2 gap-4 sm:grid-cols-5">
    <div
      v-for="radius in radii"
      :key="radius"
      class="flex min-w-0 flex-col items-center gap-2"
    >
      <Skeleton
        :radius="radius"
        class="h-8 w-full"
      />
      <span class="text-sm text-gray-11">{{ radius }}</span>
    </div>
  </div>
</template>