Anchor

<script setup lang="ts">
  import { Anchor, Heading, Inline, ScrollArea, Section, Text } from '@hina-ui/vue'

  const items = [
    { id: 'basic-a', label: 'Synopsis' },
    { id: 'basic-b', label: 'Characters' },
    { id: 'basic-c', label: 'Staff' },
  ]
</script>

<template>
  <Inline gap="lg" align="start" class="w-full max-w-2xl">
    <ScrollArea class="border-line h-56 flex-1 rounded-lg border">
      <Section v-for="item in items" :id="item.id" :key="item.id" class="min-h-40 p-4">
        <Heading :level="3" size="sm">{{ item.label }}</Heading>
        <Text size="sm" tone="muted">Body text for this section.</Text>
      </Section>
    </ScrollArea>
    <Anchor :items="items" class="w-28 shrink-0" />
  </Inline>
</template>

<script setup lang="ts">
  import { Anchor, Heading, Inline, ScrollArea, Section, Text } from '@hina-ui/vue'

  const items = [
    { id: 'nest-intro', label: 'Overview' },
    {
      id: 'nest-route',
      label: 'Routes',
      children: [
        { id: 'nest-route-a', label: 'Common route' },
        { id: 'nest-route-b', label: 'Character routes' },
      ],
    },
    { id: 'nest-staff', label: 'Staff' },
  ]

  const flat = items.flatMap(item => [item, ...(item.children ?? [])])
</script>

<template>
  <Inline gap="lg" align="start" class="w-full max-w-2xl">
    <ScrollArea class="border-line h-56 flex-1 rounded-lg border">
      <Section v-for="item in flat" :id="item.id" :key="item.id" class="min-h-32 p-4">
        <Heading :level="3" size="sm">{{ item.label }}</Heading>
        <Text size="sm" tone="muted">Body text for this section.</Text>
      </Section>
    </ScrollArea>
    <Anchor :items="items" class="w-32 shrink-0" />
  </Inline>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import {
    Anchor,
    Button,
    Heading,
    Inline,
    ScrollArea,
    Section,
    Stack,
    Tag,
    Text,
  } from '@hina-ui/vue'

  const modified = ref(true)
  const items = computed(() => [
    { id: 'trailing-a', label: 'Entry A', modified: modified.value },
    {
      id: 'trailing-b',
      label: 'Entry B',
      modified: false,
      children: [{ id: 'trailing-c', label: 'Child entry', modified: true }],
    },
  ])
  const sections = computed(() => items.value.flatMap(item => [item, ...(item.children ?? [])]))
</script>

<template>
  <Stack gap="md" class="w-full max-w-2xl">
    <Inline>
      <Button variant="soft" tone="neutral" :aria-pressed="modified" @click="modified = !modified">
        Toggle the mark on entry A
      </Button>
    </Inline>
    <Inline gap="lg" align="start" :wrap="false">
      <ScrollArea class="border-line h-56 min-w-0 flex-1 rounded-lg border">
        <Section v-for="item in sections" :id="item.id" :key="item.id" class="min-h-40 p-4">
          <Heading :level="3" size="sm">{{ item.label }}</Heading>
          <Text size="sm" tone="muted">The content of this section.</Text>
        </Section>
      </ScrollArea>
      <Anchor :items="items" label="Contents with trailing marks" class="w-44 shrink-0">
        <template #trailing="{ item, active }">
          <Tag v-if="item.modified" :tone="active ? 'accent' : 'neutral'">Modified</Tag>
        </template>
      </Anchor>
    </Inline>
  </Stack>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { Anchor, Heading, Inline, ScrollArea, Section, Stack, Switch, Text } from '@hina-ui/vue'

  const topics = [
    'Background',
    'Design process',
    'Implementation',
    'User experience',
    'Conclusions',
  ]
  const items = Array.from({ length: 51 }, (_, index) => ({
    id: `long-toc-${index + 1}`,
    label: `${index + 1}. ${topics[index % topics.length]}`,
  }))
  const autoScroll = ref(true)
  const current = ref<string>()
  const currentLabel = computed(() => items.find(item => item.id === current.value)?.label)
</script>

<template>
  <Stack class="w-full max-w-2xl">
    <Inline justify="between">
      <Switch v-model="autoScroll">Follow current entry</Switch>
      <Text size="sm" tone="muted">51 sections</Text>
    </Inline>
    <Inline align="start" gap="md" :wrap="false">
      <ScrollArea
        class="border-line h-80 min-w-0 flex-1 rounded-lg border"
        focusable
        label="Article content"
      >
        <Section v-for="item in items" :id="item.id" :key="item.id" class="min-h-56 p-4">
          <Heading :level="3" size="sm">{{ item.label }}</Heading>
          <Text size="sm" tone="muted">
            Scroll through the article to keep its current entry visible in the contents. You can
            also browse the contents independently to find another section.
          </Text>
        </Section>
      </ScrollArea>
      <ScrollArea
        class="h-80 w-2/5 max-w-48 shrink-0"
        :shadow="false"
        focusable
        label="Scrollable article contents"
      >
        <Anchor
          :items="items"
          :auto-scroll="autoScroll"
          label="Long article contents"
          @change="current = $event"
        />
      </ScrollArea>
    </Inline>
    <Text size="sm" tone="muted">
      Current: {{ currentLabel ?? 'Article is outside the reading area' }}
    </Text>
  </Stack>
</template>

<script setup lang="ts">
  import { Anchor, Heading, Inline, ScrollArea, Section, Text } from '@hina-ui/vue'

  const items = [
    { id: 'label-a', label: 'Version 1.2' },
    { id: 'label-b', label: 'Version 1.1' },
    { id: 'label-c', label: 'Version 1.0' },
  ]
</script>

<template>
  <Inline gap="lg" align="start" class="w-full max-w-2xl">
    <ScrollArea class="border-line h-56 flex-1 rounded-lg border">
      <Section v-for="item in items" :id="item.id" :key="item.id" class="min-h-40 p-4">
        <Heading :level="3" size="sm">{{ item.label }}</Heading>
        <Text size="sm" tone="muted">What changed in this version.</Text>
      </Section>
    </ScrollArea>
    <Anchor :items="items" label="Version contents" class="w-28 shrink-0" />
  </Inline>
</template>