mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-25 13:46:07 +00:00
feat: add data-table dialog and drawer
This commit is contained in:
shadcn
@@ -8,9 +8,10 @@ links:
|
||||
---
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
styleName="radix-nova"
|
||||
name="data-table-demo"
|
||||
className="[&_.preview]:items-start"
|
||||
align="start"
|
||||
previewClassName="items-start h-[28rem] px-4 md:px-8"
|
||||
/>
|
||||
|
||||
## Introduction
|
||||
@@ -863,7 +864,7 @@ Add pagination controls to your table including page size and selection count.
|
||||
|
||||
<ComponentSource
|
||||
src="/app/(app)/examples/tasks/components/data-table-pagination.tsx"
|
||||
styleName="base-nova"
|
||||
styleName="radix-nova"
|
||||
/>
|
||||
|
||||
```tsx
|
||||
@@ -876,7 +877,7 @@ A component to toggle column visibility.
|
||||
|
||||
<ComponentSource
|
||||
src="/app/(app)/examples/tasks/components/data-table-view-options.tsx"
|
||||
styleName="base-nova"
|
||||
styleName="radix-nova"
|
||||
/>
|
||||
|
||||
```tsx
|
||||
|
||||
@@ -87,40 +87,30 @@ import {
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom close button
|
||||
### Custom Close Button
|
||||
|
||||
Replace the default close control with your own button.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="dialog-close-button" />
|
||||
|
||||
## Notes
|
||||
### No Close Button
|
||||
|
||||
To use the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
|
||||
`Dropdown Menu` component in the `Dialog` component.
|
||||
Use `showCloseButton={false}` to hide the close button.
|
||||
|
||||
```tsx showLineNumbers title="components/example-dialog-context-menu.tsx" {1, 26}
|
||||
<Dialog>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger>Right click</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem>Open</ContextMenuItem>
|
||||
<ContextMenuItem>Download</ContextMenuItem>
|
||||
<DialogTrigger asChild>
|
||||
<ContextMenuItem>
|
||||
<span>Delete</span>
|
||||
</ContextMenuItem>
|
||||
</DialogTrigger>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you absolutely sure?</DialogTitle>
|
||||
<DialogDescription>
|
||||
This action cannot be undone. Are you sure you want to permanently
|
||||
delete this file from our servers?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button type="submit">Confirm</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
<ComponentPreview styleName="base-nova" name="dialog-no-close-button" />
|
||||
|
||||
### Sticky Footer
|
||||
|
||||
Keep actions visible while the content scrolls.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="dialog-sticky-footer" />
|
||||
|
||||
### Scrollable Content
|
||||
|
||||
Long content can scroll while the header stays in view.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="dialog-scrollable-content" />
|
||||
|
||||
## API Reference
|
||||
|
||||
See the [Base UI](https://base-ui.com/react/components/dialog#api-reference) documentation for more information.
|
||||
|
||||
@@ -7,11 +7,7 @@ links:
|
||||
doc: https://vaul.emilkowal.ski/getting-started
|
||||
---
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="drawer-demo"
|
||||
description="A drawer component."
|
||||
/>
|
||||
<ComponentPreview styleName="base-nova" name="drawer-demo" />
|
||||
|
||||
## About
|
||||
|
||||
@@ -94,8 +90,24 @@ import {
|
||||
|
||||
## Examples
|
||||
|
||||
### Scrollable Content
|
||||
|
||||
Keep actions visible while the content scrolls.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="drawer-scrollable-content" />
|
||||
|
||||
### Sides
|
||||
|
||||
Use the `direction` prop to set the side of the drawer. Available options are `top`, `right`, `bottom`, and `left`.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="drawer-sides" />
|
||||
|
||||
### Responsive Dialog
|
||||
|
||||
You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="drawer-dialog" />
|
||||
|
||||
## API Reference
|
||||
|
||||
See the [Vaul documentation](https://vaul.emilkowal.ski/components/drawer) for the full API reference.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Data Table
|
||||
description: Powerful table and datagrids built using TanStack Table.
|
||||
base: radix
|
||||
base: base
|
||||
component: true
|
||||
links:
|
||||
doc: https://tanstack.com/table/v8/docs/introduction
|
||||
@@ -10,7 +10,8 @@ links:
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="data-table-demo"
|
||||
className="[&_.preview]:items-start"
|
||||
align="start"
|
||||
previewClassName="items-start h-[28rem] px-4 md:px-8"
|
||||
/>
|
||||
|
||||
## Introduction
|
||||
|
||||
@@ -87,40 +87,30 @@ import {
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom close button
|
||||
### Custom Close Button
|
||||
|
||||
Replace the default close control with your own button.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-close-button" />
|
||||
|
||||
## Notes
|
||||
### No Close Button
|
||||
|
||||
To use the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
|
||||
`Dropdown Menu` component in the `Dialog` component.
|
||||
Use `showCloseButton={false}` to hide the close button.
|
||||
|
||||
```tsx showLineNumbers title="components/example-dialog-context-menu.tsx" {1, 26}
|
||||
<Dialog>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger>Right click</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem>Open</ContextMenuItem>
|
||||
<ContextMenuItem>Download</ContextMenuItem>
|
||||
<DialogTrigger asChild>
|
||||
<ContextMenuItem>
|
||||
<span>Delete</span>
|
||||
</ContextMenuItem>
|
||||
</DialogTrigger>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you absolutely sure?</DialogTitle>
|
||||
<DialogDescription>
|
||||
This action cannot be undone. Are you sure you want to permanently
|
||||
delete this file from our servers?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button type="submit">Confirm</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-no-close-button" />
|
||||
|
||||
### Sticky Footer
|
||||
|
||||
Keep actions visible while the content scrolls.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-sticky-footer" />
|
||||
|
||||
### Scrollable Content
|
||||
|
||||
Long content can scroll while the header stays in view.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-scrollable-content" />
|
||||
|
||||
## API Reference
|
||||
|
||||
See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/dialog#api-reference) documentation for more information.
|
||||
|
||||
@@ -7,11 +7,7 @@ links:
|
||||
doc: https://vaul.emilkowal.ski/getting-started
|
||||
---
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="drawer-demo"
|
||||
description="A drawer component."
|
||||
/>
|
||||
<ComponentPreview styleName="base-nova" name="drawer-demo" />
|
||||
|
||||
## About
|
||||
|
||||
@@ -48,7 +44,7 @@ npm install vaul
|
||||
<ComponentSource
|
||||
name="drawer"
|
||||
title="components/ui/drawer.tsx"
|
||||
styleName="radix-nova"
|
||||
styleName="base-nova"
|
||||
/>
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
@@ -94,8 +90,24 @@ import {
|
||||
|
||||
## Examples
|
||||
|
||||
### Scrollable Content
|
||||
|
||||
Keep actions visible while the content scrolls.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="drawer-scrollable-content" />
|
||||
|
||||
### Sides
|
||||
|
||||
Use the `direction` prop to set the side of the drawer. Available options are `top`, `right`, `bottom`, and `left`.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="drawer-sides" />
|
||||
|
||||
### Responsive Dialog
|
||||
|
||||
You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="drawer-dialog" />
|
||||
<ComponentPreview styleName="base-nova" name="drawer-dialog" />
|
||||
|
||||
## API Reference
|
||||
|
||||
See the [Vaul documentation](https://vaul.emilkowal.ski/components/drawer) for the full API reference.
|
||||
|
||||
@@ -1799,19 +1799,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-chat-settings": {
|
||||
name: "dialog-chat-settings",
|
||||
filePath: "examples/radix/dialog-chat-settings.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/dialog-chat-settings")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "dialog-chat-settings"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-close-button": {
|
||||
name: "dialog-close-button",
|
||||
filePath: "examples/radix/dialog-close-button.tsx",
|
||||
@@ -1864,29 +1851,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-with-form": {
|
||||
name: "dialog-with-form",
|
||||
filePath: "examples/radix/dialog-with-form.tsx",
|
||||
"dialog-sticky-footer": {
|
||||
name: "dialog-sticky-footer",
|
||||
filePath: "examples/radix/dialog-sticky-footer.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/dialog-with-form")
|
||||
const mod = await import("./radix/dialog-sticky-footer")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "dialog-with-form"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-with-sticky-footer": {
|
||||
name: "dialog-with-sticky-footer",
|
||||
filePath: "examples/radix/dialog-with-sticky-footer.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/dialog-with-sticky-footer")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "dialog-with-sticky-footer"
|
||||
) || "dialog-sticky-footer"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
@@ -1929,16 +1903,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"drawer-with-sides": {
|
||||
name: "drawer-with-sides",
|
||||
filePath: "examples/radix/drawer-with-sides.tsx",
|
||||
"drawer-sides": {
|
||||
name: "drawer-sides",
|
||||
filePath: "examples/radix/drawer-sides.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/drawer-with-sides")
|
||||
const mod = await import("./radix/drawer-sides")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "drawer-with-sides"
|
||||
) || "drawer-sides"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
@@ -8238,32 +8212,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"default-item-group": {
|
||||
name: "default-item-group",
|
||||
filePath: "examples/base/default-item-group.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/default-item-group")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "default-item-group"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-chat-settings": {
|
||||
name: "dialog-chat-settings",
|
||||
filePath: "examples/base/dialog-chat-settings.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/dialog-chat-settings")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "dialog-chat-settings"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-close-button": {
|
||||
name: "dialog-close-button",
|
||||
filePath: "examples/base/dialog-close-button.tsx",
|
||||
@@ -8316,29 +8264,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-with-form": {
|
||||
name: "dialog-with-form",
|
||||
filePath: "examples/base/dialog-with-form.tsx",
|
||||
"dialog-sticky-footer": {
|
||||
name: "dialog-sticky-footer",
|
||||
filePath: "examples/base/dialog-sticky-footer.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/dialog-with-form")
|
||||
const mod = await import("./base/dialog-sticky-footer")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "dialog-with-form"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"dialog-with-sticky-footer": {
|
||||
name: "dialog-with-sticky-footer",
|
||||
filePath: "examples/base/dialog-with-sticky-footer.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/dialog-with-sticky-footer")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "dialog-with-sticky-footer"
|
||||
) || "dialog-sticky-footer"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
@@ -8381,16 +8316,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"drawer-with-sides": {
|
||||
name: "drawer-with-sides",
|
||||
filePath: "examples/base/drawer-with-sides.tsx",
|
||||
"drawer-sides": {
|
||||
name: "drawer-sides",
|
||||
filePath: "examples/base/drawer-sides.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/drawer-with-sides")
|
||||
const mod = await import("./base/drawer-sides")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "drawer-with-sides"
|
||||
) || "drawer-sides"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
@@ -9655,6 +9590,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-group-default": {
|
||||
name: "item-group-default",
|
||||
filePath: "examples/base/item-group-default.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-group-default")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-group-default"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-group": {
|
||||
name: "item-group",
|
||||
filePath: "examples/base/item-group.tsx",
|
||||
|
||||
@@ -1,429 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import { Checkbox } from "@/examples/base/ui/checkbox"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/examples/base/ui/dialog"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldTitle,
|
||||
} from "@/examples/base/ui/field"
|
||||
import { Input } from "@/examples/base/ui/input"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupInput,
|
||||
} from "@/examples/base/ui/input-group"
|
||||
import { Kbd } from "@/examples/base/ui/kbd"
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/base/ui/native-select"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/examples/base/ui/select"
|
||||
import { Switch } from "@/examples/base/ui/switch"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/examples/base/ui/tabs"
|
||||
import { Textarea } from "@/examples/base/ui/textarea"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/examples/base/ui/tooltip"
|
||||
import { InfoIcon } from "lucide-react"
|
||||
|
||||
const spokenLanguages = [
|
||||
{ label: "Auto", value: "auto" },
|
||||
{ label: "English", value: "en" },
|
||||
{ label: "Spanish", value: "es" },
|
||||
{ label: "French", value: "fr" },
|
||||
{ label: "German", value: "de" },
|
||||
{ label: "Italian", value: "it" },
|
||||
{ label: "Portuguese", value: "pt" },
|
||||
{ label: "Russian", value: "ru" },
|
||||
{ label: "Chinese", value: "zh" },
|
||||
{ label: "Japanese", value: "ja" },
|
||||
{ label: "Korean", value: "ko" },
|
||||
{ label: "Arabic", value: "ar" },
|
||||
{ label: "Hindi", value: "hi" },
|
||||
{ label: "Bengali", value: "bn" },
|
||||
{ label: "Telugu", value: "te" },
|
||||
{ label: "Marathi", value: "mr" },
|
||||
{ label: "Kannada", value: "kn" },
|
||||
{ label: "Malayalam", value: "ml" },
|
||||
]
|
||||
|
||||
const voices = [
|
||||
{ label: "Samantha", value: "samantha" },
|
||||
{ label: "Alex", value: "alex" },
|
||||
{ label: "Fred", value: "fred" },
|
||||
{ label: "Victoria", value: "victoria" },
|
||||
{ label: "Tom", value: "tom" },
|
||||
{ label: "Karen", value: "karen" },
|
||||
{ label: "Sam", value: "sam" },
|
||||
{ label: "Daniel", value: "daniel" },
|
||||
]
|
||||
|
||||
const themes = [
|
||||
{ label: "Light", value: "light" },
|
||||
{ label: "Dark", value: "dark" },
|
||||
{ label: "System", value: "system" },
|
||||
]
|
||||
|
||||
const accents = [
|
||||
{ label: "Default", value: "default" },
|
||||
{ label: "Red", value: "red" },
|
||||
{ label: "Blue", value: "blue" },
|
||||
{ label: "Green", value: "green" },
|
||||
{ label: "Purple", value: "purple" },
|
||||
{ label: "Pink", value: "pink" },
|
||||
]
|
||||
|
||||
export function DialogChatSettings() {
|
||||
const [tab, setTab] = React.useState("general")
|
||||
const [theme, setTheme] = React.useState("system")
|
||||
const [accentColor, setAccentColor] = React.useState("default")
|
||||
const [spokenLanguage, setSpokenLanguage] = React.useState("en")
|
||||
const [voice, setVoice] = React.useState("samantha")
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
Chat Settings
|
||||
</DialogTrigger>
|
||||
<DialogContent className="min-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Chat Settings</DialogTitle>
|
||||
<DialogDescription>
|
||||
Customize your chat settings: theme, accent color, spoken
|
||||
language, voice, personality, and custom instructions.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-4">
|
||||
<NativeSelect
|
||||
value={tab}
|
||||
onChange={(e) => setTab(e.target.value)}
|
||||
className="w-full md:hidden"
|
||||
>
|
||||
<NativeSelectOption value="general">General</NativeSelectOption>
|
||||
<NativeSelectOption value="notifications">
|
||||
Notifications
|
||||
</NativeSelectOption>
|
||||
<NativeSelectOption value="personalization">
|
||||
Personalization
|
||||
</NativeSelectOption>
|
||||
<NativeSelectOption value="security">Security</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<Tabs value={tab} onValueChange={setTab}>
|
||||
<TabsList className="hidden w-full md:flex">
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="notifications">Notifications</TabsTrigger>
|
||||
<TabsTrigger value="personalization">
|
||||
Personalization
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="security">Security</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
|
||||
<TabsContent value="general">
|
||||
<FieldSet>
|
||||
<FieldGroup>
|
||||
<Field orientation="horizontal">
|
||||
<FieldLabel htmlFor="theme">Theme</FieldLabel>
|
||||
<Select
|
||||
items={themes}
|
||||
value={theme}
|
||||
onValueChange={(value) => setTheme(value as string)}
|
||||
>
|
||||
<SelectTrigger id="theme">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectGroup>
|
||||
{themes.map((theme) => (
|
||||
<SelectItem
|
||||
key={theme.value}
|
||||
value={theme.value}
|
||||
>
|
||||
{theme.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldLabel htmlFor="accent-color">
|
||||
Accent Color
|
||||
</FieldLabel>
|
||||
<Select
|
||||
items={accents}
|
||||
value={accentColor}
|
||||
onValueChange={(value) =>
|
||||
setAccentColor(value as string)
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="accent-color">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectGroup>
|
||||
{accents.map((accent) => (
|
||||
<SelectItem
|
||||
key={accent.value}
|
||||
value={accent.value}
|
||||
>
|
||||
{accent.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="responsive">
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="spoken-language">
|
||||
Spoken Language
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
For best results, select the language you mainly
|
||||
speak. If it's not listed, it may still be
|
||||
supported via auto-detection.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Select
|
||||
items={spokenLanguages}
|
||||
value={spokenLanguage}
|
||||
onValueChange={(value) =>
|
||||
setSpokenLanguage(value as string)
|
||||
}
|
||||
>
|
||||
<SelectTrigger id="spoken-language">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectGroup>
|
||||
{spokenLanguages.map((language) => (
|
||||
<SelectItem
|
||||
key={language.value}
|
||||
value={language.value}
|
||||
>
|
||||
{language.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldLabel htmlFor="voice">Voice</FieldLabel>
|
||||
<Select
|
||||
items={voices}
|
||||
value={voice}
|
||||
onValueChange={(value) => setVoice(value as string)}
|
||||
>
|
||||
<SelectTrigger id="voice">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectGroup>
|
||||
{voices.map((voice) => (
|
||||
<SelectItem
|
||||
key={voice.value}
|
||||
value={voice.value}
|
||||
>
|
||||
{voice.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
</TabsContent>
|
||||
<TabsContent value="notifications">
|
||||
<FieldGroup>
|
||||
<FieldSet>
|
||||
<FieldLabel>Responses</FieldLabel>
|
||||
<FieldDescription>
|
||||
Get notified when ChatGPT responds to requests that take
|
||||
time, like research or image generation.
|
||||
</FieldDescription>
|
||||
<FieldGroup data-slot="checkbox-group">
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="push" defaultChecked disabled />
|
||||
<FieldLabel htmlFor="push" className="font-normal">
|
||||
Push notifications
|
||||
</FieldLabel>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
<FieldSeparator />
|
||||
<FieldSet>
|
||||
<FieldLabel>Tasks</FieldLabel>
|
||||
<FieldDescription>
|
||||
Get notified when tasks you've created have
|
||||
updates. <a href="#">Manage tasks</a>
|
||||
</FieldDescription>
|
||||
<FieldGroup data-slot="checkbox-group">
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="push-tasks" />
|
||||
<FieldLabel
|
||||
htmlFor="push-tasks"
|
||||
className="font-normal"
|
||||
>
|
||||
Push notifications
|
||||
</FieldLabel>
|
||||
</Field>
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="email-tasks" />
|
||||
<FieldLabel
|
||||
htmlFor="email-tasks"
|
||||
className="font-normal"
|
||||
>
|
||||
Email notifications
|
||||
</FieldLabel>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
</FieldGroup>
|
||||
</TabsContent>
|
||||
<TabsContent value="personalization">
|
||||
<FieldGroup>
|
||||
<Field orientation="responsive">
|
||||
<FieldLabel htmlFor="nickname">Nickname</FieldLabel>
|
||||
<InputGroup>
|
||||
<InputGroupInput
|
||||
id="nickname"
|
||||
placeholder="Broski"
|
||||
className="@md/field-group:max-w-[200px]"
|
||||
/>
|
||||
<InputGroupAddon align="inline-end">
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
render={<InputGroupButton size="icon-xs" />}
|
||||
>
|
||||
<InfoIcon />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="flex items-center gap-2">
|
||||
Used to identify you in the chat. <Kbd>N</Kbd>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field
|
||||
orientation="responsive"
|
||||
className="@md/field-group:flex-col @2xl/field-group:flex-row"
|
||||
>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="about">More about you</FieldLabel>
|
||||
<FieldDescription>
|
||||
Tell us more about yourself. This will be used to help
|
||||
us personalize your experience.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Textarea
|
||||
id="about"
|
||||
placeholder="I'm a software engineer..."
|
||||
className="min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]"
|
||||
/>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<FieldLabel>
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="customization">
|
||||
Enable customizations
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
Enable customizations to make ChatGPT more
|
||||
personalized.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Switch id="customization" defaultChecked />
|
||||
</Field>
|
||||
</FieldLabel>
|
||||
</FieldGroup>
|
||||
</TabsContent>
|
||||
<TabsContent value="security">
|
||||
<FieldGroup>
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="2fa">
|
||||
Multi-factor authentication
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
Enable multi-factor authentication to secure your
|
||||
account. If you do not have a two-factor
|
||||
authentication device, you can use a one-time code
|
||||
sent to your email.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Switch id="2fa" />
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldTitle>Log out</FieldTitle>
|
||||
<FieldDescription>
|
||||
Log out of your account on this device.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Button variant="outline" size="sm">
|
||||
Log Out
|
||||
</Button>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldTitle>Log out of all devices</FieldTitle>
|
||||
<FieldDescription>
|
||||
This will log you out of all devices, including the
|
||||
current session. It may take up to 30 minutes for the
|
||||
changes to take effect.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Button variant="outline" size="sm">
|
||||
Log Out All
|
||||
</Button>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -36,9 +36,7 @@ export function DialogCloseButton() {
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter className="sm:justify-start">
|
||||
<DialogClose render={<Button type="button" variant="secondary" />}>
|
||||
Close
|
||||
</DialogClose>
|
||||
<DialogClose render={<Button type="button" />}>Close</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@@ -12,26 +12,19 @@ import {
|
||||
|
||||
export function DialogNoCloseButton() {
|
||||
return (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
No Close Button
|
||||
</DialogTrigger>
|
||||
<DialogContent showCloseButton={false}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>No Close Button</DialogTitle>
|
||||
<DialogDescription>
|
||||
This dialog doesn't have a close button in the top-right
|
||||
corner.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="outline" />}>
|
||||
Close
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
No Close Button
|
||||
</DialogTrigger>
|
||||
<DialogContent showCloseButton={false}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>No Close Button</DialogTitle>
|
||||
<DialogDescription>
|
||||
This dialog doesn't have a close button in the top-right
|
||||
corner.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,36 +10,31 @@ import {
|
||||
|
||||
export function DialogScrollableContent() {
|
||||
return (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
Scrollable Content
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Scrollable Content</DialogTitle>
|
||||
<DialogDescription>
|
||||
This is a dialog with scrollable content.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p
|
||||
key={index}
|
||||
className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
|
||||
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
Scrollable Content
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Scrollable Content</DialogTitle>
|
||||
<DialogDescription>
|
||||
This is a dialog with scrollable content.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p key={index} className="mb-4 leading-normal">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
46
apps/v4/examples/base/dialog-sticky-footer.tsx
Normal file
46
apps/v4/examples/base/dialog-sticky-footer.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/examples/base/ui/dialog"
|
||||
|
||||
export function DialogStickyFooter() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
Sticky Footer
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Sticky Footer</DialogTitle>
|
||||
<DialogDescription>
|
||||
This dialog has a sticky footer that stays visible while the content
|
||||
scrolls.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p key={index} className="mb-4 leading-normal">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="outline" />}>Close</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/examples/base/ui/dialog"
|
||||
import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
|
||||
import { Input } from "@/examples/base/ui/input"
|
||||
|
||||
export function DialogWithForm() {
|
||||
return (
|
||||
<Dialog>
|
||||
<form>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
Edit Profile
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're
|
||||
done. Your profile will be updated immediately.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="name-1">Name</FieldLabel>
|
||||
<Input id="name-1" name="name" defaultValue="Pedro Duarte" />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="username-1">Username</FieldLabel>
|
||||
<Input id="username-1" name="username" defaultValue="@peduarte" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="outline" />}>
|
||||
Cancel
|
||||
</DialogClose>
|
||||
<Button type="submit">Save changes</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</form>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/examples/base/ui/dialog"
|
||||
|
||||
export function DialogWithStickyFooter() {
|
||||
return (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline" />}>
|
||||
Sticky Footer
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Scrollable Content</DialogTitle>
|
||||
<DialogDescription>
|
||||
This is a dialog with scrollable content.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p
|
||||
key={index}
|
||||
className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
|
||||
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="outline" />}>
|
||||
Close
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -23,10 +23,7 @@ export function DrawerScrollableContent() {
|
||||
</DrawerHeader>
|
||||
<div className="no-scrollbar overflow-y-auto px-4">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p
|
||||
key={index}
|
||||
className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
|
||||
>
|
||||
<p key={index} className="mb-4 leading-normal">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
|
||||
@@ -36,10 +36,7 @@ export function DrawerWithSides() {
|
||||
</DrawerHeader>
|
||||
<div className="no-scrollbar overflow-y-auto px-4">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p
|
||||
key={index}
|
||||
className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
|
||||
>
|
||||
<p key={index} className="mb-4 leading-normal">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
@@ -1,396 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import { Checkbox } from "@/examples/radix/ui/checkbox"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/examples/radix/ui/dialog"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldTitle,
|
||||
} from "@/examples/radix/ui/field"
|
||||
import { Input } from "@/examples/radix/ui/input"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupInput,
|
||||
} from "@/examples/radix/ui/input-group"
|
||||
import { Kbd } from "@/examples/radix/ui/kbd"
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/radix/ui/native-select"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/examples/radix/ui/select"
|
||||
import { Switch } from "@/examples/radix/ui/switch"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/examples/radix/ui/tabs"
|
||||
import { Textarea } from "@/examples/radix/ui/textarea"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/examples/radix/ui/tooltip"
|
||||
import { InfoIcon } from "lucide-react"
|
||||
|
||||
const spokenLanguages = [
|
||||
{ label: "English", value: "en" },
|
||||
{ label: "Spanish", value: "es" },
|
||||
{ label: "French", value: "fr" },
|
||||
{ label: "German", value: "de" },
|
||||
{ label: "Italian", value: "it" },
|
||||
{ label: "Portuguese", value: "pt" },
|
||||
{ label: "Russian", value: "ru" },
|
||||
{ label: "Chinese", value: "zh" },
|
||||
{ label: "Japanese", value: "ja" },
|
||||
{ label: "Korean", value: "ko" },
|
||||
{ label: "Arabic", value: "ar" },
|
||||
{ label: "Hindi", value: "hi" },
|
||||
{ label: "Bengali", value: "bn" },
|
||||
{ label: "Telugu", value: "te" },
|
||||
{ label: "Marathi", value: "mr" },
|
||||
{ label: "Kannada", value: "kn" },
|
||||
{ label: "Malayalam", value: "ml" },
|
||||
]
|
||||
|
||||
const voices = [
|
||||
{ label: "Samantha", value: "samantha" },
|
||||
{ label: "Alex", value: "alex" },
|
||||
{ label: "Fred", value: "fred" },
|
||||
{ label: "Victoria", value: "victoria" },
|
||||
{ label: "Tom", value: "tom" },
|
||||
{ label: "Karen", value: "karen" },
|
||||
{ label: "Sam", value: "sam" },
|
||||
{ label: "Daniel", value: "daniel" },
|
||||
]
|
||||
|
||||
export function DialogChatSettings() {
|
||||
const [tab, setTab] = React.useState("general")
|
||||
const [theme, setTheme] = React.useState("system")
|
||||
const [accentColor, setAccentColor] = React.useState("default")
|
||||
const [spokenLanguage, setSpokenLanguage] = React.useState("en")
|
||||
const [voice, setVoice] = React.useState("samantha")
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Chat Settings</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="min-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Chat Settings</DialogTitle>
|
||||
<DialogDescription>
|
||||
Customize your chat settings: theme, accent color, spoken language,
|
||||
voice, personality, and custom instructions.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-4">
|
||||
<NativeSelect
|
||||
value={tab}
|
||||
onChange={(e) => setTab(e.target.value)}
|
||||
className="w-full md:hidden"
|
||||
>
|
||||
<NativeSelectOption value="general">General</NativeSelectOption>
|
||||
<NativeSelectOption value="notifications">
|
||||
Notifications
|
||||
</NativeSelectOption>
|
||||
<NativeSelectOption value="personalization">
|
||||
Personalization
|
||||
</NativeSelectOption>
|
||||
<NativeSelectOption value="security">Security</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<Tabs value={tab} onValueChange={setTab}>
|
||||
<TabsList className="hidden w-full md:flex">
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="notifications">Notifications</TabsTrigger>
|
||||
<TabsTrigger value="personalization">Personalization</TabsTrigger>
|
||||
<TabsTrigger value="security">Security</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
|
||||
<TabsContent value="general">
|
||||
<FieldSet>
|
||||
<FieldGroup>
|
||||
<Field orientation="horizontal">
|
||||
<FieldLabel htmlFor="theme">Theme</FieldLabel>
|
||||
<Select value={theme} onValueChange={setTheme}>
|
||||
<SelectTrigger id="theme">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectItem value="light">Light</SelectItem>
|
||||
<SelectItem value="dark">Dark</SelectItem>
|
||||
<SelectItem value="system">System</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldLabel htmlFor="accent-color">
|
||||
Accent Color
|
||||
</FieldLabel>
|
||||
<Select
|
||||
value={accentColor}
|
||||
onValueChange={setAccentColor}
|
||||
>
|
||||
<SelectTrigger id="accent-color">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectItem value="default">
|
||||
<div className="size-3 rounded-full bg-neutral-500 dark:bg-neutral-400" />
|
||||
Default
|
||||
</SelectItem>
|
||||
<SelectItem value="red">
|
||||
<div className="size-3 rounded-full bg-red-500 dark:bg-red-400" />
|
||||
Red
|
||||
</SelectItem>
|
||||
<SelectItem value="blue">
|
||||
<div className="size-3 rounded-full bg-blue-500 dark:bg-blue-400" />
|
||||
Blue
|
||||
</SelectItem>
|
||||
<SelectItem value="green">
|
||||
<div className="size-3 rounded-full bg-green-500 dark:bg-green-400" />
|
||||
Green
|
||||
</SelectItem>
|
||||
<SelectItem value="purple">
|
||||
<div className="size-3 rounded-full bg-purple-500 dark:bg-purple-400" />
|
||||
Purple
|
||||
</SelectItem>
|
||||
<SelectItem value="pink">
|
||||
<div className="size-3 rounded-full bg-pink-500 dark:bg-pink-400" />
|
||||
Pink
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="responsive">
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="spoken-language">
|
||||
Spoken Language
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
For best results, select the language you mainly
|
||||
speak. If it's not listed, it may still be
|
||||
supported via auto-detection.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Select
|
||||
value={spokenLanguage}
|
||||
onValueChange={setSpokenLanguage}
|
||||
>
|
||||
<SelectTrigger id="spoken-language">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end" position="item-aligned">
|
||||
<SelectItem value="auto">Auto</SelectItem>
|
||||
<SelectSeparator />
|
||||
{spokenLanguages.map((language) => (
|
||||
<SelectItem
|
||||
key={language.value}
|
||||
value={language.value}
|
||||
>
|
||||
{language.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldLabel htmlFor="voice">Voice</FieldLabel>
|
||||
<Select value={voice} onValueChange={setVoice}>
|
||||
<SelectTrigger id="voice">
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end" position="item-aligned">
|
||||
{voices.map((voice) => (
|
||||
<SelectItem key={voice.value} value={voice.value}>
|
||||
{voice.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
</TabsContent>
|
||||
<TabsContent value="notifications">
|
||||
<FieldGroup>
|
||||
<FieldSet>
|
||||
<FieldLabel>Responses</FieldLabel>
|
||||
<FieldDescription>
|
||||
Get notified when ChatGPT responds to requests that take
|
||||
time, like research or image generation.
|
||||
</FieldDescription>
|
||||
<FieldGroup data-slot="checkbox-group">
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="push" defaultChecked disabled />
|
||||
<FieldLabel htmlFor="push" className="font-normal">
|
||||
Push notifications
|
||||
</FieldLabel>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
<FieldSeparator />
|
||||
<FieldSet>
|
||||
<FieldLabel>Tasks</FieldLabel>
|
||||
<FieldDescription>
|
||||
Get notified when tasks you've created have updates.{" "}
|
||||
<a href="#">Manage tasks</a>
|
||||
</FieldDescription>
|
||||
<FieldGroup data-slot="checkbox-group">
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="push-tasks" />
|
||||
<FieldLabel
|
||||
htmlFor="push-tasks"
|
||||
className="font-normal"
|
||||
>
|
||||
Push notifications
|
||||
</FieldLabel>
|
||||
</Field>
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="email-tasks" />
|
||||
<FieldLabel
|
||||
htmlFor="email-tasks"
|
||||
className="font-normal"
|
||||
>
|
||||
Email notifications
|
||||
</FieldLabel>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
</FieldGroup>
|
||||
</TabsContent>
|
||||
<TabsContent value="personalization">
|
||||
<FieldGroup>
|
||||
<Field orientation="responsive">
|
||||
<FieldLabel htmlFor="nickname">Nickname</FieldLabel>
|
||||
<InputGroup>
|
||||
<InputGroupInput
|
||||
id="nickname"
|
||||
placeholder="Broski"
|
||||
className="@md/field-group:max-w-[200px]"
|
||||
/>
|
||||
<InputGroupAddon align="inline-end">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<InputGroupButton size="icon-xs">
|
||||
<InfoIcon />
|
||||
</InputGroupButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="flex items-center gap-2">
|
||||
Used to identify you in the chat. <Kbd>N</Kbd>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field
|
||||
orientation="responsive"
|
||||
className="@md/field-group:flex-col @2xl/field-group:flex-row"
|
||||
>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="about">More about you</FieldLabel>
|
||||
<FieldDescription>
|
||||
Tell us more about yourself. This will be used to help
|
||||
us personalize your experience.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Textarea
|
||||
id="about"
|
||||
placeholder="I'm a software engineer..."
|
||||
className="min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]"
|
||||
/>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<FieldLabel>
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="customization">
|
||||
Enable customizations
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
Enable customizations to make ChatGPT more
|
||||
personalized.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Switch id="customization" defaultChecked />
|
||||
</Field>
|
||||
</FieldLabel>
|
||||
</FieldGroup>
|
||||
</TabsContent>
|
||||
<TabsContent value="security">
|
||||
<FieldGroup>
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="2fa">
|
||||
Multi-factor authentication
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
Enable multi-factor authentication to secure your
|
||||
account. If you do not have a two-factor authentication
|
||||
device, you can use a one-time code sent to your email.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Switch id="2fa" />
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldTitle>Log out</FieldTitle>
|
||||
<FieldDescription>
|
||||
Log out of your account on this device.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Button variant="outline" size="sm">
|
||||
Log Out
|
||||
</Button>
|
||||
</Field>
|
||||
<FieldSeparator />
|
||||
<Field orientation="horizontal">
|
||||
<FieldContent>
|
||||
<FieldTitle>Log out of all devices</FieldTitle>
|
||||
<FieldDescription>
|
||||
This will log you out of all devices, including the
|
||||
current session. It may take up to 30 minutes for the
|
||||
changes to take effect.
|
||||
</FieldDescription>
|
||||
</FieldContent>
|
||||
<Button variant="outline" size="sm">
|
||||
Log Out All
|
||||
</Button>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -39,9 +39,7 @@ export function DialogCloseButton() {
|
||||
</div>
|
||||
<DialogFooter className="sm:justify-start">
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="secondary">
|
||||
Close
|
||||
</Button>
|
||||
<Button type="button">Close</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
@@ -24,11 +22,6 @@ export function DialogNoCloseButton() {
|
||||
corner.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
|
||||
@@ -21,12 +21,9 @@ export function DialogScrollableContent() {
|
||||
This is a dialog with scrollable content.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
|
||||
<div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p
|
||||
key={index}
|
||||
className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
|
||||
>
|
||||
<p key={index} className="mb-4 leading-normal">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
DialogTrigger,
|
||||
} from "@/examples/radix/ui/dialog"
|
||||
|
||||
export function DialogWithStickyFooter() {
|
||||
export function DialogStickyFooter() {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
@@ -18,17 +18,15 @@ export function DialogWithStickyFooter() {
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Scrollable Content</DialogTitle>
|
||||
<DialogTitle>Sticky Footer</DialogTitle>
|
||||
<DialogDescription>
|
||||
This is a dialog with scrollable content.
|
||||
This dialog has a sticky footer that stays visible while the content
|
||||
scrolls.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
|
||||
<div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<p
|
||||
key={index}
|
||||
className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
|
||||
>
|
||||
<p key={index} className="mb-4 leading-normal">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
@@ -1,50 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/examples/radix/ui/dialog"
|
||||
import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
|
||||
import { Input } from "@/examples/radix/ui/input"
|
||||
|
||||
export function DialogWithForm() {
|
||||
return (
|
||||
<Dialog>
|
||||
<form>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">Edit Profile</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to your profile here. Click save when you're
|
||||
done. Your profile will be updated immediately.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="name-1">Name</FieldLabel>
|
||||
<Input id="name-1" name="name" defaultValue="Pedro Duarte" />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="username-1">Username</FieldLabel>
|
||||
<Input id="username-1" name="username" defaultValue="@peduarte" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit">Save changes</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</form>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user