61 lines
3.4 KiB
Vue
61 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from '@/registry/new-york/ui/button'
|
|
import { themes } from '@/registry/registry-themes'
|
|
import { useConfigStore } from '@/stores/config'
|
|
import { useClipboard } from '@vueuse/core'
|
|
import CheckIcon from '~icons/radix-icons/check'
|
|
import CopyIcon from '~icons/radix-icons/copy'
|
|
import { computed, ref } from 'vue'
|
|
|
|
const { theme, config } = useConfigStore()
|
|
|
|
const activeTheme = computed(() => themes.find(i => i.name === theme.value))
|
|
|
|
const { copy, copied } = useClipboard()
|
|
|
|
const codeRef = ref<HTMLElement>()
|
|
async function copyCode() {
|
|
await copy(codeRef.value?.textContent?.replace(/\u00A0/g, ' ') ?? '')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<pre class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 !py-0 dark:bg-zinc-900">
|
|
<code ref="codeRef" class="relative block rounded font-mono text-sm">
|
|
<span class="line text-white">@layer base {</span>
|
|
<span class="line text-white">:root {</span>
|
|
<span class="line text-white"> --background: {{ activeTheme?.cssVars?.light?.background }};</span>
|
|
<span class="line text-white"> --foreground: {{ activeTheme?.cssVars?.light?.foreground }};</span>
|
|
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
|
|
<span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars?.light?.[prefix] }};</span>
|
|
<span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars?.light?.[ `${prefix}-foreground`] }};</span>
|
|
</template>
|
|
<span class="line text-white"> --border:{{ activeTheme?.cssVars?.light?.border }};</span>
|
|
<span class="line text-white"> --input:{{ activeTheme?.cssVars?.light?.input }};</span>
|
|
<span class="line text-white"> --ring:{{ activeTheme?.cssVars?.light?.ring }};</span>
|
|
<span class="line text-white"> --radius: {{ config.radius }}rem;</span>
|
|
<span class="line text-white">}</span>
|
|
<span class="line text-white"> </span>
|
|
<span class="line text-white">.dark {</span>
|
|
<span class="line text-white"> --background:{{ activeTheme?.cssVars?.dark?.background }};</span>
|
|
<span class="line text-white"> --foreground:{{ activeTheme?.cssVars?.dark?.foreground }};</span>
|
|
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
|
|
<span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars?.dark?.[ prefix] }};</span>
|
|
<span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars?.dark?.[ `${prefix}-foreground`] }};</span>
|
|
</template>
|
|
<span class="line text-white"> --border:{{ activeTheme?.cssVars?.dark?.border }};</span>
|
|
<span class="line text-white"> --input:{{ activeTheme?.cssVars?.dark?.input }};</span>
|
|
<span class="line text-white"> --ring:{{ activeTheme?.cssVars?.dark?.ring }};</span>
|
|
<span class="line text-white">}</span>
|
|
<span class="line text-white">}</span>
|
|
</code>
|
|
</pre>
|
|
<Button size="sm" class="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" @click="copyCode">
|
|
<CheckIcon v-if="copied" class="mr-2 h-4 w-4" />
|
|
<CopyIcon v-else class="mr-2 h-4 w-4" />
|
|
{{ copied ? 'Copied' : 'Copy' }}
|
|
</Button>
|
|
</div>
|
|
</template>
|