Scroll Text

<template>
  <PStack direction="vertical">
    <div class="w-48 rounded-md border p-2">
      <PScrollText text="A short label" />
    </div>

    <div class="w-48 rounded-md border p-2">
      <PScrollText text="This is a very long sidebar label that will scroll when you hover it" />
    </div>
  </PStack>
</template>

<template>
  <div class="w-52 rounded-lg border p-1">
    <PScrollText
      v-for="item in items"
      :key="item"
      as="button"
      :text="item"
      class="flex w-full items-center rounded-sm px-2 py-1.5 text-left text-sm hover:bg-gray-100"
    />
  </div>
</template>

<script setup>
const items = [
  'Inbox',
  'Projects / Design System / Tokens / Color Palette Review',
  'Settings',
  'Documentation / Components / ScrollText / Hover Overflow Behavior',
]
</script>

<template>
  <PStack direction="vertical" class="w-56">
    <PScrollText
      :speed="24"
      text="Slow scroll for long sidebar titles that need careful reading"
    />
    <PScrollText
      :speed="80"
      text="Faster scroll when you just need to glance the full path"
    />
  </PStack>
</template>