Timeline

<script setup lang="ts">
import { Timeline } from "@bysages/vue";
</script>

<template>
  <Timeline.Root>
    <Timeline.Item>
      <Timeline.Marker />
      <Timeline.Content>
        <strong>Sketch</strong> — the first brush line settles on the paper.
      </Timeline.Content>
    </Timeline.Item>
    <Timeline.Item>
      <Timeline.Marker />
      <Timeline.Content>
        <strong>Ink</strong> — the strokes deepen and the hierarchy appears.
      </Timeline.Content>
    </Timeline.Item>
    <Timeline.Item>
      <Timeline.Marker />
      <Timeline.Content>
        <strong>Seal</strong> — the red stamp closes the finished work.
      </Timeline.Content>
    </Timeline.Item>
  </Timeline.Root>
</template>

<script setup lang="ts">
import { Timeline } from "@bysages/vue";

const moments = [
  { title: "Ground", note: "The stone is squared" },
  { title: "Ink", note: "The pigment meets the water" },
  { title: "Stroke", note: "The hand commits" },
  { title: "Seal", note: "The name closes the work" },
];
</script>

<template>
  <Timeline.Root orientation="horizontal" class="w-full">
    <Timeline.Item v-for="m in moments" :key="m.title">
      <Timeline.Marker />
      <Timeline.Content>
        <div class="text-sm font-medium">{{ m.title }}</div>
        <div class="mt-1 text-xs text-tertiary">{{ m.note }}</div>
      </Timeline.Content>
    </Timeline.Item>
  </Timeline.Root>
</template>