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