120 lines
3.8 KiB
Vue
120 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, watch } from 'vue'
|
|
import { Paintbrush } from 'lucide-vue-next'
|
|
import PageHeader from '../components/PageHeader.vue'
|
|
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
|
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
|
|
import CustomizerCode from '../components/CustomizerCode.vue'
|
|
import type { Color } from '../types/colors'
|
|
import ThemeCustomizer from '../components/ThemeCustomizer.vue'
|
|
import InlineThemePicker from '../components/InlineThemePicker.vue'
|
|
import PageAction from '../components/PageAction.vue'
|
|
import { useConfigStore } from '@/stores/config'
|
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/lib/registry/new-york/ui/dialog'
|
|
import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
|
|
|
|
// Create an array of color values
|
|
const allColors: Color[] = [
|
|
'zinc',
|
|
'rose',
|
|
'blue',
|
|
'green',
|
|
'orange',
|
|
'red',
|
|
'slate',
|
|
'stone',
|
|
'gray',
|
|
'neutral',
|
|
'yellow',
|
|
'violet',
|
|
]
|
|
|
|
const { theme, radius } = useConfigStore()
|
|
|
|
// Whenever the component is mounted, update the document class list
|
|
onMounted(() => {
|
|
document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
|
|
document.documentElement.classList.add(`theme-${theme.value}`)
|
|
})
|
|
|
|
// Whenever the theme value changes, update the document class list
|
|
watch(theme, (theme) => {
|
|
document.documentElement.classList.remove(
|
|
...allColors.map(color => `theme-${color}`),
|
|
)
|
|
document.documentElement.classList.add(`theme-${theme}`)
|
|
})
|
|
|
|
// Whenever the radius value changes, update the document style
|
|
watch(radius, (radius) => {
|
|
document.documentElement.style.setProperty('--radius', `${radius}rem`)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container relative">
|
|
<PageHeader>
|
|
<PageHeaderHeading class="hidden md:block">
|
|
Add colors. Make it yours.
|
|
</PageHeaderHeading>
|
|
<PageHeaderHeading class="md:hidden">
|
|
Make it yours
|
|
</PageHeaderHeading>
|
|
<PageHeaderDescription>
|
|
Hand-picked themes that you can copy and paste into your apps.
|
|
</PageHeaderDescription>
|
|
|
|
<PageAction>
|
|
<InlineThemePicker class="gap-x-1 me-4 hidden lg:flex" :all-colors="allColors" />
|
|
|
|
<Drawer>
|
|
<DrawerTrigger as-child>
|
|
<Button variant="outline" class="md:hidden h-9 rounded-[0.5rem]">
|
|
<Paintbrush class="w-4 h-4 mr-2" />
|
|
Customize
|
|
</Button>
|
|
</DrawerTrigger>
|
|
<DrawerContent class="p-6 pt-0">
|
|
<ThemeCustomizer :all-colors="allColors" />
|
|
</DrawerContent>
|
|
</Drawer>
|
|
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button variant="outline" class="hidden md:flex h-9 rounded-[0.5rem]">
|
|
<Paintbrush class="w-4 h-4 mr-2" />
|
|
Customize
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent :side-offset="8" align="end" class="w-96">
|
|
<ThemeCustomizer :all-colors="allColors" />
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<Dialog>
|
|
<DialogTrigger as-child>
|
|
<Button class="h-9 ml-2 rounded-[0.5rem]">
|
|
Copy code
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent class="sm:max-w-[625px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Theme</DialogTitle>
|
|
<DialogDescription>
|
|
Copy and paste the following code into your CSS file.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<CustomizerCode />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</PageAction>
|
|
</PageHeader>
|
|
|
|
<section>
|
|
<slot />
|
|
</section>
|
|
</div>
|
|
</template>
|