d5bb3a8a7a
* docs: improve the installation section for each component * docs: improve the installation section for each component --------- Co-authored-by: Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/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.js
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
<CardFooter class="flex justify-between">
|
|
<Button variant="outline">
|
|
Cancel
|
|
</Button>
|
|
<Button>Deploy</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</template>
|