shadcn-vue/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
zernonia 02fe76d1f0
refactor: replace iconify icons with @radix-icons/vue for newyork style (#87)
* refactor: changes all instance of unplugin-icons to radix-icons

* chore: build registry

* test: fix new deps
2023-09-27 12:26:24 +08:00

44 lines
1.2 KiB
Vue

<script setup lang="ts">
import { ref } from 'vue'
import { CaretSortIcon } from '@radix-icons/vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/lib/registry/new-york/ui/collapsible'
const isOpen = ref(false)
</script>
<template>
<Collapsible
v-model:open="isOpen"
class="w-[350px] space-y-2"
>
<div class="flex items-center justify-between space-x-4 px-4">
<h4 class="text-sm font-semibold">
@peduarte starred 3 repositories
</h4>
<CollapsibleTrigger as-child>
<Button variant="ghost" size="sm" class="w-9 p-0">
<CaretSortIcon class="h-4 w-4" />
<span class="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@radix-ui/primitives
</div>
<CollapsibleContent class="space-y-2">
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@radix-ui/colors
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@stitches/react
</div>
</CollapsibleContent>
</Collapsible>
</template>