npmx.dev/app/components/ViewModeToggle.vue at f5d6c9dd503c94b3b89ad34f652fcfdf1d66c5b3 · alexdln/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script setup lang="ts">
import type { ViewMode } from '#shared/types/preferences'

const viewMode = defineModel<ViewMode>({ default: 'cards' })
</script>

<template>
  <div
    class="flex rounded-md border border-border p-0.5 bg-bg-muted"
    role="group"
    :aria-label="$t('filters.view_mode.label')"
  >
    <button
      type="button"
      class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
      :class="
        viewMode === 'cards'
          ? 'bg-bg-subtle text-fg border-fg-subtle'
          : 'text-fg-muted hover:text-fg border-transparent'
      "
      :aria-pressed="viewMode === 'cards'"
      :aria-label="$t('filters.view_mode.cards')"
      @click="viewMode = 'cards'"
    >
      <span class="block i-lucide:rows-2 w-4 h-4" aria-hidden="true" />
      <span class="sr-only">{{ $t('filters.view_mode.cards') }}</span>
    </button>
    <button
      type="button"
      class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
      :class="
        viewMode === 'table'
          ? 'bg-bg-subtle  text-fg border-fg-subtle'
          : 'text-fg-muted hover:text-fg border-transparent'
      "
      :aria-pressed="viewMode === 'table'"
      :aria-label="$t('filters.view_mode.table')"
      @click="viewMode = 'table'"
    >
      <span class="block i-lucide:table w-4 h-4" aria-hidden="true" />
      <span class="sr-only">{{ $t('filters.view_mode.table') }}</span>
    </button>
  </div>
</template>