shadcn-vue/apps/www/registry/new-york/example/CardWithForm.vue
2024-11-21 11:52:31 +08:00

68 lines
1.9 KiB
Vue

<script setup lang="ts">
import { Button } from '@/lib/registry/new-york/ui/button'
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/lib/registry/new-york/ui/card'
import { Input } from '@/lib/registry/new-york/ui/input'
import { Label } from '@/lib/registry/new-york/ui/label'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/lib/registry/new-york/ui/select'
</script>
<template>
<Card class="w-[350px]">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one-click.</CardDescription>
</CardHeader>
<CardContent>
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<Label for="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
<div class="flex flex-col space-y-1.5">
<Label for="framework">Framework</Label>
<Select>
<SelectTrigger id="framework">
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent position="popper">
<SelectItem value="next">
Next.js
</SelectItem>
<SelectItem value="sveltekit">
SvelteKit
</SelectItem>
<SelectItem value="astro">
Astro
</SelectItem>
<SelectItem value="nuxt">
Nuxt
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</form>
</CardContent>
<CardFooter class="flex justify-between">
<Button variant="outline">
Cancel
</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>
</template>