mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-29 07:34:11 +00:00
Compare commits
42 Commits
shadcn@2.1
...
shadcn/cli
| Author | SHA1 | Date | |
|---|---|---|---|
|
c2d894b2e8 | ||
|
|
bfcf2b2de9 | ||
|
|
ab10b70a90 | ||
|
|
4fe731d3e7 | ||
|
|
02cf3bc3f7 | ||
|
|
3621240f4f | ||
|
|
879b6eec90 | ||
|
|
61fd90fa1c | ||
|
|
9de91380f3 | ||
|
|
b5e5d2b91d | ||
|
|
9171932081 | ||
|
|
326cb3e6ad | ||
|
|
b7fc3167d8 | ||
|
|
cd66578d67 | ||
|
|
7fc999d284 | ||
|
|
8f86b9995e | ||
|
|
2f28d1c816 | ||
|
|
3a6eca12c0 | ||
|
|
d2081862b6 | ||
|
|
52cf7acaed | ||
|
|
75e08c1bc1 | ||
|
|
6184716dcd | ||
|
|
0251da8cc9 | ||
|
|
d97764bb55 | ||
|
|
f15a22073f | ||
|
|
2744218d71 | ||
|
|
b95ffc2168 | ||
|
|
30d47cab2f | ||
|
|
119bc7b044 | ||
|
|
0711a3711e | ||
|
|
33595c7d21 | ||
|
|
76738a9187 | ||
|
|
757b715aa5 | ||
|
|
fa4448fc6e | ||
|
|
d86676ae2a | ||
|
|
f4080fbdaf | ||
|
|
87b6d0c312 | ||
|
|
665d4e8f93 | ||
|
|
99eb4a2df7 | ||
|
|
3b8376b687 | ||
|
|
72719d663e | ||
|
|
6684b40e4c |
@@ -1,11 +1,14 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
|
"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
|
||||||
"changelog": ["@changesets/changelog-github", { "repo": "shadcn-ui/ui" }],
|
"changelog": [
|
||||||
|
"@changesets/changelog-github",
|
||||||
|
{ "repo": "shadcn-ui/ui-private" }
|
||||||
|
],
|
||||||
"commit": false,
|
"commit": false,
|
||||||
"fixed": [],
|
"fixed": [],
|
||||||
"linked": [],
|
"linked": [],
|
||||||
"access": "public",
|
"access": "public",
|
||||||
"baseBranch": "main",
|
"baseBranch": "main",
|
||||||
"updateInternalDependencies": "patch",
|
"updateInternalDependencies": "patch",
|
||||||
"ignore": ["www"]
|
"ignore": ["www", "**-template"]
|
||||||
}
|
}
|
||||||
|
|||||||
5
.changeset/large-phones-poke.md
Normal file
5
.changeset/large-phones-poke.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"shadcn-ui": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Add support for frameworks
|
||||||
5
.changeset/wet-eagles-leave.md
Normal file
5
.changeset/wet-eagles-leave.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"shadcn-ui": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
update zod imports
|
||||||
2
.github/version-script-beta.js
vendored
2
.github/version-script-beta.js
vendored
@@ -4,7 +4,7 @@
|
|||||||
import { exec } from "child_process"
|
import { exec } from "child_process"
|
||||||
import fs from "fs"
|
import fs from "fs"
|
||||||
|
|
||||||
const pkgJsonPath = "packages/shadcn/package.json"
|
const pkgJsonPath = "packages/cli/package.json"
|
||||||
try {
|
try {
|
||||||
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
||||||
exec("git rev-parse --short HEAD", (err, stdout) => {
|
exec("git rev-parse --short HEAD", (err, stdout) => {
|
||||||
|
|||||||
2
.github/version-script-next.js
vendored
2
.github/version-script-next.js
vendored
@@ -4,7 +4,7 @@
|
|||||||
import { exec } from "child_process"
|
import { exec } from "child_process"
|
||||||
import fs from "fs"
|
import fs from "fs"
|
||||||
|
|
||||||
const pkgJsonPath = "packages/shadcn/package.json"
|
const pkgJsonPath = "packages/cli/package.json"
|
||||||
try {
|
try {
|
||||||
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
||||||
exec("git rev-parse --short HEAD", (err, stdout) => {
|
exec("git rev-parse --short HEAD", (err, stdout) => {
|
||||||
|
|||||||
9
.github/workflows/issue-stale.yml
vendored
9
.github/workflows/issue-stale.yml
vendored
@@ -16,12 +16,11 @@ jobs:
|
|||||||
name: "Close stale issues with no reproduction"
|
name: "Close stale issues with no reproduction"
|
||||||
with:
|
with:
|
||||||
repo-token: ${{ secrets.STALE_TOKEN }}
|
repo-token: ${{ secrets.STALE_TOKEN }}
|
||||||
close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please reopen or leave a comment. Thank you.\n(This is an automated message.)"
|
close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you."
|
||||||
days-before-issue-close: 7
|
days-before-issue-close: 7
|
||||||
days-before-issue-stale: 30
|
days-before-issue-stale: 15
|
||||||
stale-pr-label: "stale?"
|
stale-pr-label: "stale?"
|
||||||
days-before-pr-close: 7
|
days-before-pr-close: -1
|
||||||
days-before-pr-stale: 15
|
days-before-pr-stale: -1
|
||||||
only-pr-labels: "postpone: more info or changes requested,please add a reproduction"
|
|
||||||
exempt-issue-labels: "roadmap,next,bug"
|
exempt-issue-labels: "roadmap,next,bug"
|
||||||
operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
|
operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
|
||||||
|
|||||||
10
.github/workflows/prerelease.yml
vendored
10
.github/workflows/prerelease.yml
vendored
@@ -40,7 +40,7 @@ jobs:
|
|||||||
run: node .github/version-script-beta.js
|
run: node .github/version-script-beta.js
|
||||||
|
|
||||||
- name: Authenticate to NPM
|
- name: Authenticate to NPM
|
||||||
run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/shadcn/.npmrc
|
run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/cli/.npmrc
|
||||||
env:
|
env:
|
||||||
NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
|
NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
|
||||||
|
|
||||||
@@ -51,10 +51,10 @@ jobs:
|
|||||||
id: package-version
|
id: package-version
|
||||||
uses: martinbeentjes/npm-get-version-action@main
|
uses: martinbeentjes/npm-get-version-action@main
|
||||||
with:
|
with:
|
||||||
path: packages/shadcn
|
path: packages/cli
|
||||||
|
|
||||||
- name: Upload packaged artifact
|
- name: Upload packaged artifact
|
||||||
uses: actions/upload-artifact@v3
|
uses: actions/upload-artifact@v2
|
||||||
with:
|
with:
|
||||||
name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
|
name: npm-package-shadcn-ui@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
|
||||||
path: packages/shadcn/dist/index.js
|
path: packages/cli/dist/index.js
|
||||||
|
|||||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@@ -37,7 +37,7 @@ jobs:
|
|||||||
# run: pnpm check
|
# run: pnpm check
|
||||||
|
|
||||||
- name: Build the package
|
- name: Build the package
|
||||||
run: pnpm shadcn:build
|
run: pnpm build:cli
|
||||||
|
|
||||||
- name: Create Version PR or Publish to NPM
|
- name: Create Version PR or Publish to NPM
|
||||||
id: changesets
|
id: changesets
|
||||||
|
|||||||
7
.gitignore
vendored
7
.gitignore
vendored
@@ -33,9 +33,4 @@ yarn-error.log*
|
|||||||
.turbo
|
.turbo
|
||||||
|
|
||||||
.contentlayer
|
.contentlayer
|
||||||
tsconfig.tsbuildinfo
|
tsconfig.tsbuildinfo
|
||||||
|
|
||||||
# ide
|
|
||||||
.idea
|
|
||||||
.fleet
|
|
||||||
.vscode
|
|
||||||
@@ -91,42 +91,6 @@ pnpm --filter=www dev
|
|||||||
pnpm --filter=shadcn-ui dev
|
pnpm --filter=shadcn-ui dev
|
||||||
```
|
```
|
||||||
|
|
||||||
## Running the CLI Locally
|
|
||||||
|
|
||||||
To run the CLI locally, you can follow the workflow:
|
|
||||||
|
|
||||||
1. Start by running the registry (main site) to make sure the components are up to date:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm www:dev
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Run the development script for the CLI:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm shadcn:dev
|
|
||||||
```
|
|
||||||
|
|
||||||
3. In another terminal tab, test the CLI by running:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm shadcn
|
|
||||||
```
|
|
||||||
|
|
||||||
To test the CLI in a specific app, use a command like:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
|
|
||||||
```
|
|
||||||
|
|
||||||
4. To run the tests for the CLI:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm --filter=shadcn test
|
|
||||||
```
|
|
||||||
|
|
||||||
This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.
|
|
||||||
|
|
||||||
## Documentation
|
## Documentation
|
||||||
|
|
||||||
The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
|
The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
|
||||||
|
|||||||
@@ -1,273 +0,0 @@
|
|||||||
import { AccordionDemo } from "@/registry/default/block/_sink/components/accordion-demo"
|
|
||||||
import { AlertDemo } from "@/registry/default/block/_sink/components/alert-demo"
|
|
||||||
import { AlertDialogDemo } from "@/registry/default/block/_sink/components/alert-dialog-demo"
|
|
||||||
import { AppSidebar } from "@/registry/default/block/_sink/components/app-sidebar"
|
|
||||||
import { AspectRatioDemo } from "@/registry/default/block/_sink/components/aspect-ratio-demo"
|
|
||||||
import { AvatarDemo } from "@/registry/default/block/_sink/components/avatar-demo"
|
|
||||||
import { BadgeDemo } from "@/registry/default/block/_sink/components/badge-demo"
|
|
||||||
import { BadgeDestructive } from "@/registry/default/block/_sink/components/badge-destructive"
|
|
||||||
import { BadgeOutline } from "@/registry/default/block/_sink/components/badge-outline"
|
|
||||||
import { BadgeSecondary } from "@/registry/default/block/_sink/components/badge-secondary"
|
|
||||||
import { BreadcrumbDemo } from "@/registry/default/block/_sink/components/breadcrumb-demo"
|
|
||||||
import { ButtonDemo } from "@/registry/default/block/_sink/components/button-demo"
|
|
||||||
import { ButtonDestructive } from "@/registry/default/block/_sink/components/button-destructive"
|
|
||||||
import { ButtonGhost } from "@/registry/default/block/_sink/components/button-ghost"
|
|
||||||
import { ButtonLink } from "@/registry/default/block/_sink/components/button-link"
|
|
||||||
import { ButtonLoading } from "@/registry/default/block/_sink/components/button-loading"
|
|
||||||
import { ButtonOutline } from "@/registry/default/block/_sink/components/button-outline"
|
|
||||||
import { ButtonSecondary } from "@/registry/default/block/_sink/components/button-secondary"
|
|
||||||
import { ButtonWithIcon } from "@/registry/default/block/_sink/components/button-with-icon"
|
|
||||||
import { CalendarDemo } from "@/registry/default/block/_sink/components/calendar-demo"
|
|
||||||
import { CardDemo } from "@/registry/default/block/_sink/components/card-demo"
|
|
||||||
import { CarouselDemo } from "@/registry/default/block/_sink/components/carousel-demo"
|
|
||||||
import { CheckboxDemo } from "@/registry/default/block/_sink/components/checkbox-demo"
|
|
||||||
import { CollapsibleDemo } from "@/registry/default/block/_sink/components/collapsible-demo"
|
|
||||||
import { ComboboxDemo } from "@/registry/default/block/_sink/components/combobox-demo"
|
|
||||||
import { CommandDemo } from "@/registry/default/block/_sink/components/command-demo"
|
|
||||||
import { ComponentWrapper } from "@/registry/default/block/_sink/components/component-wrapper"
|
|
||||||
import { ContextMenuDemo } from "@/registry/default/block/_sink/components/context-menu-demo"
|
|
||||||
import { DatePickerDemo } from "@/registry/default/block/_sink/components/date-picker-demo"
|
|
||||||
import { DialogDemo } from "@/registry/default/block/_sink/components/dialog-demo"
|
|
||||||
import { DrawerDemo } from "@/registry/default/block/_sink/components/drawer-demo"
|
|
||||||
import { DropdownMenuDemo } from "@/registry/default/block/_sink/components/dropdown-menu-demo"
|
|
||||||
import { HoverCardDemo } from "@/registry/default/block/_sink/components/hover-card-demo"
|
|
||||||
import { InputDemo } from "@/registry/default/block/_sink/components/input-demo"
|
|
||||||
import { InputOTPDemo } from "@/registry/default/block/_sink/components/input-otp-demo"
|
|
||||||
import { LabelDemo } from "@/registry/default/block/_sink/components/label-demo"
|
|
||||||
import { MenubarDemo } from "@/registry/default/block/_sink/components/menubar-demo"
|
|
||||||
import { NavigationMenuDemo } from "@/registry/default/block/_sink/components/navigation-menu-demo"
|
|
||||||
import { PaginationDemo } from "@/registry/default/block/_sink/components/pagination-demo"
|
|
||||||
import { PopoverDemo } from "@/registry/default/block/_sink/components/popover-demo"
|
|
||||||
import { ProgressDemo } from "@/registry/default/block/_sink/components/progress-demo"
|
|
||||||
import { RadioGroupDemo } from "@/registry/default/block/_sink/components/radio-group-demo"
|
|
||||||
import { ResizableHandleDemo } from "@/registry/default/block/_sink/components/resizable-handle"
|
|
||||||
import { ScrollAreaDemo } from "@/registry/default/block/_sink/components/scroll-area-demo"
|
|
||||||
import { SelectDemo } from "@/registry/default/block/_sink/components/select-demo"
|
|
||||||
import { SeparatorDemo } from "@/registry/default/block/_sink/components/separator-demo"
|
|
||||||
import { SheetDemo } from "@/registry/default/block/_sink/components/sheet-demo"
|
|
||||||
import { SkeletonDemo } from "@/registry/default/block/_sink/components/skeleton-demo"
|
|
||||||
import { SliderDemo } from "@/registry/default/block/_sink/components/slider-demo"
|
|
||||||
import { SonnerDemo } from "@/registry/default/block/_sink/components/sonner-demo"
|
|
||||||
import { SwitchDemo } from "@/registry/default/block/_sink/components/switch-demo"
|
|
||||||
import { TableDemo } from "@/registry/default/block/_sink/components/table-demo"
|
|
||||||
import { TabsDemo } from "@/registry/default/block/_sink/components/tabs-demo"
|
|
||||||
import { TextareaDemo } from "@/registry/default/block/_sink/components/textarea-demo"
|
|
||||||
import { ToastDemo } from "@/registry/default/block/_sink/components/toast-demo"
|
|
||||||
import { ToggleDemo } from "@/registry/default/block/_sink/components/toggle-demo"
|
|
||||||
import { ToggleDisabled } from "@/registry/default/block/_sink/components/toggle-disabled"
|
|
||||||
import { ToggleGroupDemo } from "@/registry/default/block/_sink/components/toggle-group-demo"
|
|
||||||
import { ToggleOutline } from "@/registry/default/block/_sink/components/toggle-outline"
|
|
||||||
import { ToggleWithText } from "@/registry/default/block/_sink/components/toggle-with-text"
|
|
||||||
import { TooltipDemo } from "@/registry/default/block/_sink/components/tooltip-demo"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export default function SinkPage() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
|
||||||
<div className="flex items-center gap-2 px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
||||||
<ComponentWrapper name="Accordion">
|
|
||||||
<AccordionDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Alert">
|
|
||||||
<AlertDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="AlertDialog">
|
|
||||||
<AlertDialogDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="AspectRatio">
|
|
||||||
<AspectRatioDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Avatar">
|
|
||||||
<AvatarDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Badge">
|
|
||||||
<BadgeDemo />
|
|
||||||
<BadgeDestructive />
|
|
||||||
<BadgeOutline />
|
|
||||||
<BadgeSecondary />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Breadcrumb">
|
|
||||||
<BreadcrumbDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Button">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ButtonDemo />
|
|
||||||
<ButtonDestructive />
|
|
||||||
<ButtonGhost />
|
|
||||||
<ButtonLink />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ButtonLoading />
|
|
||||||
<ButtonOutline />
|
|
||||||
<ButtonSecondary />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ButtonWithIcon />
|
|
||||||
</div>
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Calendar">
|
|
||||||
<CalendarDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Card">
|
|
||||||
<CardDemo className="w-full" />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper
|
|
||||||
name="Carousel"
|
|
||||||
className="[&_.max-w-xs]:max-w-[70%]"
|
|
||||||
>
|
|
||||||
<CarouselDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Checkbox">
|
|
||||||
<CheckboxDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Collapsible">
|
|
||||||
<CollapsibleDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Combobox">
|
|
||||||
<ComboboxDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper
|
|
||||||
name="Command"
|
|
||||||
className="[&_[cmdk-root]]:md:min-w-max"
|
|
||||||
>
|
|
||||||
<CommandDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="ContextMenu">
|
|
||||||
<ContextMenuDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="DatePicker">
|
|
||||||
<DatePickerDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Dialog">
|
|
||||||
<DialogDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Drawer">
|
|
||||||
<DrawerDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="DropdownMenu">
|
|
||||||
<DropdownMenuDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="HoverCard">
|
|
||||||
<HoverCardDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Input">
|
|
||||||
<InputDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="InputOTP">
|
|
||||||
<InputOTPDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Label">
|
|
||||||
<LabelDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Menubar">
|
|
||||||
<MenubarDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="NavigationMenu" className="col-span-2">
|
|
||||||
<NavigationMenuDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Pagination">
|
|
||||||
<PaginationDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Popover">
|
|
||||||
<PopoverDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Progress">
|
|
||||||
<ProgressDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="RadioGroup">
|
|
||||||
<RadioGroupDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Resizable" className="col-span-2">
|
|
||||||
<ResizableHandleDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="ScrollArea">
|
|
||||||
<ScrollAreaDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Select">
|
|
||||||
<SelectDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Separator">
|
|
||||||
<SeparatorDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Sheet">
|
|
||||||
<SheetDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Skeleton">
|
|
||||||
<SkeletonDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Slider">
|
|
||||||
<SliderDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Sonner">
|
|
||||||
<SonnerDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Switch">
|
|
||||||
<SwitchDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Table" className="col-span-2">
|
|
||||||
<TableDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Tabs">
|
|
||||||
<TabsDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Textarea">
|
|
||||||
<TextareaDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Toast">
|
|
||||||
<ToastDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Toggle">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ToggleDemo />
|
|
||||||
<ToggleDisabled />
|
|
||||||
<ToggleOutline />
|
|
||||||
<ToggleWithText />
|
|
||||||
</div>
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="ToggleGroup">
|
|
||||||
<ToggleGroupDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
<ComponentWrapper name="Tooltip">
|
|
||||||
<TooltipDemo />
|
|
||||||
</ComponentWrapper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -56,7 +56,7 @@ export default function Dashboard() {
|
|||||||
<aside className="inset-y fixed left-0 z-20 flex h-full flex-col border-r">
|
<aside className="inset-y fixed left-0 z-20 flex h-full flex-col border-r">
|
||||||
<div className="border-b p-2">
|
<div className="border-b p-2">
|
||||||
<Button variant="outline" size="icon" aria-label="Home">
|
<Button variant="outline" size="icon" aria-label="Home">
|
||||||
<Triangle className="w-5 h-5 fill-foreground" />
|
<Triangle className="size-5 fill-foreground" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<nav className="grid gap-1 p-2">
|
<nav className="grid gap-1 p-2">
|
||||||
@@ -68,7 +68,7 @@ export default function Dashboard() {
|
|||||||
className="rounded-lg bg-muted"
|
className="rounded-lg bg-muted"
|
||||||
aria-label="Playground"
|
aria-label="Playground"
|
||||||
>
|
>
|
||||||
<SquareTerminal className="w-5 h-5" />
|
<SquareTerminal className="size-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right" sideOffset={5}>
|
<TooltipContent side="right" sideOffset={5}>
|
||||||
@@ -83,7 +83,7 @@ export default function Dashboard() {
|
|||||||
className="rounded-lg"
|
className="rounded-lg"
|
||||||
aria-label="Models"
|
aria-label="Models"
|
||||||
>
|
>
|
||||||
<Bot className="w-5 h-5" />
|
<Bot className="size-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right" sideOffset={5}>
|
<TooltipContent side="right" sideOffset={5}>
|
||||||
@@ -98,7 +98,7 @@ export default function Dashboard() {
|
|||||||
className="rounded-lg"
|
className="rounded-lg"
|
||||||
aria-label="API"
|
aria-label="API"
|
||||||
>
|
>
|
||||||
<Code2 className="w-5 h-5" />
|
<Code2 className="size-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right" sideOffset={5}>
|
<TooltipContent side="right" sideOffset={5}>
|
||||||
@@ -113,7 +113,7 @@ export default function Dashboard() {
|
|||||||
className="rounded-lg"
|
className="rounded-lg"
|
||||||
aria-label="Documentation"
|
aria-label="Documentation"
|
||||||
>
|
>
|
||||||
<Book className="w-5 h-5" />
|
<Book className="size-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right" sideOffset={5}>
|
<TooltipContent side="right" sideOffset={5}>
|
||||||
@@ -128,7 +128,7 @@ export default function Dashboard() {
|
|||||||
className="rounded-lg"
|
className="rounded-lg"
|
||||||
aria-label="Settings"
|
aria-label="Settings"
|
||||||
>
|
>
|
||||||
<Settings2 className="w-5 h-5" />
|
<Settings2 className="size-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right" sideOffset={5}>
|
<TooltipContent side="right" sideOffset={5}>
|
||||||
@@ -145,7 +145,7 @@ export default function Dashboard() {
|
|||||||
className="mt-auto rounded-lg"
|
className="mt-auto rounded-lg"
|
||||||
aria-label="Help"
|
aria-label="Help"
|
||||||
>
|
>
|
||||||
<LifeBuoy className="w-5 h-5" />
|
<LifeBuoy className="size-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right" sideOffset={5}>
|
<TooltipContent side="right" sideOffset={5}>
|
||||||
@@ -160,7 +160,7 @@ export default function Dashboard() {
|
|||||||
className="mt-auto rounded-lg"
|
className="mt-auto rounded-lg"
|
||||||
aria-label="Account"
|
aria-label="Account"
|
||||||
>
|
>
|
||||||
<SquareUser className="w-5 h-5" />
|
<SquareUser className="size-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right" sideOffset={5}>
|
<TooltipContent side="right" sideOffset={5}>
|
||||||
@@ -175,7 +175,7 @@ export default function Dashboard() {
|
|||||||
<Drawer>
|
<Drawer>
|
||||||
<DrawerTrigger asChild>
|
<DrawerTrigger asChild>
|
||||||
<Button variant="ghost" size="icon" className="md:hidden">
|
<Button variant="ghost" size="icon" className="md:hidden">
|
||||||
<Settings className="w-4 h-4" />
|
<Settings className="size-4" />
|
||||||
<span className="sr-only">Settings</span>
|
<span className="sr-only">Settings</span>
|
||||||
</Button>
|
</Button>
|
||||||
</DrawerTrigger>
|
</DrawerTrigger>
|
||||||
@@ -203,7 +203,7 @@ export default function Dashboard() {
|
|||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="genesis">
|
<SelectItem value="genesis">
|
||||||
<div className="flex items-start gap-3 text-muted-foreground">
|
<div className="flex items-start gap-3 text-muted-foreground">
|
||||||
<Rabbit className="w-5 h-5" />
|
<Rabbit className="size-5" />
|
||||||
<div className="grid gap-0.5">
|
<div className="grid gap-0.5">
|
||||||
<p>
|
<p>
|
||||||
Neural{" "}
|
Neural{" "}
|
||||||
@@ -219,7 +219,7 @@ export default function Dashboard() {
|
|||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="explorer">
|
<SelectItem value="explorer">
|
||||||
<div className="flex items-start gap-3 text-muted-foreground">
|
<div className="flex items-start gap-3 text-muted-foreground">
|
||||||
<Bird className="w-5 h-5" />
|
<Bird className="size-5" />
|
||||||
<div className="grid gap-0.5">
|
<div className="grid gap-0.5">
|
||||||
<p>
|
<p>
|
||||||
Neural{" "}
|
Neural{" "}
|
||||||
@@ -235,7 +235,7 @@ export default function Dashboard() {
|
|||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="quantum">
|
<SelectItem value="quantum">
|
||||||
<div className="flex items-start gap-3 text-muted-foreground">
|
<div className="flex items-start gap-3 text-muted-foreground">
|
||||||
<Turtle className="w-5 h-5" />
|
<Turtle className="size-5" />
|
||||||
<div className="grid gap-0.5">
|
<div className="grid gap-0.5">
|
||||||
<p>
|
<p>
|
||||||
Neural{" "}
|
Neural{" "}
|
||||||
@@ -296,7 +296,7 @@ export default function Dashboard() {
|
|||||||
size="sm"
|
size="sm"
|
||||||
className="ml-auto gap-1.5 text-sm"
|
className="ml-auto gap-1.5 text-sm"
|
||||||
>
|
>
|
||||||
<Share className="w-3.5 h-3.5" />
|
<Share className="size-3.5" />
|
||||||
Share
|
Share
|
||||||
</Button>
|
</Button>
|
||||||
</header>
|
</header>
|
||||||
@@ -322,7 +322,7 @@ export default function Dashboard() {
|
|||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="genesis">
|
<SelectItem value="genesis">
|
||||||
<div className="flex items-start gap-3 text-muted-foreground">
|
<div className="flex items-start gap-3 text-muted-foreground">
|
||||||
<Rabbit className="w-5 h-5" />
|
<Rabbit className="size-5" />
|
||||||
<div className="grid gap-0.5">
|
<div className="grid gap-0.5">
|
||||||
<p>
|
<p>
|
||||||
Neural{" "}
|
Neural{" "}
|
||||||
@@ -338,7 +338,7 @@ export default function Dashboard() {
|
|||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="explorer">
|
<SelectItem value="explorer">
|
||||||
<div className="flex items-start gap-3 text-muted-foreground">
|
<div className="flex items-start gap-3 text-muted-foreground">
|
||||||
<Bird className="w-5 h-5" />
|
<Bird className="size-5" />
|
||||||
<div className="grid gap-0.5">
|
<div className="grid gap-0.5">
|
||||||
<p>
|
<p>
|
||||||
Neural{" "}
|
Neural{" "}
|
||||||
@@ -354,7 +354,7 @@ export default function Dashboard() {
|
|||||||
</SelectItem>
|
</SelectItem>
|
||||||
<SelectItem value="quantum">
|
<SelectItem value="quantum">
|
||||||
<div className="flex items-start gap-3 text-muted-foreground">
|
<div className="flex items-start gap-3 text-muted-foreground">
|
||||||
<Turtle className="w-5 h-5" />
|
<Turtle className="size-5" />
|
||||||
<div className="grid gap-0.5">
|
<div className="grid gap-0.5">
|
||||||
<p>
|
<p>
|
||||||
Neural{" "}
|
Neural{" "}
|
||||||
@@ -435,7 +435,7 @@ export default function Dashboard() {
|
|||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Button variant="ghost" size="icon">
|
<Button variant="ghost" size="icon">
|
||||||
<Paperclip className="w-4 h-4" />
|
<Paperclip className="size-4" />
|
||||||
<span className="sr-only">Attach file</span>
|
<span className="sr-only">Attach file</span>
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
@@ -444,7 +444,7 @@ export default function Dashboard() {
|
|||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Button variant="ghost" size="icon">
|
<Button variant="ghost" size="icon">
|
||||||
<Mic className="w-4 h-4" />
|
<Mic className="size-4" />
|
||||||
<span className="sr-only">Use Microphone</span>
|
<span className="sr-only">Use Microphone</span>
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
@@ -452,7 +452,7 @@ export default function Dashboard() {
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Button type="submit" size="sm" className="ml-auto gap-1.5">
|
<Button type="submit" size="sm" className="ml-auto gap-1.5">
|
||||||
Send Message
|
Send Message
|
||||||
<CornerDownLeft className="w-3.5 h-3.5" />
|
<CornerDownLeft className="size-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,96 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import {
|
|
||||||
Frame,
|
|
||||||
LifeBuoy,
|
|
||||||
Map,
|
|
||||||
PanelLeftClose,
|
|
||||||
PanelLeftOpen,
|
|
||||||
PieChart,
|
|
||||||
Send,
|
|
||||||
} from "lucide-react"
|
|
||||||
|
|
||||||
import { Button } from "@/registry/default/ui/button"
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
const projects = [
|
|
||||||
{
|
|
||||||
name: "Design Engineering",
|
|
||||||
url: "#",
|
|
||||||
icon: Frame,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sales & Marketing",
|
|
||||||
url: "#",
|
|
||||||
icon: PieChart,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Travel",
|
|
||||||
url: "#",
|
|
||||||
icon: Map,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Support",
|
|
||||||
url: "#",
|
|
||||||
icon: LifeBuoy,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Feedback",
|
|
||||||
url: "#",
|
|
||||||
icon: Send,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
const [open, setOpen] = React.useState(true)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarProvider open={open} onOpenChange={setOpen}>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Projects</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{projects.map((project) => (
|
|
||||||
<SidebarMenuItem key={project.name}>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href={project.url}>
|
|
||||||
<project.icon />
|
|
||||||
<span>{project.name}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex items-center h-12 px-4 justify-between">
|
|
||||||
<Button
|
|
||||||
onClick={() => setOpen((open) => !open)}
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
>
|
|
||||||
{open ? <PanelLeftClose /> : <PanelLeftOpen />}
|
|
||||||
<span>{open ? "Close" : "Open"} Sidebar</span>
|
|
||||||
</Button>
|
|
||||||
</header>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { ChevronDown, ChevronUp, User2 } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/registry/default/ui/dropdown-menu"
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarFooter,
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarHeader />
|
|
||||||
<SidebarContent />
|
|
||||||
<SidebarFooter>
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
|
|
||||||
Username
|
|
||||||
<ChevronUp className="ml-auto" />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent
|
|
||||||
side="top"
|
|
||||||
className="w-[--radix-popper-anchor-width]"
|
|
||||||
>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Account</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Billing</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Sign out</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarFooter>
|
|
||||||
</Sidebar>
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex items-center justify-between px-4 h-12">
|
|
||||||
<SidebarTrigger />
|
|
||||||
</header>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import {
|
|
||||||
ChevronDown,
|
|
||||||
Frame,
|
|
||||||
LifeBuoy,
|
|
||||||
Map,
|
|
||||||
PieChart,
|
|
||||||
Plus,
|
|
||||||
Send,
|
|
||||||
} from "lucide-react"
|
|
||||||
import { Toaster, toast } from "sonner"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupAction,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Toaster
|
|
||||||
position="bottom-left"
|
|
||||||
toastOptions={{
|
|
||||||
className: "ml-[160px]",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Projects</SidebarGroupLabel>
|
|
||||||
<SidebarGroupAction
|
|
||||||
title="Add Project"
|
|
||||||
onClick={() => toast("You clicked the group action!")}
|
|
||||||
>
|
|
||||||
<Plus /> <span className="sr-only">Add Project</span>
|
|
||||||
</SidebarGroupAction>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href="#">
|
|
||||||
<Frame />
|
|
||||||
<span>Design Engineering</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href="#">
|
|
||||||
<PieChart />
|
|
||||||
<span>Sales & Marketing</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href="#">
|
|
||||||
<Map />
|
|
||||||
<span>Travel</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { ChevronDown, LifeBuoy, Send } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Collapsible,
|
|
||||||
CollapsibleContent,
|
|
||||||
CollapsibleTrigger,
|
|
||||||
} from "@/registry/default/ui/collapsible"
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<Collapsible defaultOpen className="group/collapsible">
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel
|
|
||||||
asChild
|
|
||||||
className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
|
||||||
>
|
|
||||||
<CollapsibleTrigger>
|
|
||||||
Help
|
|
||||||
<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
</SidebarGroupLabel>
|
|
||||||
<CollapsibleContent>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton>
|
|
||||||
<LifeBuoy />
|
|
||||||
Support
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton>
|
|
||||||
<Send />
|
|
||||||
Feedback
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</CollapsibleContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</Collapsible>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { LifeBuoy, Send } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Help</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton>
|
|
||||||
<LifeBuoy />
|
|
||||||
Support
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton>
|
|
||||||
<Send />
|
|
||||||
Feedback
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { ChevronDown } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/registry/default/ui/dropdown-menu"
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarHeader>
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
|
|
||||||
Select Workspace
|
|
||||||
<ChevronDown className="ml-auto" />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent className="w-[--radix-popper-anchor-width]">
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Acme Inc</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Acme Corp.</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarHeader>
|
|
||||||
</Sidebar>
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex items-center justify-between px-4 h-12">
|
|
||||||
<SidebarTrigger />
|
|
||||||
</header>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Frame,
|
|
||||||
LifeBuoy,
|
|
||||||
Map,
|
|
||||||
MoreHorizontal,
|
|
||||||
PieChart,
|
|
||||||
Send,
|
|
||||||
} from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/registry/default/ui/dropdown-menu"
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuAction,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
const projects = [
|
|
||||||
{
|
|
||||||
name: "Design Engineering",
|
|
||||||
url: "#",
|
|
||||||
icon: Frame,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sales & Marketing",
|
|
||||||
url: "#",
|
|
||||||
icon: PieChart,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Travel",
|
|
||||||
url: "#",
|
|
||||||
icon: Map,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Support",
|
|
||||||
url: "#",
|
|
||||||
icon: LifeBuoy,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Feedback",
|
|
||||||
url: "#",
|
|
||||||
icon: Send,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Projects</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{projects.map((project, index) => (
|
|
||||||
<SidebarMenuItem key={project.name}>
|
|
||||||
<SidebarMenuButton
|
|
||||||
asChild
|
|
||||||
className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
|
|
||||||
>
|
|
||||||
<a href={project.url}>
|
|
||||||
<project.icon />
|
|
||||||
<span>{project.name}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<SidebarMenuAction>
|
|
||||||
<MoreHorizontal />
|
|
||||||
<span className="sr-only">More</span>
|
|
||||||
</SidebarMenuAction>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent side="right" align="start">
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Edit Project</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Delete Project</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuBadge,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
const projects = [
|
|
||||||
{
|
|
||||||
name: "Design Engineering",
|
|
||||||
url: "#",
|
|
||||||
icon: Frame,
|
|
||||||
badge: "24",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sales & Marketing",
|
|
||||||
url: "#",
|
|
||||||
icon: PieChart,
|
|
||||||
badge: "12",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Travel",
|
|
||||||
url: "#",
|
|
||||||
icon: Map,
|
|
||||||
badge: "3",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Support",
|
|
||||||
url: "#",
|
|
||||||
icon: LifeBuoy,
|
|
||||||
badge: "21",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Feedback",
|
|
||||||
url: "#",
|
|
||||||
icon: Send,
|
|
||||||
badge: "8",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Projects</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{projects.map((project) => (
|
|
||||||
<SidebarMenuItem key={project.name}>
|
|
||||||
<SidebarMenuButton
|
|
||||||
asChild
|
|
||||||
className="group-has-[[data-state=open]]/menu-item:bg-sidebar-accent"
|
|
||||||
>
|
|
||||||
<a href={project.url}>
|
|
||||||
<project.icon />
|
|
||||||
<span>{project.name}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
<SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { ChevronRight } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Collapsible,
|
|
||||||
CollapsibleContent,
|
|
||||||
CollapsibleTrigger,
|
|
||||||
} from "@/registry/default/ui/collapsible"
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarMenuSub,
|
|
||||||
SidebarMenuSubButton,
|
|
||||||
SidebarMenuSubItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
title: "Getting Started",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Installation",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Project Structure",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Building Your Application",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Routing",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Data Fetching",
|
|
||||||
url: "#",
|
|
||||||
isActive: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Rendering",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Caching",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Styling",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Optimizing",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Configuring",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Testing",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Authentication",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Deploying",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Upgrading",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Examples",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "API Reference",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Components",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "File Conventions",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Functions",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "next.config.js Options",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "CLI",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Edge Runtime",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Architecture",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Accessibility",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Fast Refresh",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Next.js Compiler",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Supported Browsers",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Turbopack",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{items.map((item, index) => (
|
|
||||||
<Collapsible
|
|
||||||
key={index}
|
|
||||||
className="group/collapsible"
|
|
||||||
defaultOpen={index === 0}
|
|
||||||
>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<CollapsibleTrigger asChild>
|
|
||||||
<SidebarMenuButton>
|
|
||||||
<span>{item.title}</span>
|
|
||||||
<ChevronRight className="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
<CollapsibleContent>
|
|
||||||
<SidebarMenuSub>
|
|
||||||
{item.items.map((subItem, subIndex) => (
|
|
||||||
<SidebarMenuSubItem key={subIndex}>
|
|
||||||
<SidebarMenuSubButton asChild>
|
|
||||||
<a href={subItem.url}>
|
|
||||||
<span>{subItem.title}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuSubButton>
|
|
||||||
</SidebarMenuSubItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenuSub>
|
|
||||||
</CollapsibleContent>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</Collapsible>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,180 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarMenuSub,
|
|
||||||
SidebarMenuSubButton,
|
|
||||||
SidebarMenuSubItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
title: "Getting Started",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Installation",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Project Structure",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Building Your Application",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Routing",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Data Fetching",
|
|
||||||
url: "#",
|
|
||||||
isActive: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Rendering",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Caching",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Styling",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Optimizing",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Configuring",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Testing",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Authentication",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Deploying",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Upgrading",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Examples",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "API Reference",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Components",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "File Conventions",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Functions",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "next.config.js Options",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "CLI",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Edge Runtime",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Architecture",
|
|
||||||
url: "#",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "Accessibility",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Fast Refresh",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Next.js Compiler",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Supported Browsers",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Turbopack",
|
|
||||||
url: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{items.map((item, index) => (
|
|
||||||
<SidebarMenuItem key={index}>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href={item.url}>
|
|
||||||
<span>{item.title}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
<SidebarMenuSub>
|
|
||||||
{item.items.map((subItem, subIndex) => (
|
|
||||||
<SidebarMenuSubItem key={subIndex}>
|
|
||||||
<SidebarMenuSubButton asChild>
|
|
||||||
<a href={subItem.url}>
|
|
||||||
<span>{subItem.title}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuSubButton>
|
|
||||||
</SidebarMenuSubItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenuSub>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
const projects = [
|
|
||||||
{
|
|
||||||
name: "Design Engineering",
|
|
||||||
url: "#",
|
|
||||||
icon: Frame,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sales & Marketing",
|
|
||||||
url: "#",
|
|
||||||
icon: PieChart,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Travel",
|
|
||||||
url: "#",
|
|
||||||
icon: Map,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Support",
|
|
||||||
url: "#",
|
|
||||||
icon: LifeBuoy,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Feedback",
|
|
||||||
url: "#",
|
|
||||||
icon: Send,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Projects</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{projects.map((project) => (
|
|
||||||
<SidebarMenuItem key={project.name}>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href={project.url}>
|
|
||||||
<project.icon />
|
|
||||||
<span>{project.name}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarMenuSkeleton,
|
|
||||||
SidebarProvider,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
const projects = [
|
|
||||||
{
|
|
||||||
name: "Design Engineering",
|
|
||||||
url: "#",
|
|
||||||
icon: Frame,
|
|
||||||
badge: "24",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sales & Marketing",
|
|
||||||
url: "#",
|
|
||||||
icon: PieChart,
|
|
||||||
badge: "12",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Travel",
|
|
||||||
url: "#",
|
|
||||||
icon: Map,
|
|
||||||
badge: "3",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Support",
|
|
||||||
url: "#",
|
|
||||||
icon: LifeBuoy,
|
|
||||||
badge: "21",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Feedback",
|
|
||||||
url: "#",
|
|
||||||
icon: Send,
|
|
||||||
badge: "8",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
// Dummy fetch function
|
|
||||||
async function fetchProjects() {
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 3000))
|
|
||||||
return projects
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Projects</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<React.Suspense fallback={<NavProjectsSkeleton />}>
|
|
||||||
<NavProjects />
|
|
||||||
</React.Suspense>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavProjectsSkeleton() {
|
|
||||||
return (
|
|
||||||
<SidebarMenu>
|
|
||||||
{Array.from({ length: 5 }).map((_, index) => (
|
|
||||||
<SidebarMenuItem key={index}>
|
|
||||||
<SidebarMenuSkeleton showIcon />
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function NavProjects() {
|
|
||||||
const projects = await fetchProjects()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarMenu>
|
|
||||||
{projects.map((project) => (
|
|
||||||
<SidebarMenuItem key={project.name}>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href={project.url}>
|
|
||||||
<project.icon />
|
|
||||||
<span>{project.name}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
// Menu items.
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
title: "Home",
|
|
||||||
url: "#",
|
|
||||||
icon: Home,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Inbox",
|
|
||||||
url: "#",
|
|
||||||
icon: Inbox,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Calendar",
|
|
||||||
url: "#",
|
|
||||||
icon: Calendar,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Search",
|
|
||||||
url: "#",
|
|
||||||
icon: Search,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Settings",
|
|
||||||
url: "#",
|
|
||||||
icon: Settings,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function AppSidebar() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent>
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Application</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu>
|
|
||||||
{items.map((item) => (
|
|
||||||
<SidebarMenuItem key={item.title}>
|
|
||||||
<SidebarMenuButton asChild>
|
|
||||||
<a href={item.url}>
|
|
||||||
<item.icon />
|
|
||||||
<span>{item.title}</span>
|
|
||||||
</a>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
</Sidebar>
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex items-center justify-between px-4 h-12">
|
|
||||||
<SidebarTrigger />
|
|
||||||
</header>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
26
apps/www/__registry__/default/block/hello-block.tsx
Normal file
26
apps/www/__registry__/default/block/hello-block.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { HelloCard } from "@/registry/default/block/hello-block/components/hello-card"
|
||||||
|
import { useMediaQuery } from "@/registry/default/hooks/use-media-query"
|
||||||
|
import { cn } from "@/registry/default/lib/utils"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
|
export default function HelloBlock() {
|
||||||
|
const isDesktop = useMediaQuery("(min-width: 768px)")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HelloCard
|
||||||
|
title="Hello Block"
|
||||||
|
className={cn(
|
||||||
|
"p-12",
|
||||||
|
isDesktop
|
||||||
|
? "bg-muted text-muted-foreground"
|
||||||
|
: "bg-primary text-primary-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<p>Hello. This is a component inside a block.</p>
|
||||||
|
<p>You are currently on {isDesktop ? "desktop" : "mobile"}</p>
|
||||||
|
<Button>Click me</Button>
|
||||||
|
</HelloCard>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,4 +1,15 @@
|
|||||||
import { LoginForm } from "@/registry/default/block/login-01/components/login-form"
|
import Link from "next/link"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/new-york/ui/button"
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/registry/new-york/ui/card"
|
||||||
|
import { Input } from "@/registry/new-york/ui/input"
|
||||||
|
import { Label } from "@/registry/new-york/ui/label"
|
||||||
|
|
||||||
export const iframeHeight = "870px"
|
export const iframeHeight = "870px"
|
||||||
|
|
||||||
@@ -7,7 +18,51 @@ export const containerClassName = "w-full h-full"
|
|||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-full items-center justify-center px-4">
|
<div className="flex h-screen w-full items-center justify-center px-4">
|
||||||
<LoginForm />
|
<Card className="mx-auto max-w-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-2xl">Login</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Enter your email below to login to your account
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="email">Email</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="m@example.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Label htmlFor="password">Password</Label>
|
||||||
|
<Link
|
||||||
|
href="#"
|
||||||
|
className="ml-auto inline-block text-sm underline"
|
||||||
|
>
|
||||||
|
Forgot your password?
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<Input id="password" type="password" required />
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full">
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="w-full">
|
||||||
|
Login with Google
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-center text-sm">
|
||||||
|
Don't have an account?{" "}
|
||||||
|
<Link href="#" className="underline">
|
||||||
|
Sign up
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,59 +0,0 @@
|
|||||||
import Link from "next/link"
|
|
||||||
|
|
||||||
import { Button } from "@/registry/default/ui/button"
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import { Input } from "@/registry/default/ui/input"
|
|
||||||
import { Label } from "@/registry/default/ui/label"
|
|
||||||
|
|
||||||
export function LoginForm() {
|
|
||||||
return (
|
|
||||||
<Card className="mx-auto max-w-sm">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-2xl">Login</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Enter your email below to login to your account
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-4">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="email">Email</Label>
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
placeholder="m@example.com"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<Label htmlFor="password">Password</Label>
|
|
||||||
<Link href="#" className="ml-auto inline-block text-sm underline">
|
|
||||||
Forgot your password?
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<Input id="password" type="password" required />
|
|
||||||
</div>
|
|
||||||
<Button type="submit" className="w-full">
|
|
||||||
Login
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" className="w-full">
|
|
||||||
Login with Google
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4 text-center text-sm">
|
|
||||||
Don't have an account?{" "}
|
|
||||||
<Link href="#" className="underline">
|
|
||||||
Sign up
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { LoginForm } from "@/registry/default/block/login-01/components/login-form"
|
|
||||||
|
|
||||||
export const description = "A simple login form."
|
|
||||||
|
|
||||||
export const iframeHeight = "870px"
|
|
||||||
|
|
||||||
export const containerClassName = "w-full h-full"
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<div className="flex h-screen w-full items-center justify-center px-4">
|
|
||||||
<LoginForm />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
|
import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
|
||||||
import {
|
import {
|
||||||
SidebarLayout,
|
SidebarLayout,
|
||||||
SidebarTrigger,
|
SidebarTrigger,
|
||||||
} from "@/registry/default/block/sidebar-01/ui/sidebar"
|
} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
|
||||||
|
|
||||||
export const iframeHeight = "870px"
|
export const iframeHeight = "870px"
|
||||||
|
|
||||||
|
|||||||
@@ -1,55 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description =
|
|
||||||
"A simple sidebar with navigation grouped by section."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-02/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar with collapsible sections."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
{Array.from({ length: 24 }).map((_, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="aspect-video h-12 w-full rounded-lg bg-muted/50"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-03/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar with submenus."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b">
|
|
||||||
<div className="flex items-center gap-2 px-3">
|
|
||||||
<SidebarTrigger />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-04/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A floating sidebar with submenus."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--sidebar-width": "19rem",
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-05/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar with collapsible submenus."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-06/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar with submenus as dropdowns."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-07/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar that collapses to icons."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
|
||||||
<div className="flex items-center gap-2 px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-08/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "An inset sidebar with secondary navigation."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2">
|
|
||||||
<div className="flex items-center gap-2 px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-09/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "Collapsible nested sidebars."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--sidebar-width": "350px",
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Inbox</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
{Array.from({ length: 24 }).map((_, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="aspect-video h-12 w-full rounded-lg bg-muted/50"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-10/components/app-sidebar"
|
|
||||||
import { NavActions } from "@/registry/default/block/sidebar-10/components/nav-actions"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar in a popover."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-14 shrink-0 items-center gap-2">
|
|
||||||
<div className="flex flex-1 items-center gap-2 px-3">
|
|
||||||
<SidebarTrigger />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage className="line-clamp-1">
|
|
||||||
Project Management & Task Tracking
|
|
||||||
</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div className="ml-auto px-3">
|
|
||||||
<NavActions />
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 px-4 py-10">
|
|
||||||
<div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
|
|
||||||
<div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-11/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar with a collapsible file tree."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">components</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">ui</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>button.tsx</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-12/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar with a calendar."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>October 2024</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-5">
|
|
||||||
{Array.from({ length: 20 }).map((_, i) => (
|
|
||||||
<div key={i} className="aspect-square rounded-xl bg-muted/50" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { SettingsDialog } from "@/registry/default/block/sidebar-13/components/settings-dialog"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar in a dialog."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<div className="flex h-svh items-center justify-center">
|
|
||||||
<SettingsDialog />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-14/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A sidebar on the right."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem className="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#">
|
|
||||||
Building Your Application
|
|
||||||
</BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator className="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
<SidebarTrigger className="-mr-1 ml-auto rotate-180" />
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
<div className="aspect-video rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
<AppSidebar side="right" />
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import { SidebarLeft } from "@/registry/default/block/sidebar-15/components/sidebar-left"
|
|
||||||
import { SidebarRight } from "@/registry/default/block/sidebar-15/components/sidebar-right"
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
} from "@/registry/default/ui/breadcrumb"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
import {
|
|
||||||
SidebarInset,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "800px"
|
|
||||||
|
|
||||||
export const description = "A left and right sidebar."
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<SidebarLeft />
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
|
|
||||||
<div className="flex flex-1 items-center gap-2 px-3">
|
|
||||||
<SidebarTrigger />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
|
||||||
<Breadcrumb>
|
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage className="line-clamp-1">
|
|
||||||
Project Management & Task Tracking
|
|
||||||
</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
||||||
<div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
|
|
||||||
<div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
|
|
||||||
</div>
|
|
||||||
</SidebarInset>
|
|
||||||
<SidebarRight />
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -5,7 +5,7 @@ import {
|
|||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
} from "@/registry/default/ui/accordion"
|
} from "@/registry/default/ui/accordion"
|
||||||
|
|
||||||
export function AccordionDemo() {
|
export default function AccordionDemo() {
|
||||||
return (
|
return (
|
||||||
<Accordion type="single" collapsible className="w-full">
|
<Accordion type="single" collapsible className="w-full">
|
||||||
<AccordionItem value="item-1">
|
<AccordionItem value="item-1">
|
||||||
@@ -24,7 +24,8 @@ export function AccordionDemo() {
|
|||||||
<AccordionItem value="item-3">
|
<AccordionItem value="item-3">
|
||||||
<AccordionTrigger>Is it animated?</AccordionTrigger>
|
<AccordionTrigger>Is it animated?</AccordionTrigger>
|
||||||
<AccordionContent>
|
<AccordionContent>
|
||||||
Yes. It's animated by default, but you can disable it if you prefer.
|
Yes. It's animated by default, but you can disable it if you
|
||||||
|
prefer.
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
@@ -6,7 +6,7 @@ import {
|
|||||||
AlertTitle,
|
AlertTitle,
|
||||||
} from "@/registry/default/ui/alert"
|
} from "@/registry/default/ui/alert"
|
||||||
|
|
||||||
export function AlertDemo() {
|
export default function AlertDemo() {
|
||||||
return (
|
return (
|
||||||
<Alert>
|
<Alert>
|
||||||
<Terminal className="h-4 w-4" />
|
<Terminal className="h-4 w-4" />
|
||||||
19
apps/www/__registry__/default/example/alert-destructive.tsx
Normal file
19
apps/www/__registry__/default/example/alert-destructive.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { AlertCircle } from "lucide-react"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
AlertDescription,
|
||||||
|
AlertTitle,
|
||||||
|
} from "@/registry/default/ui/alert"
|
||||||
|
|
||||||
|
export default function AlertDestructive() {
|
||||||
|
return (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertTitle>Error</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Your session has expired. Please log in again.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -11,7 +11,7 @@ import {
|
|||||||
} from "@/registry/default/ui/alert-dialog"
|
} from "@/registry/default/ui/alert-dialog"
|
||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function AlertDialogDemo() {
|
export default function AlertDialogDemo() {
|
||||||
return (
|
return (
|
||||||
<AlertDialog>
|
<AlertDialog>
|
||||||
<AlertDialogTrigger asChild>
|
<AlertDialogTrigger asChild>
|
||||||
@@ -2,14 +2,14 @@ import Image from "next/image"
|
|||||||
|
|
||||||
import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
|
import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
|
||||||
|
|
||||||
export function AspectRatioDemo() {
|
export default function AspectRatioDemo() {
|
||||||
return (
|
return (
|
||||||
<AspectRatio ratio={16 / 9} className="bg-muted">
|
<AspectRatio ratio={16 / 9} className="bg-muted">
|
||||||
<Image
|
<Image
|
||||||
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
||||||
alt="Photo by Drew Beamer"
|
alt="Photo by Drew Beamer"
|
||||||
fill
|
fill
|
||||||
className="h-full w-full rounded-md object-cover"
|
className="rounded-md object-cover"
|
||||||
/>
|
/>
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
)
|
)
|
||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
AvatarImage,
|
AvatarImage,
|
||||||
} from "@/registry/default/ui/avatar"
|
} from "@/registry/default/ui/avatar"
|
||||||
|
|
||||||
export function AvatarDemo() {
|
export default function AvatarDemo() {
|
||||||
return (
|
return (
|
||||||
<Avatar>
|
<Avatar>
|
||||||
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Badge } from "@/registry/default/ui/badge"
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
export function BadgeDemo() {
|
export default function BadgeDemo() {
|
||||||
return <Badge>Badge</Badge>
|
return <Badge>Badge</Badge>
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Badge } from "@/registry/default/ui/badge"
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
export function BadgeDestructive() {
|
export default function BadgeDestructive() {
|
||||||
return <Badge variant="destructive">Destructive</Badge>
|
return <Badge variant="destructive">Destructive</Badge>
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Badge } from "@/registry/default/ui/badge"
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
export function BadgeOutline() {
|
export default function BadgeOutline() {
|
||||||
return <Badge variant="outline">Outline</Badge>
|
return <Badge variant="outline">Outline</Badge>
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Badge } from "@/registry/default/ui/badge"
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
export function BadgeSecondary() {
|
export default function BadgeSecondary() {
|
||||||
return <Badge variant="secondary">Secondary</Badge>
|
return <Badge variant="secondary">Secondary</Badge>
|
||||||
}
|
}
|
||||||
@@ -14,7 +14,7 @@ import {
|
|||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/registry/default/ui/dropdown-menu"
|
} from "@/registry/default/ui/dropdown-menu"
|
||||||
|
|
||||||
export function BreadcrumbDemo() {
|
export default function BreadcrumbDemo() {
|
||||||
return (
|
return (
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbList>
|
<BreadcrumbList>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { ChevronDown, Slash } from "lucide-react"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from "@/registry/default/ui/breadcrumb"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/registry/default/ui/dropdown-menu"
|
||||||
|
|
||||||
|
export default function BreadcrumbWithDropdown() {
|
||||||
|
return (
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">Home</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger className="flex items-center gap-1">
|
||||||
|
Components
|
||||||
|
<ChevronDown className="h-4 w-4" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem>Documentation</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>Themes</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from "@/registry/default/ui/breadcrumb"
|
||||||
|
|
||||||
|
export default function BreadcrumbCollapsed() {
|
||||||
|
return (
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink asChild>
|
||||||
|
<Link href="/">Home</Link>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbEllipsis />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink asChild>
|
||||||
|
<Link href="/docs/components">Components</Link>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
)
|
||||||
|
}
|
||||||
34
apps/www/__registry__/default/example/breadcrumb-link.tsx
Normal file
34
apps/www/__registry__/default/example/breadcrumb-link.tsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from "@/registry/default/ui/breadcrumb"
|
||||||
|
|
||||||
|
export default function BreadcrumbWithCustomSeparator() {
|
||||||
|
return (
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink>
|
||||||
|
<Link href="/">Home</Link>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink>
|
||||||
|
<Link href="/components">Components</Link>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
)
|
||||||
|
}
|
||||||
133
apps/www/__registry__/default/example/breadcrumb-responsive.tsx
Normal file
133
apps/www/__registry__/default/example/breadcrumb-responsive.tsx
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
import { useMediaQuery } from "@/hooks/use-media-query"
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from "@/registry/default/ui/breadcrumb"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from "@/registry/default/ui/drawer"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/registry/default/ui/dropdown-menu"
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{ href: "#", label: "Home" },
|
||||||
|
{ href: "#", label: "Documentation" },
|
||||||
|
{ href: "#", label: "Building Your Application" },
|
||||||
|
{ href: "#", label: "Data Fetching" },
|
||||||
|
{ label: "Caching and Revalidating" },
|
||||||
|
]
|
||||||
|
|
||||||
|
const ITEMS_TO_DISPLAY = 3
|
||||||
|
|
||||||
|
export default function BreadcrumbResponsive() {
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
const isDesktop = useMediaQuery("(min-width: 768px)")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
{items.length > ITEMS_TO_DISPLAY ? (
|
||||||
|
<>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
{isDesktop ? (
|
||||||
|
<DropdownMenu open={open} onOpenChange={setOpen}>
|
||||||
|
<DropdownMenuTrigger
|
||||||
|
className="flex items-center gap-1"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
<BreadcrumbEllipsis className="h-4 w-4" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
{items.slice(1, -2).map((item, index) => (
|
||||||
|
<DropdownMenuItem key={index}>
|
||||||
|
<Link href={item.href ? item.href : "#"}>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
) : (
|
||||||
|
<Drawer open={open} onOpenChange={setOpen}>
|
||||||
|
<DrawerTrigger aria-label="Toggle Menu">
|
||||||
|
<BreadcrumbEllipsis className="h-4 w-4" />
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerContent>
|
||||||
|
<DrawerHeader className="text-left">
|
||||||
|
<DrawerTitle>Navigate to</DrawerTitle>
|
||||||
|
<DrawerDescription>
|
||||||
|
Select a page to navigate to.
|
||||||
|
</DrawerDescription>
|
||||||
|
</DrawerHeader>
|
||||||
|
<div className="grid gap-1 px-4">
|
||||||
|
{items.slice(1, -2).map((item, index) => (
|
||||||
|
<Link
|
||||||
|
key={index}
|
||||||
|
href={item.href ? item.href : "#"}
|
||||||
|
className="py-1 text-sm"
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<DrawerFooter className="pt-4">
|
||||||
|
<DrawerClose asChild>
|
||||||
|
<Button variant="outline">Close</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
)}
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
{items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
|
||||||
|
<BreadcrumbItem key={index}>
|
||||||
|
{item.href ? (
|
||||||
|
<>
|
||||||
|
<BreadcrumbLink
|
||||||
|
asChild
|
||||||
|
className="max-w-20 truncate md:max-w-none"
|
||||||
|
>
|
||||||
|
<Link href={item.href}>{item.label}</Link>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<BreadcrumbPage className="max-w-20 truncate md:max-w-none">
|
||||||
|
{item.label}
|
||||||
|
</BreadcrumbPage>
|
||||||
|
)}
|
||||||
|
</BreadcrumbItem>
|
||||||
|
))}
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { Slash } from "lucide-react"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from "@/registry/default/ui/breadcrumb"
|
||||||
|
|
||||||
|
export default function BreadcrumbWithCustomSeparator() {
|
||||||
|
return (
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">Home</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
)
|
||||||
|
}
|
||||||
11
apps/www/__registry__/default/example/button-as-child.tsx
Normal file
11
apps/www/__registry__/default/example/button-as-child.tsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
|
export default function ButtonAsChild() {
|
||||||
|
return (
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/login">Login</Link>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonDemo() {
|
export default function ButtonDemo() {
|
||||||
return <Button>Button</Button>
|
return <Button>Button</Button>
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonDestructive() {
|
export default function ButtonDestructive() {
|
||||||
return <Button variant="destructive">Destructive</Button>
|
return <Button variant="destructive">Destructive</Button>
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonGhost() {
|
export default function ButtonGhost() {
|
||||||
return <Button variant="ghost">Ghost</Button>
|
return <Button variant="ghost">Ghost</Button>
|
||||||
}
|
}
|
||||||
@@ -2,10 +2,10 @@ import { ChevronRight } from "lucide-react"
|
|||||||
|
|
||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonIcon() {
|
export default function ButtonIcon() {
|
||||||
return (
|
return (
|
||||||
<Button variant="outline" size="icon">
|
<Button variant="outline" size="icon">
|
||||||
<ChevronRight />
|
<ChevronRight className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonLink() {
|
export default function ButtonLink() {
|
||||||
return <Button variant="link">Link</Button>
|
return <Button variant="link">Link</Button>
|
||||||
}
|
}
|
||||||
@@ -2,10 +2,10 @@ import { Loader2 } from "lucide-react"
|
|||||||
|
|
||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonLoading() {
|
export default function ButtonLoading() {
|
||||||
return (
|
return (
|
||||||
<Button disabled>
|
<Button disabled>
|
||||||
<Loader2 className="animate-spin" />
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
Please wait
|
Please wait
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonOutline() {
|
export default function ButtonOutline() {
|
||||||
return <Button variant="outline">Outline</Button>
|
return <Button variant="outline">Outline</Button>
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
export function ButtonSecondary() {
|
export default function ButtonSecondary() {
|
||||||
return <Button variant="secondary">Secondary</Button>
|
return <Button variant="secondary">Secondary</Button>
|
||||||
}
|
}
|
||||||
11
apps/www/__registry__/default/example/button-with-icon.tsx
Normal file
11
apps/www/__registry__/default/example/button-with-icon.tsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { Mail } from "lucide-react"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
|
export default function ButtonWithIcon() {
|
||||||
|
return (
|
||||||
|
<Button>
|
||||||
|
<Mail className="mr-2 h-4 w-4" /> Login with Email
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -4,7 +4,7 @@ import * as React from "react"
|
|||||||
|
|
||||||
import { Calendar } from "@/registry/default/ui/calendar"
|
import { Calendar } from "@/registry/default/ui/calendar"
|
||||||
|
|
||||||
export function CalendarDemo() {
|
export default function CalendarDemo() {
|
||||||
const [date, setDate] = React.useState<Date | undefined>(new Date())
|
const [date, setDate] = React.useState<Date | undefined>(new Date())
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -12,7 +12,7 @@ export function CalendarDemo() {
|
|||||||
mode="single"
|
mode="single"
|
||||||
selected={date}
|
selected={date}
|
||||||
onSelect={setDate}
|
onSelect={setDate}
|
||||||
className="rounded-md border shadow"
|
className="rounded-md border"
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
101
apps/www/__registry__/default/example/calendar-form.tsx
Normal file
101
apps/www/__registry__/default/example/calendar-form.tsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||||||
|
import { format } from "date-fns"
|
||||||
|
import { CalendarIcon } from "lucide-react"
|
||||||
|
import { useForm } from "react-hook-form"
|
||||||
|
import { z } from "zod"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import { Calendar } from "@/registry/default/ui/calendar"
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/registry/default/ui/form"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/default/ui/popover"
|
||||||
|
import { toast } from "@/registry/default/ui/use-toast"
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
dob: z.date({
|
||||||
|
required_error: "A date of birth is required.",
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function CalendarForm() {
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
})
|
||||||
|
|
||||||
|
function onSubmit(data: z.infer<typeof FormSchema>) {
|
||||||
|
toast({
|
||||||
|
title: "You submitted the following values:",
|
||||||
|
description: (
|
||||||
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||||
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="dob"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Date of birth</FormLabel>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-[240px] pl-3 text-left font-normal",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{field.value ? (
|
||||||
|
format(field.value, "PPP")
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0" align="start">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={field.value}
|
||||||
|
onSelect={field.onChange}
|
||||||
|
disabled={(date) =>
|
||||||
|
date > new Date() || date < new Date("1900-01-01")
|
||||||
|
}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormDescription>
|
||||||
|
Your date of birth is used to calculate your age.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button type="submit">Submit</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -29,7 +29,7 @@ const notifications = [
|
|||||||
|
|
||||||
type CardProps = React.ComponentProps<typeof Card>
|
type CardProps = React.ComponentProps<typeof Card>
|
||||||
|
|
||||||
export function CardDemo({ className, ...props }: CardProps) {
|
export default function CardDemo({ className, ...props }: CardProps) {
|
||||||
return (
|
return (
|
||||||
<Card className={cn("w-[380px]", className)} {...props}>
|
<Card className={cn("w-[380px]", className)} {...props}>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@@ -70,7 +70,7 @@ export function CardDemo({ className, ...props }: CardProps) {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button className="w-full">
|
<Button className="w-full">
|
||||||
<Check /> Mark all as read
|
<Check className="mr-2 h-4 w-4" /> Mark all as read
|
||||||
</Button>
|
</Button>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
59
apps/www/__registry__/default/example/card-with-form.tsx
Normal file
59
apps/www/__registry__/default/example/card-with-form.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/registry/default/ui/card"
|
||||||
|
import { Input } from "@/registry/default/ui/input"
|
||||||
|
import { Label } from "@/registry/default/ui/label"
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/registry/default/ui/select"
|
||||||
|
|
||||||
|
export default function CardWithForm() {
|
||||||
|
return (
|
||||||
|
<Card className="w-[350px]">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Create project</CardTitle>
|
||||||
|
<CardDescription>Deploy your new project in one-click.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form>
|
||||||
|
<div className="grid w-full items-center gap-4">
|
||||||
|
<div className="flex flex-col space-y-1.5">
|
||||||
|
<Label htmlFor="name">Name</Label>
|
||||||
|
<Input id="name" placeholder="Name of your project" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col space-y-1.5">
|
||||||
|
<Label htmlFor="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 className="flex justify-between">
|
||||||
|
<Button variant="outline">Cancel</Button>
|
||||||
|
<Button>Deploy</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
54
apps/www/__registry__/default/example/carousel-api.tsx
Normal file
54
apps/www/__registry__/default/example/carousel-api.tsx
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/registry/default/ui/card"
|
||||||
|
import {
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselNext,
|
||||||
|
CarouselPrevious,
|
||||||
|
type CarouselApi,
|
||||||
|
} from "@/registry/default/ui/carousel"
|
||||||
|
|
||||||
|
export default function CarouselDApiDemo() {
|
||||||
|
const [api, setApi] = React.useState<CarouselApi>()
|
||||||
|
const [current, setCurrent] = React.useState(0)
|
||||||
|
const [count, setCount] = React.useState(0)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setCount(api.scrollSnapList().length)
|
||||||
|
setCurrent(api.selectedScrollSnap() + 1)
|
||||||
|
|
||||||
|
api.on("select", () => {
|
||||||
|
console.log("current")
|
||||||
|
setCurrent(api.selectedScrollSnap() + 1)
|
||||||
|
})
|
||||||
|
}, [api])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Carousel setApi={setApi} className="w-full max-w-xs">
|
||||||
|
<CarouselContent>
|
||||||
|
{Array.from({ length: 5 }).map((_, index) => (
|
||||||
|
<CarouselItem key={index}>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="flex aspect-square items-center justify-center p-6">
|
||||||
|
<span className="text-4xl font-semibold">{index + 1}</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</CarouselItem>
|
||||||
|
))}
|
||||||
|
</CarouselContent>
|
||||||
|
<CarouselPrevious />
|
||||||
|
<CarouselNext />
|
||||||
|
</Carousel>
|
||||||
|
<div className="py-2 text-center text-sm text-muted-foreground">
|
||||||
|
Slide {current} of {count}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -9,7 +9,7 @@ import {
|
|||||||
CarouselPrevious,
|
CarouselPrevious,
|
||||||
} from "@/registry/default/ui/carousel"
|
} from "@/registry/default/ui/carousel"
|
||||||
|
|
||||||
export function CarouselDemo() {
|
export default function CarouselDemo() {
|
||||||
return (
|
return (
|
||||||
<Carousel className="w-full max-w-xs">
|
<Carousel className="w-full max-w-xs">
|
||||||
<CarouselContent>
|
<CarouselContent>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/registry/default/ui/card"
|
||||||
|
import {
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselNext,
|
||||||
|
CarouselPrevious,
|
||||||
|
} from "@/registry/default/ui/carousel"
|
||||||
|
|
||||||
|
export default function CarouselOrientation() {
|
||||||
|
return (
|
||||||
|
<Carousel
|
||||||
|
opts={{
|
||||||
|
align: "start",
|
||||||
|
}}
|
||||||
|
orientation="vertical"
|
||||||
|
className="w-full max-w-xs"
|
||||||
|
>
|
||||||
|
<CarouselContent className="-mt-1 h-[200px]">
|
||||||
|
{Array.from({ length: 5 }).map((_, index) => (
|
||||||
|
<CarouselItem key={index} className="pt-1 md:basis-1/2">
|
||||||
|
<div className="p-1">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="flex items-center justify-center p-6">
|
||||||
|
<span className="text-3xl font-semibold">{index + 1}</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
))}
|
||||||
|
</CarouselContent>
|
||||||
|
<CarouselPrevious />
|
||||||
|
<CarouselNext />
|
||||||
|
</Carousel>
|
||||||
|
)
|
||||||
|
}
|
||||||
42
apps/www/__registry__/default/example/carousel-plugin.tsx
Normal file
42
apps/www/__registry__/default/example/carousel-plugin.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import Autoplay from "embla-carousel-autoplay"
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/registry/default/ui/card"
|
||||||
|
import {
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselNext,
|
||||||
|
CarouselPrevious,
|
||||||
|
} from "@/registry/default/ui/carousel"
|
||||||
|
|
||||||
|
export default function CarouselPlugin() {
|
||||||
|
const plugin = React.useRef(
|
||||||
|
Autoplay({ delay: 2000, stopOnInteraction: true })
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Carousel
|
||||||
|
plugins={[plugin.current]}
|
||||||
|
className="w-full max-w-xs"
|
||||||
|
onMouseEnter={plugin.current.stop}
|
||||||
|
onMouseLeave={plugin.current.reset}
|
||||||
|
>
|
||||||
|
<CarouselContent>
|
||||||
|
{Array.from({ length: 5 }).map((_, index) => (
|
||||||
|
<CarouselItem key={index}>
|
||||||
|
<div className="p-1">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="flex aspect-square items-center justify-center p-6">
|
||||||
|
<span className="text-4xl font-semibold">{index + 1}</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
))}
|
||||||
|
</CarouselContent>
|
||||||
|
<CarouselPrevious />
|
||||||
|
<CarouselNext />
|
||||||
|
</Carousel>
|
||||||
|
)
|
||||||
|
}
|
||||||
37
apps/www/__registry__/default/example/carousel-size.tsx
Normal file
37
apps/www/__registry__/default/example/carousel-size.tsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/registry/default/ui/card"
|
||||||
|
import {
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselNext,
|
||||||
|
CarouselPrevious,
|
||||||
|
} from "@/registry/default/ui/carousel"
|
||||||
|
|
||||||
|
export default function CarouselSize() {
|
||||||
|
return (
|
||||||
|
<Carousel
|
||||||
|
opts={{
|
||||||
|
align: "start",
|
||||||
|
}}
|
||||||
|
className="w-full max-w-sm"
|
||||||
|
>
|
||||||
|
<CarouselContent>
|
||||||
|
{Array.from({ length: 5 }).map((_, index) => (
|
||||||
|
<CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
|
||||||
|
<div className="p-1">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="flex aspect-square items-center justify-center p-6">
|
||||||
|
<span className="text-3xl font-semibold">{index + 1}</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
))}
|
||||||
|
</CarouselContent>
|
||||||
|
<CarouselPrevious />
|
||||||
|
<CarouselNext />
|
||||||
|
</Carousel>
|
||||||
|
)
|
||||||
|
}
|
||||||
32
apps/www/__registry__/default/example/carousel-spacing.tsx
Normal file
32
apps/www/__registry__/default/example/carousel-spacing.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/registry/default/ui/card"
|
||||||
|
import {
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselNext,
|
||||||
|
CarouselPrevious,
|
||||||
|
} from "@/registry/default/ui/carousel"
|
||||||
|
|
||||||
|
export default function CarouselSpacing() {
|
||||||
|
return (
|
||||||
|
<Carousel className="w-full max-w-sm">
|
||||||
|
<CarouselContent className="-ml-1">
|
||||||
|
{Array.from({ length: 5 }).map((_, index) => (
|
||||||
|
<CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||||
|
<div className="p-1">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="flex aspect-square items-center justify-center p-6">
|
||||||
|
<span className="text-2xl font-semibold">{index + 1}</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
))}
|
||||||
|
</CarouselContent>
|
||||||
|
<CarouselPrevious />
|
||||||
|
<CarouselNext />
|
||||||
|
</Carousel>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { Checkbox } from "@/registry/default/ui/checkbox"
|
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||||
|
|
||||||
export function CheckboxDemo() {
|
export default function CheckboxDemo() {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Checkbox id="terms" />
|
<Checkbox id="terms" />
|
||||||
15
apps/www/__registry__/default/example/checkbox-disabled.tsx
Normal file
15
apps/www/__registry__/default/example/checkbox-disabled.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||||
|
|
||||||
|
export default function CheckboxDisabled() {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox id="terms2" disabled />
|
||||||
|
<label
|
||||||
|
htmlFor="terms2"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Accept terms and conditions
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
127
apps/www/__registry__/default/example/checkbox-form-multiple.tsx
Normal file
127
apps/www/__registry__/default/example/checkbox-form-multiple.tsx
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||||||
|
import { useForm } from "react-hook-form"
|
||||||
|
import { z } from "zod"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/registry/default/ui/form"
|
||||||
|
import { toast } from "@/registry/default/ui/use-toast"
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
id: "recents",
|
||||||
|
label: "Recents",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "home",
|
||||||
|
label: "Home",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "applications",
|
||||||
|
label: "Applications",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "desktop",
|
||||||
|
label: "Desktop",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "downloads",
|
||||||
|
label: "Downloads",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "documents",
|
||||||
|
label: "Documents",
|
||||||
|
},
|
||||||
|
] as const
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
items: z.array(z.string()).refine((value) => value.some((item) => item), {
|
||||||
|
message: "You have to select at least one item.",
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function CheckboxReactHookFormMultiple() {
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
items: ["recents", "home"],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
function onSubmit(data: z.infer<typeof FormSchema>) {
|
||||||
|
toast({
|
||||||
|
title: "You submitted the following values:",
|
||||||
|
description: (
|
||||||
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||||
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="items"
|
||||||
|
render={() => (
|
||||||
|
<FormItem>
|
||||||
|
<div className="mb-4">
|
||||||
|
<FormLabel className="text-base">Sidebar</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
Select the items you want to display in the sidebar.
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
{items.map((item) => (
|
||||||
|
<FormField
|
||||||
|
key={item.id}
|
||||||
|
control={form.control}
|
||||||
|
name="items"
|
||||||
|
render={({ field }) => {
|
||||||
|
return (
|
||||||
|
<FormItem
|
||||||
|
key={item.id}
|
||||||
|
className="flex flex-row items-start space-x-3 space-y-0"
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={field.value?.includes(item.id)}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
return checked
|
||||||
|
? field.onChange([...field.value, item.id])
|
||||||
|
: field.onChange(
|
||||||
|
field.value?.filter(
|
||||||
|
(value) => value !== item.id
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormLabel className="font-normal">
|
||||||
|
{item.label}
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button type="submit">Submit</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import Link from "next/link"
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||||||
|
import { useForm } from "react-hook-form"
|
||||||
|
import { z } from "zod"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/registry/default/ui/form"
|
||||||
|
import { toast } from "@/registry/default/ui/use-toast"
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
mobile: z.boolean().default(false).optional(),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function CheckboxReactHookFormSingle() {
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
mobile: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
function onSubmit(data: z.infer<typeof FormSchema>) {
|
||||||
|
toast({
|
||||||
|
title: "You submitted the following values:",
|
||||||
|
description: (
|
||||||
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||||
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="mobile"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<div className="space-y-1 leading-none">
|
||||||
|
<FormLabel>
|
||||||
|
Use different settings for my mobile devices
|
||||||
|
</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
You can manage your mobile notifications in the{" "}
|
||||||
|
<Link href="/examples/forms">mobile settings</Link> page.
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button type="submit">Submit</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
22
apps/www/__registry__/default/example/checkbox-with-text.tsx
Normal file
22
apps/www/__registry__/default/example/checkbox-with-text.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||||
|
|
||||||
|
export default function CheckboxWithText() {
|
||||||
|
return (
|
||||||
|
<div className="items-top flex space-x-2">
|
||||||
|
<Checkbox id="terms1" />
|
||||||
|
<div className="grid gap-1.5 leading-none">
|
||||||
|
<label
|
||||||
|
htmlFor="terms1"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Accept terms and conditions
|
||||||
|
</label>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
You agree to our Terms of Service and Privacy Policy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import { ChevronsUpDown } from "lucide-react"
|
import { ChevronsUpDown, Plus, X } from "lucide-react"
|
||||||
|
|
||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
import {
|
import {
|
||||||
@@ -10,7 +10,7 @@ import {
|
|||||||
CollapsibleTrigger,
|
CollapsibleTrigger,
|
||||||
} from "@/registry/default/ui/collapsible"
|
} from "@/registry/default/ui/collapsible"
|
||||||
|
|
||||||
export function CollapsibleDemo() {
|
export default function CollapsibleDemo() {
|
||||||
const [isOpen, setIsOpen] = React.useState(false)
|
const [isOpen, setIsOpen] = React.useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -24,20 +24,20 @@ export function CollapsibleDemo() {
|
|||||||
@peduarte starred 3 repositories
|
@peduarte starred 3 repositories
|
||||||
</h4>
|
</h4>
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
<Button variant="ghost" size="sm">
|
<Button variant="ghost" size="sm" className="w-9 p-0">
|
||||||
<ChevronsUpDown className="h-4 w-4" />
|
<ChevronsUpDown className="h-4 w-4" />
|
||||||
<span className="sr-only">Toggle</span>
|
<span className="sr-only">Toggle</span>
|
||||||
</Button>
|
</Button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
|
<div className="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
@radix-ui/primitives
|
@radix-ui/primitives
|
||||||
</div>
|
</div>
|
||||||
<CollapsibleContent className="space-y-2">
|
<CollapsibleContent className="space-y-2">
|
||||||
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
|
<div className="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
@radix-ui/colors
|
@radix-ui/colors
|
||||||
</div>
|
</div>
|
||||||
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
|
<div className="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
@stitches/react
|
@stitches/react
|
||||||
</div>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
@@ -11,7 +11,6 @@ import {
|
|||||||
CommandGroup,
|
CommandGroup,
|
||||||
CommandInput,
|
CommandInput,
|
||||||
CommandItem,
|
CommandItem,
|
||||||
CommandList,
|
|
||||||
} from "@/registry/default/ui/command"
|
} from "@/registry/default/ui/command"
|
||||||
import {
|
import {
|
||||||
Popover,
|
Popover,
|
||||||
@@ -42,7 +41,7 @@ const frameworks = [
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
export function ComboboxDemo() {
|
export default function ComboboxDemo() {
|
||||||
const [open, setOpen] = React.useState(false)
|
const [open, setOpen] = React.useState(false)
|
||||||
const [value, setValue] = React.useState("")
|
const [value, setValue] = React.useState("")
|
||||||
|
|
||||||
@@ -58,35 +57,33 @@ export function ComboboxDemo() {
|
|||||||
{value
|
{value
|
||||||
? frameworks.find((framework) => framework.value === value)?.label
|
? frameworks.find((framework) => framework.value === value)?.label
|
||||||
: "Select framework..."}
|
: "Select framework..."}
|
||||||
<ChevronsUpDown className="opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[200px] p-0">
|
<PopoverContent className="w-[200px] p-0">
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search framework..." className="h-9" />
|
<CommandInput placeholder="Search framework..." />
|
||||||
<CommandList>
|
<CommandEmpty>No framework found.</CommandEmpty>
|
||||||
<CommandEmpty>No framework found.</CommandEmpty>
|
<CommandGroup>
|
||||||
<CommandGroup>
|
{frameworks.map((framework) => (
|
||||||
{frameworks.map((framework) => (
|
<CommandItem
|
||||||
<CommandItem
|
key={framework.value}
|
||||||
key={framework.value}
|
value={framework.value}
|
||||||
value={framework.value}
|
onSelect={(currentValue) => {
|
||||||
onSelect={(currentValue) => {
|
setValue(currentValue === value ? "" : currentValue)
|
||||||
setValue(currentValue === value ? "" : currentValue)
|
setOpen(false)
|
||||||
setOpen(false)
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<Check
|
||||||
{framework.label}
|
className={cn(
|
||||||
<Check
|
"mr-2 h-4 w-4",
|
||||||
className={cn(
|
value === framework.value ? "opacity-100" : "opacity-0"
|
||||||
"ml-auto",
|
)}
|
||||||
value === framework.value ? "opacity-100" : "opacity-0"
|
/>
|
||||||
)}
|
{framework.label}
|
||||||
/>
|
</CommandItem>
|
||||||
</CommandItem>
|
))}
|
||||||
))}
|
</CommandGroup>
|
||||||
</CommandGroup>
|
|
||||||
</CommandList>
|
|
||||||
</Command>
|
</Command>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
111
apps/www/__registry__/default/example/combobox-dropdown-menu.tsx
Normal file
111
apps/www/__registry__/default/example/combobox-dropdown-menu.tsx
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { Calendar, MoreHorizontal, Tags, Trash, User } from "lucide-react"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/registry/default/ui/command"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/registry/default/ui/dropdown-menu"
|
||||||
|
|
||||||
|
const labels = [
|
||||||
|
"feature",
|
||||||
|
"bug",
|
||||||
|
"enhancement",
|
||||||
|
"documentation",
|
||||||
|
"design",
|
||||||
|
"question",
|
||||||
|
"maintenance",
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function ComboboxDropdownMenu() {
|
||||||
|
const [label, setLabel] = React.useState("feature")
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
|
||||||
|
<p className="text-sm font-medium leading-none">
|
||||||
|
<span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
<span className="text-muted-foreground">Create a new project</span>
|
||||||
|
</p>
|
||||||
|
<DropdownMenu open={open} onOpenChange={setOpen}>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="sm">
|
||||||
|
<MoreHorizontal />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-[200px]">
|
||||||
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||||
|
<DropdownMenuGroup>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<User className="mr-2 h-4 w-4" />
|
||||||
|
Assign to...
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Calendar className="mr-2 h-4 w-4" />
|
||||||
|
Set due date...
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuSub>
|
||||||
|
<DropdownMenuSubTrigger>
|
||||||
|
<Tags className="mr-2 h-4 w-4" />
|
||||||
|
Apply label
|
||||||
|
</DropdownMenuSubTrigger>
|
||||||
|
<DropdownMenuSubContent className="p-0">
|
||||||
|
<Command>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Filter label..."
|
||||||
|
autoFocus={true}
|
||||||
|
/>
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No label found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{labels.map((label) => (
|
||||||
|
<CommandItem
|
||||||
|
key={label}
|
||||||
|
value={label}
|
||||||
|
onSelect={(value) => {
|
||||||
|
setLabel(value)
|
||||||
|
setOpen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</DropdownMenuSubContent>
|
||||||
|
</DropdownMenuSub>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem className="text-red-600">
|
||||||
|
<Trash className="mr-2 h-4 w-4" />
|
||||||
|
Delete
|
||||||
|
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
135
apps/www/__registry__/default/example/combobox-form.tsx
Normal file
135
apps/www/__registry__/default/example/combobox-form.tsx
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||||||
|
import { Check, ChevronsUpDown } from "lucide-react"
|
||||||
|
import { useForm } from "react-hook-form"
|
||||||
|
import { z } from "zod"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
} from "@/registry/default/ui/command"
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/registry/default/ui/form"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/default/ui/popover"
|
||||||
|
import { toast } from "@/registry/default/ui/use-toast"
|
||||||
|
|
||||||
|
const languages = [
|
||||||
|
{ label: "English", value: "en" },
|
||||||
|
{ label: "French", value: "fr" },
|
||||||
|
{ label: "German", value: "de" },
|
||||||
|
{ label: "Spanish", value: "es" },
|
||||||
|
{ label: "Portuguese", value: "pt" },
|
||||||
|
{ label: "Russian", value: "ru" },
|
||||||
|
{ label: "Japanese", value: "ja" },
|
||||||
|
{ label: "Korean", value: "ko" },
|
||||||
|
{ label: "Chinese", value: "zh" },
|
||||||
|
] as const
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
language: z.string({
|
||||||
|
required_error: "Please select a language.",
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function ComboboxForm() {
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
})
|
||||||
|
|
||||||
|
function onSubmit(data: z.infer<typeof FormSchema>) {
|
||||||
|
toast({
|
||||||
|
title: "You submitted the following values:",
|
||||||
|
description: (
|
||||||
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||||
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="language"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Language</FormLabel>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
className={cn(
|
||||||
|
"w-[200px] justify-between",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{field.value
|
||||||
|
? languages.find(
|
||||||
|
(language) => language.value === field.value
|
||||||
|
)?.label
|
||||||
|
: "Select language"}
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[200px] p-0">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Search language..." />
|
||||||
|
<CommandEmpty>No language found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{languages.map((language) => (
|
||||||
|
<CommandItem
|
||||||
|
value={language.label}
|
||||||
|
key={language.value}
|
||||||
|
onSelect={() => {
|
||||||
|
form.setValue("language", language.value)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
language.value === field.value
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{language.label}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormDescription>
|
||||||
|
This is the language that will be used in the dashboard.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button type="submit">Submit</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
125
apps/www/__registry__/default/example/combobox-popover.tsx
Normal file
125
apps/www/__registry__/default/example/combobox-popover.tsx
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import {
|
||||||
|
ArrowUpCircle,
|
||||||
|
CheckCircle2,
|
||||||
|
Circle,
|
||||||
|
HelpCircle,
|
||||||
|
LucideIcon,
|
||||||
|
XCircle,
|
||||||
|
} from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/registry/default/ui/command"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/default/ui/popover"
|
||||||
|
|
||||||
|
type Status = {
|
||||||
|
value: string
|
||||||
|
label: string
|
||||||
|
icon: LucideIcon
|
||||||
|
}
|
||||||
|
|
||||||
|
const statuses: Status[] = [
|
||||||
|
{
|
||||||
|
value: "backlog",
|
||||||
|
label: "Backlog",
|
||||||
|
icon: HelpCircle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "todo",
|
||||||
|
label: "Todo",
|
||||||
|
icon: Circle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "in progress",
|
||||||
|
label: "In Progress",
|
||||||
|
icon: ArrowUpCircle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "done",
|
||||||
|
label: "Done",
|
||||||
|
icon: CheckCircle2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "canceled",
|
||||||
|
label: "Canceled",
|
||||||
|
icon: XCircle,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function ComboboxPopover() {
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
|
||||||
|
null
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<p className="text-sm text-muted-foreground">Status</p>
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="w-[150px] justify-start"
|
||||||
|
>
|
||||||
|
{selectedStatus ? (
|
||||||
|
<>
|
||||||
|
<selectedStatus.icon className="mr-2 h-4 w-4 shrink-0" />
|
||||||
|
{selectedStatus.label}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>+ Set status</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="p-0" side="right" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Change status..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{statuses.map((status) => (
|
||||||
|
<CommandItem
|
||||||
|
key={status.value}
|
||||||
|
value={status.value}
|
||||||
|
onSelect={(value) => {
|
||||||
|
setSelectedStatus(
|
||||||
|
statuses.find((priority) => priority.value === value) ||
|
||||||
|
null
|
||||||
|
)
|
||||||
|
setOpen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<status.icon
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
status.value === selectedStatus?.value
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-40"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span>{status.label}</span>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
123
apps/www/__registry__/default/example/combobox-responsive.tsx
Normal file
123
apps/www/__registry__/default/example/combobox-responsive.tsx
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { useMediaQuery } from "@/hooks/use-media-query"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/registry/default/ui/command"
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from "@/registry/default/ui/drawer"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/default/ui/popover"
|
||||||
|
|
||||||
|
type Status = {
|
||||||
|
value: string
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const statuses: Status[] = [
|
||||||
|
{
|
||||||
|
value: "backlog",
|
||||||
|
label: "Backlog",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "todo",
|
||||||
|
label: "Todo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "in progress",
|
||||||
|
label: "In Progress",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "done",
|
||||||
|
label: "Done",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "canceled",
|
||||||
|
label: "Canceled",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function ComboBoxResponsive() {
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
const isDesktop = useMediaQuery("(min-width: 768px)")
|
||||||
|
const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
|
||||||
|
null
|
||||||
|
)
|
||||||
|
|
||||||
|
if (isDesktop) {
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button variant="outline" className="w-[150px] justify-start">
|
||||||
|
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[200px] p-0" align="start">
|
||||||
|
<StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer open={open} onOpenChange={setOpen}>
|
||||||
|
<DrawerTrigger asChild>
|
||||||
|
<Button variant="outline" className="w-[150px] justify-start">
|
||||||
|
{selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
|
||||||
|
</Button>
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerContent>
|
||||||
|
<div className="mt-4 border-t">
|
||||||
|
<StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
|
||||||
|
</div>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatusList({
|
||||||
|
setOpen,
|
||||||
|
setSelectedStatus,
|
||||||
|
}: {
|
||||||
|
setOpen: (open: boolean) => void
|
||||||
|
setSelectedStatus: (status: Status | null) => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Filter status..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{statuses.map((status) => (
|
||||||
|
<CommandItem
|
||||||
|
key={status.value}
|
||||||
|
value={status.value}
|
||||||
|
onSelect={(value) => {
|
||||||
|
setSelectedStatus(
|
||||||
|
statuses.find((priority) => priority.value === value) || null
|
||||||
|
)
|
||||||
|
setOpen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status.label}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -18,40 +18,40 @@ import {
|
|||||||
CommandShortcut,
|
CommandShortcut,
|
||||||
} from "@/registry/default/ui/command"
|
} from "@/registry/default/ui/command"
|
||||||
|
|
||||||
export function CommandDemo() {
|
export default function CommandDemo() {
|
||||||
return (
|
return (
|
||||||
<Command className="rounded-lg border shadow-md md:min-w-[450px]">
|
<Command className="rounded-lg border shadow-md">
|
||||||
<CommandInput placeholder="Type a command or search..." />
|
<CommandInput placeholder="Type a command or search..." />
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>No results found.</CommandEmpty>
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
<CommandGroup heading="Suggestions">
|
<CommandGroup heading="Suggestions">
|
||||||
<CommandItem>
|
<CommandItem>
|
||||||
<Calendar />
|
<Calendar className="mr-2 h-4 w-4" />
|
||||||
<span>Calendar</span>
|
<span>Calendar</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem>
|
<CommandItem>
|
||||||
<Smile />
|
<Smile className="mr-2 h-4 w-4" />
|
||||||
<span>Search Emoji</span>
|
<span>Search Emoji</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem disabled>
|
<CommandItem>
|
||||||
<Calculator />
|
<Calculator className="mr-2 h-4 w-4" />
|
||||||
<span>Calculator</span>
|
<span>Calculator</span>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
<CommandSeparator />
|
<CommandSeparator />
|
||||||
<CommandGroup heading="Settings">
|
<CommandGroup heading="Settings">
|
||||||
<CommandItem>
|
<CommandItem>
|
||||||
<User />
|
<User className="mr-2 h-4 w-4" />
|
||||||
<span>Profile</span>
|
<span>Profile</span>
|
||||||
<CommandShortcut>⌘P</CommandShortcut>
|
<CommandShortcut>⌘P</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem>
|
<CommandItem>
|
||||||
<CreditCard />
|
<CreditCard className="mr-2 h-4 w-4" />
|
||||||
<span>Billing</span>
|
<span>Billing</span>
|
||||||
<CommandShortcut>⌘B</CommandShortcut>
|
<CommandShortcut>⌘B</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
<CommandItem>
|
<CommandItem>
|
||||||
<Settings />
|
<Settings className="mr-2 h-4 w-4" />
|
||||||
<span>Settings</span>
|
<span>Settings</span>
|
||||||
<CommandShortcut>⌘S</CommandShortcut>
|
<CommandShortcut>⌘S</CommandShortcut>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
87
apps/www/__registry__/default/example/command-dialog.tsx
Normal file
87
apps/www/__registry__/default/example/command-dialog.tsx
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import {
|
||||||
|
Calculator,
|
||||||
|
Calendar,
|
||||||
|
CreditCard,
|
||||||
|
Settings,
|
||||||
|
Smile,
|
||||||
|
User,
|
||||||
|
} from "lucide-react"
|
||||||
|
|
||||||
|
import {
|
||||||
|
CommandDialog,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
CommandSeparator,
|
||||||
|
CommandShortcut,
|
||||||
|
} from "@/registry/default/ui/command"
|
||||||
|
|
||||||
|
export default function CommandDialogDemo() {
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const down = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
|
||||||
|
e.preventDefault()
|
||||||
|
setOpen((open) => !open)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("keydown", down)
|
||||||
|
return () => document.removeEventListener("keydown", down)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Press{" "}
|
||||||
|
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
|
||||||
|
<span className="text-xs">⌘</span>J
|
||||||
|
</kbd>
|
||||||
|
</p>
|
||||||
|
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||||
|
<CommandInput placeholder="Type a command or search..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup heading="Suggestions">
|
||||||
|
<CommandItem>
|
||||||
|
<Calendar className="mr-2 h-4 w-4" />
|
||||||
|
<span>Calendar</span>
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem>
|
||||||
|
<Smile className="mr-2 h-4 w-4" />
|
||||||
|
<span>Search Emoji</span>
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem>
|
||||||
|
<Calculator className="mr-2 h-4 w-4" />
|
||||||
|
<span>Calculator</span>
|
||||||
|
</CommandItem>
|
||||||
|
</CommandGroup>
|
||||||
|
<CommandSeparator />
|
||||||
|
<CommandGroup heading="Settings">
|
||||||
|
<CommandItem>
|
||||||
|
<User className="mr-2 h-4 w-4" />
|
||||||
|
<span>Profile</span>
|
||||||
|
<CommandShortcut>⌘P</CommandShortcut>
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem>
|
||||||
|
<CreditCard className="mr-2 h-4 w-4" />
|
||||||
|
<span>Billing</span>
|
||||||
|
<CommandShortcut>⌘B</CommandShortcut>
|
||||||
|
</CommandItem>
|
||||||
|
<CommandItem>
|
||||||
|
<Settings className="mr-2 h-4 w-4" />
|
||||||
|
<span>Settings</span>
|
||||||
|
<CommandShortcut>⌘S</CommandShortcut>
|
||||||
|
</CommandItem>
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</CommandDialog>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -14,7 +14,7 @@ import {
|
|||||||
ContextMenuTrigger,
|
ContextMenuTrigger,
|
||||||
} from "@/registry/default/ui/context-menu"
|
} from "@/registry/default/ui/context-menu"
|
||||||
|
|
||||||
export function ContextMenuDemo() {
|
export default function ContextMenuDemo() {
|
||||||
return (
|
return (
|
||||||
<ContextMenu>
|
<ContextMenu>
|
||||||
<ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
|
<ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
|
||||||
312
apps/www/__registry__/default/example/data-table-demo.tsx
Normal file
312
apps/www/__registry__/default/example/data-table-demo.tsx
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import {
|
||||||
|
ColumnDef,
|
||||||
|
ColumnFiltersState,
|
||||||
|
SortingState,
|
||||||
|
VisibilityState,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table"
|
||||||
|
import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
|
||||||
|
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/registry/default/ui/dropdown-menu"
|
||||||
|
import { Input } from "@/registry/default/ui/input"
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/registry/default/ui/table"
|
||||||
|
|
||||||
|
const data: Payment[] = [
|
||||||
|
{
|
||||||
|
id: "m5gr84i9",
|
||||||
|
amount: 316,
|
||||||
|
status: "success",
|
||||||
|
email: "ken99@yahoo.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3u1reuv4",
|
||||||
|
amount: 242,
|
||||||
|
status: "success",
|
||||||
|
email: "Abe45@gmail.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "derv1ws0",
|
||||||
|
amount: 837,
|
||||||
|
status: "processing",
|
||||||
|
email: "Monserrat44@gmail.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5kma53ae",
|
||||||
|
amount: 874,
|
||||||
|
status: "success",
|
||||||
|
email: "Silas22@gmail.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "bhqecj4p",
|
||||||
|
amount: 721,
|
||||||
|
status: "failed",
|
||||||
|
email: "carmella@hotmail.com",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export type Payment = {
|
||||||
|
id: string
|
||||||
|
amount: number
|
||||||
|
status: "pending" | "processing" | "success" | "failed"
|
||||||
|
email: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const columns: ColumnDef<Payment>[] = [
|
||||||
|
{
|
||||||
|
id: "select",
|
||||||
|
header: ({ table }) => (
|
||||||
|
<Checkbox
|
||||||
|
checked={
|
||||||
|
table.getIsAllPageRowsSelected() ||
|
||||||
|
(table.getIsSomePageRowsSelected() && "indeterminate")
|
||||||
|
}
|
||||||
|
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||||
|
aria-label="Select all"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Checkbox
|
||||||
|
checked={row.getIsSelected()}
|
||||||
|
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||||
|
aria-label="Select row"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
enableSorting: false,
|
||||||
|
enableHiding: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "status",
|
||||||
|
header: "Status",
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="capitalize">{row.getValue("status")}</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "email",
|
||||||
|
header: ({ column }) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "amount",
|
||||||
|
header: () => <div className="text-right">Amount</div>,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const amount = parseFloat(row.getValue("amount"))
|
||||||
|
|
||||||
|
// Format the amount as a dollar amount
|
||||||
|
const formatted = new Intl.NumberFormat("en-US", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "USD",
|
||||||
|
}).format(amount)
|
||||||
|
|
||||||
|
return <div className="text-right font-medium">{formatted}</div>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
enableHiding: false,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const payment = row.original
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
|
<span className="sr-only">Open menu</span>
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => navigator.clipboard.writeText(payment.id)}
|
||||||
|
>
|
||||||
|
Copy payment ID
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem>View customer</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>View payment details</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function DataTableDemo() {
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([])
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
const [columnVisibility, setColumnVisibility] =
|
||||||
|
React.useState<VisibilityState>({})
|
||||||
|
const [rowSelection, setRowSelection] = React.useState({})
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data,
|
||||||
|
columns,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
onColumnVisibilityChange: setColumnVisibility,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnFilters,
|
||||||
|
columnVisibility,
|
||||||
|
rowSelection,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex items-center py-4">
|
||||||
|
<Input
|
||||||
|
placeholder="Filter emails..."
|
||||||
|
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
|
||||||
|
onChange={(event) =>
|
||||||
|
table.getColumn("email")?.setFilterValue(event.target.value)
|
||||||
|
}
|
||||||
|
className="max-w-sm"
|
||||||
|
/>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" className="ml-auto">
|
||||||
|
Columns <ChevronDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
{table
|
||||||
|
.getAllColumns()
|
||||||
|
.filter((column) => column.getCanHide())
|
||||||
|
.map((column) => {
|
||||||
|
return (
|
||||||
|
<DropdownMenuCheckboxItem
|
||||||
|
key={column.id}
|
||||||
|
className="capitalize"
|
||||||
|
checked={column.getIsVisible()}
|
||||||
|
onCheckedChange={(value) =>
|
||||||
|
column.toggleVisibility(!!value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{column.id}
|
||||||
|
</DropdownMenuCheckboxItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map((header) => {
|
||||||
|
return (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext()
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(
|
||||||
|
cell.column.columnDef.cell,
|
||||||
|
cell.getContext()
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={columns.length}
|
||||||
|
className="h-24 text-center"
|
||||||
|
>
|
||||||
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-end space-x-2 py-4">
|
||||||
|
<div className="flex-1 text-sm text-muted-foreground">
|
||||||
|
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
||||||
|
{table.getFilteredRowModel().rows.length} row(s) selected.
|
||||||
|
</div>
|
||||||
|
<div className="space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.previousPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.nextPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import { format } from "date-fns"
|
import { format } from "date-fns"
|
||||||
import { CalendarIcon } from "lucide-react"
|
import { Calendar as CalendarIcon } from "lucide-react"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
import { Button } from "@/registry/default/ui/button"
|
import { Button } from "@/registry/default/ui/button"
|
||||||
@@ -13,7 +13,7 @@ import {
|
|||||||
PopoverTrigger,
|
PopoverTrigger,
|
||||||
} from "@/registry/default/ui/popover"
|
} from "@/registry/default/ui/popover"
|
||||||
|
|
||||||
export function DatePickerDemo() {
|
export default function DatePickerDemo() {
|
||||||
const [date, setDate] = React.useState<Date>()
|
const [date, setDate] = React.useState<Date>()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -22,15 +22,15 @@ export function DatePickerDemo() {
|
|||||||
<Button
|
<Button
|
||||||
variant={"outline"}
|
variant={"outline"}
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-[240px] justify-start text-left font-normal",
|
"w-[280px] justify-start text-left font-normal",
|
||||||
!date && "text-muted-foreground"
|
!date && "text-muted-foreground"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<CalendarIcon />
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
{date ? format(date, "PPP") : <span>Pick a date</span>}
|
{date ? format(date, "PPP") : <span>Pick a date</span>}
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-auto p-0" align="start">
|
<PopoverContent className="w-auto p-0">
|
||||||
<Calendar
|
<Calendar
|
||||||
mode="single"
|
mode="single"
|
||||||
selected={date}
|
selected={date}
|
||||||
101
apps/www/__registry__/default/example/date-picker-form.tsx
Normal file
101
apps/www/__registry__/default/example/date-picker-form.tsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||||||
|
import { format } from "date-fns"
|
||||||
|
import { CalendarIcon } from "lucide-react"
|
||||||
|
import { useForm } from "react-hook-form"
|
||||||
|
import { z } from "zod"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import { Calendar } from "@/registry/default/ui/calendar"
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/registry/default/ui/form"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/default/ui/popover"
|
||||||
|
import { toast } from "@/registry/default/ui/use-toast"
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
dob: z.date({
|
||||||
|
required_error: "A date of birth is required.",
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function DatePickerForm() {
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
})
|
||||||
|
|
||||||
|
function onSubmit(data: z.infer<typeof FormSchema>) {
|
||||||
|
toast({
|
||||||
|
title: "You submitted the following values:",
|
||||||
|
description: (
|
||||||
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||||
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="dob"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Date of birth</FormLabel>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-[240px] pl-3 text-left font-normal",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{field.value ? (
|
||||||
|
format(field.value, "PPP")
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0" align="start">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={field.value}
|
||||||
|
onSelect={field.onChange}
|
||||||
|
disabled={(date) =>
|
||||||
|
date > new Date() || date < new Date("1900-01-01")
|
||||||
|
}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormDescription>
|
||||||
|
Your date of birth is used to calculate your age.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button type="submit">Submit</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { addDays, format } from "date-fns"
|
||||||
|
import { Calendar as CalendarIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import { Calendar } from "@/registry/default/ui/calendar"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/default/ui/popover"
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/registry/default/ui/select"
|
||||||
|
|
||||||
|
export default function DatePickerWithPresets() {
|
||||||
|
const [date, setDate] = React.useState<Date>()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-[280px] justify-start text-left font-normal",
|
||||||
|
!date && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{date ? format(date, "PPP") : <span>Pick a date</span>}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="flex w-auto flex-col space-y-2 p-2">
|
||||||
|
<Select
|
||||||
|
onValueChange={(value) =>
|
||||||
|
setDate(addDays(new Date(), parseInt(value)))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent position="popper">
|
||||||
|
<SelectItem value="0">Today</SelectItem>
|
||||||
|
<SelectItem value="1">Tomorrow</SelectItem>
|
||||||
|
<SelectItem value="3">In 3 days</SelectItem>
|
||||||
|
<SelectItem value="7">In a week</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<div className="rounded-md border">
|
||||||
|
<Calendar mode="single" selected={date} onSelect={setDate} />
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { addDays, format } from "date-fns"
|
||||||
|
import { Calendar as CalendarIcon } from "lucide-react"
|
||||||
|
import { DateRange } from "react-day-picker"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
import { Calendar } from "@/registry/default/ui/calendar"
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/registry/default/ui/popover"
|
||||||
|
|
||||||
|
export default function DatePickerWithRange({
|
||||||
|
className,
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
const [date, setDate] = React.useState<DateRange | undefined>({
|
||||||
|
from: new Date(2022, 0, 20),
|
||||||
|
to: addDays(new Date(2022, 0, 20), 20),
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("grid gap-2", className)}>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
id="date"
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-[300px] justify-start text-left font-normal",
|
||||||
|
!date && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{date?.from ? (
|
||||||
|
date.to ? (
|
||||||
|
<>
|
||||||
|
{format(date.from, "LLL dd, y")} -{" "}
|
||||||
|
{format(date.to, "LLL dd, y")}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
format(date.from, "LLL dd, y")
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<span>Pick a date</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0" align="start">
|
||||||
|
<Calendar
|
||||||
|
initialFocus
|
||||||
|
mode="range"
|
||||||
|
defaultMonth={date?.from}
|
||||||
|
selected={date}
|
||||||
|
onSelect={setDate}
|
||||||
|
numberOfMonths={2}
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user