631ffb81d5
* chore: add dev:nuxt script * chore(module): add `.npmrc` to playground * chore: bump 'nuxtjs/tailwindcss' and add it to modules * chore: add schema to components.json * chore: bump playground deps * fix: add missing tailwind.css by the cli * chore: bump tailwind config * chore(playground): bump Button component * chore: add comments * refactor: simplify components registration * chore(module): bump deps * chore(module): remove `oxc-parser` * chore: dedupe * feat(module): auto generate `lib/utils` * feat(module): refresh playground style and dark mode * chore: revert components registration and link the comment * chore: readd oxc-parser * chore: bump vitest
39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { MoonIcon, SunIcon } from '@radix-icons/vue'
|
|
|
|
const isDark = ref(true)
|
|
useHead({ htmlAttrs: { class: () => isDark.value ? 'dark' : '' } })
|
|
</script>
|
|
|
|
<template>
|
|
<main class="flex flex-col min-h-dvh">
|
|
<header class="border-b py-1 ">
|
|
<div class="container flex justify-between items-center ">
|
|
<h1 class="font-medium">
|
|
shadcn-vue Playground
|
|
</h1>
|
|
|
|
<ClientOnly>
|
|
<button
|
|
class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded-md"
|
|
aria-label="Toggle dark mode"
|
|
@click="isDark = !isDark"
|
|
>
|
|
<component
|
|
:is="isDark ? SunIcon : MoonIcon"
|
|
class="size-5"
|
|
/>
|
|
</button>
|
|
</ClientOnly>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Try your components here -->
|
|
<section class="container grow my-4 p-4 rounded-md border grid place-content-center">
|
|
<UiButton variant="destructive">
|
|
Hi
|
|
</UiButton>
|
|
</section>
|
|
</main>
|
|
</template>
|