feat: add cards examples
This commit is contained in:
zernonia
parent
ec68d03463
commit
6d86b25ff0
5
apps/www/src/content/examples/cards.md
Normal file
5
apps/www/src/content/examples/cards.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script setup>
|
||||
import Cards from "@/examples/cards/Example.vue"
|
||||
</script>
|
||||
|
||||
<Cards />
|
||||
66
apps/www/src/examples/cards/Example.vue
Normal file
66
apps/www/src/examples/cards/Example.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<script setup lang="ts">
|
||||
import Container from './components/Container.vue'
|
||||
import CookieSettings from './components/CookieSettings.vue'
|
||||
import CreateAccount from './components/CreateAccount.vue'
|
||||
import DatePicker from './components/DatePicker.vue'
|
||||
import GitHubCard from './components/GitHubCard.vue'
|
||||
import Notifications from './components/Notifications.vue'
|
||||
import PaymentMethod from './components/PaymentMethod.vue'
|
||||
import ReportAnIssue from './components/ReportAnIssue.vue'
|
||||
import ShareDocument from './components/ShareDocument.vue'
|
||||
import TeamMembers from './components/TeamMembers.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="md:hidden">
|
||||
<Image
|
||||
src="/examples/cards-light.png"
|
||||
width={1280}
|
||||
height={1214}
|
||||
alt="Cards"
|
||||
class="block dark:hidden"
|
||||
/>
|
||||
<Image
|
||||
src="/examples/cards-dark.png"
|
||||
width={1280}
|
||||
height={1214}
|
||||
alt="Cards"
|
||||
class="hidden dark:block"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
|
||||
<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
|
||||
<Container>
|
||||
<CreateAccount />
|
||||
</Container>
|
||||
<Container>
|
||||
<PaymentMethod />
|
||||
</Container>
|
||||
</div>
|
||||
<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
|
||||
<Container>
|
||||
<TeamMembers />
|
||||
</Container>
|
||||
<Container>
|
||||
<ShareDocument />
|
||||
</Container>
|
||||
<Container>
|
||||
<DatePicker />
|
||||
</Container>
|
||||
<Container>
|
||||
<Notifications />
|
||||
</Container>
|
||||
</div>
|
||||
<div class="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1">
|
||||
<Container>
|
||||
<ReportAnIssue />
|
||||
</Container>
|
||||
<Container>
|
||||
<GitHubCard />
|
||||
</Container>
|
||||
<Container>
|
||||
<CookieSettings />
|
||||
</Container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
9
apps/www/src/examples/cards/components/Container.vue
Normal file
9
apps/www/src/examples/cards/components/Container.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('flex items-center justify-center [&>div]:w-full', $attrs.class ?? '')">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
58
apps/www/src/examples/cards/components/CookieSettings.vue
Normal file
58
apps/www/src/examples/cards/components/CookieSettings.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import { Switch } from '@/lib/registry/default/ui/switch'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Cookie Settings</CardTitle>
|
||||
<CardDescription>Manage your cookie settings here.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-6">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<Label for="necessary" class="flex flex-col space-y-1">
|
||||
<span>Strictly Necessary</span>
|
||||
<span class="font-normal leading-snug text-muted-foreground">
|
||||
These cookies are essential in order to use the website and use
|
||||
its features.
|
||||
</span>
|
||||
</Label>
|
||||
<Switch id="necessary" default-checked />
|
||||
</div>
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<Label for="functional" class="flex flex-col space-y-1">
|
||||
<span>Functional Cookies</span>
|
||||
<span class="font-normal leading-snug text-muted-foreground">
|
||||
These cookies allow the website to provide personalized
|
||||
functionality.
|
||||
</span>
|
||||
</Label>
|
||||
<Switch id="functional" />
|
||||
</div>
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<Label for="performance" class="flex flex-col space-y-1">
|
||||
<span>Performance Cookies</span>
|
||||
<span class="font-normal leading-snug text-muted-foreground">
|
||||
These cookies help to improve the performance of the website.
|
||||
</span>
|
||||
</Label>
|
||||
<Switch id="performance" />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant="outline" class="w-full">
|
||||
Save preferences
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
67
apps/www/src/examples/cards/components/CreateAccount.vue
Normal file
67
apps/www/src/examples/cards/components/CreateAccount.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<script setup lang="ts">
|
||||
import GitHubIcon from '~icons/radix-icons/github-logo'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader class="space-y-1">
|
||||
<CardTitle class="text-2xl">
|
||||
Create an account
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email below to create your account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4">
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<Button variant="outline">
|
||||
<GitHubIcon class="mr-2 h-4 w-4" />
|
||||
Github
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<svg role="img" viewBox="0 0 24 24" class="mr-2 h-4 w-4">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
|
||||
/>
|
||||
</svg>
|
||||
Google
|
||||
</Button>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<span class="w-full border-t" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-background px-2 text-muted-foreground">
|
||||
Or continue with
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label html-for="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="m@example.com" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label html-for="password">Password</Label>
|
||||
<Input id="password" type="password" />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button class="w-full">
|
||||
Create account
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
18
apps/www/src/examples/cards/components/DatePicker.vue
Normal file
18
apps/www/src/examples/cards/components/DatePicker.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import DatePickerWithRange from '@/lib/registry/default/examples/DatePickerWithRange.vue'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<div class="space-y-2">
|
||||
<Label html-for="date" class="shrink-0">
|
||||
Pick a date
|
||||
</Label>
|
||||
<DatePickerWithRange class="[&>button]:w-[260px]" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
84
apps/www/src/examples/cards/components/GitHubCard.vue
Normal file
84
apps/www/src/examples/cards/components/GitHubCard.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import ChevronDownIcon from '~icons/radix-icons/chevron-down'
|
||||
import CircleIcon from '~icons/radix-icons/circle'
|
||||
import PlusIcon from '~icons/radix-icons/plus'
|
||||
import StarIcon from '~icons/radix-icons/star'
|
||||
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/lib/registry/default/ui/dropdown-menu'
|
||||
import { Separator } from '@/lib/registry/default/ui/separator'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
|
||||
<div class="space-y-1">
|
||||
<CardTitle>shadcn/ui</CardTitle>
|
||||
<CardDescription>
|
||||
Beautifully designed components built with Radix UI and Tailwind
|
||||
CSS.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
|
||||
<Button variant="secondary" class="px-3 shadow-none">
|
||||
<StarIcon class="mr-2 h-4 w-4" />
|
||||
Star
|
||||
</Button>
|
||||
<Separator orientation="vertical" class="h-[20px]" />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="secondary" class="px-2 shadow-none">
|
||||
<ChevronDownIcon class="h-4 w-4 text-secondary-foreground" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
:align-offset="-5"
|
||||
class="w-[200px]"
|
||||
force-mount
|
||||
>
|
||||
<DropdownMenuLabel>Suggested Lists</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuCheckboxItem checked>
|
||||
Future Ideas
|
||||
</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuCheckboxItem>My Stack</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<PlusIcon class="mr-2 h-4 w-4" /> Create List
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="flex space-x-4 text-sm text-muted-foreground">
|
||||
<div class="flex items-center">
|
||||
<CircleIcon class="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
|
||||
TypeScript
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<StarIcon class="mr-1 h-3 w-3" />
|
||||
20k
|
||||
</div>
|
||||
<div>Updated April 2023</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
59
apps/www/src/examples/cards/components/Notifications.vue
Normal file
59
apps/www/src/examples/cards/components/Notifications.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<script setup lang="ts">
|
||||
import BellIcon from '~icons/radix-icons/bell'
|
||||
import EyeNoneIcon from '~icons/radix-icons/eye-none'
|
||||
import PersonIcon from '~icons/radix-icons/person'
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader class="pb-3">
|
||||
<CardTitle>Notifications</CardTitle>
|
||||
<CardDescription>
|
||||
Choose what you want to be notified about.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-1">
|
||||
<div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
|
||||
<BellIcon class="mt-px h-5 w-5" />
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Everything
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Email digest, mentions & all activity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
|
||||
<PersonIcon class="mt-px h-5 w-5" />
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Available
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Only mentions and comments.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
|
||||
<EyeNoneIcon class="mt-px h-5 w-5" />
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Ignoring
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Turn off all notifications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
170
apps/www/src/examples/cards/components/PaymentMethod.vue
Normal file
170
apps/www/src/examples/cards/components/PaymentMethod.vue
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/default/ui/select'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Payment Method</CardTitle>
|
||||
<CardDescription>
|
||||
Add a new payment method to your account.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-6">
|
||||
<RadioGroup default-value="card" class="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<RadioGroupItem id="card" model-value="card" class="peer sr-only" />
|
||||
<Label
|
||||
for="card"
|
||||
class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
class="mb-3 h-6 w-6"
|
||||
>
|
||||
<rect width="20" height="14" x="2" y="5" rx="2" />
|
||||
<path d="M2 10h20" />
|
||||
</svg>
|
||||
Card
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<RadioGroupItem
|
||||
id="paypal"
|
||||
value="paypal"
|
||||
class="peer sr-only"
|
||||
/>
|
||||
<Label
|
||||
for="paypal"
|
||||
class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
|
||||
>
|
||||
<svg role="img" viewBox="0 0 24 24" class="mb-3 h-6 w-6">
|
||||
<path
|
||||
d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
Paypal
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<RadioGroupItem id="apple" value="apple" class="peer sr-only" />
|
||||
<Label
|
||||
for="apple"
|
||||
class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
|
||||
>
|
||||
<svg role="img" viewBox="0 0 24 24" class="mb-3 h-6 w-6">
|
||||
<path
|
||||
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
Apple
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input id="name" placeholder="First Last" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="number">Card number</Label>
|
||||
<Input id="number" placeholder="" />
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="month">Expires</Label>
|
||||
<Select>
|
||||
<SelectTrigger id="month">
|
||||
<SelectValue placeholder="Month" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">
|
||||
January
|
||||
</SelectItem>
|
||||
<SelectItem value="2">
|
||||
February
|
||||
</SelectItem>
|
||||
<SelectItem value="3">
|
||||
March
|
||||
</SelectItem>
|
||||
<SelectItem value="4">
|
||||
April
|
||||
</SelectItem>
|
||||
<SelectItem value="5">
|
||||
May
|
||||
</SelectItem>
|
||||
<SelectItem value="6">
|
||||
June
|
||||
</SelectItem>
|
||||
<SelectItem value="7">
|
||||
July
|
||||
</SelectItem>
|
||||
<SelectItem value="8">
|
||||
August
|
||||
</SelectItem>
|
||||
<SelectItem value="9">
|
||||
September
|
||||
</SelectItem>
|
||||
<SelectItem value="10">
|
||||
October
|
||||
</SelectItem>
|
||||
<SelectItem value="11">
|
||||
November
|
||||
</SelectItem>
|
||||
<SelectItem value="12">
|
||||
December
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="year">Year</Label>
|
||||
<Select>
|
||||
<SelectTrigger id="year">
|
||||
<SelectValue placeholder="Year" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem v-for="i in 10" :key="i" :value="`${new Date().getFullYear() + i}`">
|
||||
{{ new Date().getFullYear() + i }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="cvc">CVC</Label>
|
||||
<Input id="cvc" placeholder="CVC" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button class="w-full">
|
||||
Continue
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
103
apps/www/src/examples/cards/components/ReportAnIssue.vue
Normal file
103
apps/www/src/examples/cards/components/ReportAnIssue.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/default/ui/select'
|
||||
import { Textarea } from '@/lib/registry/default/ui/textarea'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Report an issue</CardTitle>
|
||||
<CardDescription>
|
||||
What area are you having problems with?
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-6">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="area">Area</Label>
|
||||
<Select default-value="billing">
|
||||
<SelectTrigger id="area">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="team">
|
||||
Team
|
||||
</SelectItem>
|
||||
<SelectItem value="billing">
|
||||
Billing
|
||||
</SelectItem>
|
||||
<SelectItem value="account">
|
||||
Account
|
||||
</SelectItem>
|
||||
<SelectItem value="deployments">
|
||||
Deployments
|
||||
</SelectItem>
|
||||
<SelectItem value="support">
|
||||
Support
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="security-level">Security Level</Label>
|
||||
<Select default-value="2">
|
||||
<SelectTrigger
|
||||
id="security-level"
|
||||
class="line-clamp-1 w-[160px] truncate"
|
||||
>
|
||||
<SelectValue placeholder="Select level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">
|
||||
Severity 1 (Highest)
|
||||
</SelectItem>
|
||||
<SelectItem value="2">
|
||||
Severity 2
|
||||
</SelectItem>
|
||||
<SelectItem value="3">
|
||||
Severity 3
|
||||
</SelectItem>
|
||||
<SelectItem value="4">
|
||||
Severity 4 (Lowest)
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="subject">Subject</Label>
|
||||
<Input id="subject" placeholder="I need help with..." />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Please include all information relevant to your issue."
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter class="justify-between space-x-2">
|
||||
<Button variant="ghost">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button>Submit</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
138
apps/www/src/examples/cards/components/ShareDocument.vue
Normal file
138
apps/www/src/examples/cards/components/ShareDocument.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from '@/lib/registry/default/ui/avatar'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/default/ui/select'
|
||||
import { Separator } from '@/lib/registry/default/ui/separator'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Share this document</CardTitle>
|
||||
<CardDescription>
|
||||
Anyone with the link can view this document.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="flex space-x-2">
|
||||
<Input value="http://example.com/link/to/document" read-only />
|
||||
<Button variant="secondary" class="shrink-0">
|
||||
Copy Link
|
||||
</Button>
|
||||
</div>
|
||||
<Separator class="my-4" />
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-sm font-medium">
|
||||
People with access
|
||||
</h4>
|
||||
<div class="grid gap-6">
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<Avatar>
|
||||
<AvatarImage src="/avatars/03.png" />
|
||||
<AvatarFallback>OM</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Olivia Martin
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
m@example.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Select default-value="edit">
|
||||
<SelectTrigger class="ml-auto w-[110px]">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="edit">
|
||||
Can edit
|
||||
</SelectItem>
|
||||
<SelectItem value="view">
|
||||
Can view
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<Avatar>
|
||||
<AvatarImage src="/avatars/05.png" />
|
||||
<AvatarFallback>IN</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Isabella Nguyen
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
b@example.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Select default-value="view">
|
||||
<SelectTrigger class="ml-auto w-[110px]">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="edit">
|
||||
Can edit
|
||||
</SelectItem>
|
||||
<SelectItem value="view">
|
||||
Can view
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<Avatar>
|
||||
<AvatarImage src="/avatars/01.png" />
|
||||
<AvatarFallback>SD</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Sofia Davis
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
p@example.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Select default-value="view">
|
||||
<SelectTrigger class="ml-auto w-[110px]">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="edit">
|
||||
Can edit
|
||||
</SelectItem>
|
||||
<SelectItem value="view">
|
||||
Can view
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
152
apps/www/src/examples/cards/components/TeamMembers.vue
Normal file
152
apps/www/src/examples/cards/components/TeamMembers.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<script setup lang="ts">
|
||||
import ChevronDownIcon from '~icons/radix-icons/chevron-down'
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from '@/lib/registry/default/ui/avatar'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/lib/registry/default/ui/card'
|
||||
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/default/ui/popover'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Team Members</CardTitle>
|
||||
<CardDescription>
|
||||
Invite your team members to collaborate.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-6">
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<Avatar>
|
||||
<AvatarImage src="/avatars/01.png" />
|
||||
<AvatarFallback>OM</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Sofia Davis
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
m@example.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto">
|
||||
Owner
|
||||
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0" align="end">
|
||||
<!-- <Command>
|
||||
<CommandInput placeholder="Select new role..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No roles found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Viewer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view and comment.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Developer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and edit.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Billing</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and manage billing.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Owner</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Admin-level access to all resources.
|
||||
</p>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command> -->
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<Avatar>
|
||||
<AvatarImage src="/avatars/02.png" />
|
||||
<AvatarFallback>JL</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Jackson Lee
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
p@example.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto">
|
||||
Member
|
||||
<ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0" align="end">
|
||||
<!-- <Command>
|
||||
<CommandInput placeholder="Select new role..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No roles found.</CommandEmpty>
|
||||
<CommandGroup class="p-1.5">
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Viewer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view and comment.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Developer</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and edit.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Billing</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Can view, comment and manage billing.
|
||||
</p>
|
||||
</CommandItem>
|
||||
<CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
|
||||
<p>Owner</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Admin-level access to all resources.
|
||||
</p>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command> -->
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user