davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2import type { ViewMode } from '#shared/types/preferences'
3
4const viewMode = defineModel<ViewMode>({ default: 'cards' })
5</script>
6
7<template>
8 <div
9 class="inline-flex rounded-md border border-border p-0.5 bg-bg-subtle"
10 role="group"
11 :aria-label="$t('filters.view_mode.label')"
12 >
13 <button
14 type="button"
15 class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
16 :class="viewMode === 'cards' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
17 :aria-pressed="viewMode === 'cards'"
18 :aria-label="$t('filters.view_mode.cards')"
19 @click="viewMode = 'cards'"
20 >
21 <span class="i-lucide:rows-2 w-4 h-4" aria-hidden="true" />
22 <span class="sr-only">{{ $t('filters.view_mode.cards') }}</span>
23 </button>
24 <button
25 type="button"
26 class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
27 :class="viewMode === 'table' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
28 :aria-pressed="viewMode === 'table'"
29 :aria-label="$t('filters.view_mode.table')"
30 @click="viewMode = 'table'"
31 >
32 <span class="i-lucide:table w-4 h-4" aria-hidden="true" />
33 <span class="sr-only">{{ $t('filters.view_mode.table') }}</span>
34 </button>
35 </div>
36</template>