mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
664 lines
23 KiB
TypeScript
664 lines
23 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import {
|
|
IconBrandJavascript,
|
|
IconCheck,
|
|
IconChevronDown,
|
|
IconCopy,
|
|
IconInfoCircle,
|
|
IconLoader2,
|
|
IconMicrophone,
|
|
IconPlayerRecordFilled,
|
|
IconPlus,
|
|
IconRefresh,
|
|
IconSearch,
|
|
IconServerSpark,
|
|
IconStar,
|
|
IconTrash,
|
|
} from "@tabler/icons-react"
|
|
import {
|
|
ArrowRightIcon,
|
|
ArrowUpIcon,
|
|
ChevronDownIcon,
|
|
EyeClosedIcon,
|
|
FlipVerticalIcon,
|
|
SearchIcon,
|
|
} from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
import {
|
|
ButtonGroup,
|
|
ButtonGroupText,
|
|
} from "@/registry/new-york-v4/ui/button-group"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/registry/new-york-v4/ui/dropdown-menu"
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
} from "@/registry/new-york-v4/ui/field"
|
|
import { Input } from "@/registry/new-york-v4/ui/input"
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput,
|
|
InputGroupText,
|
|
InputGroupTextarea,
|
|
} from "@/registry/new-york-v4/ui/input-group"
|
|
import { Kbd, KbdGroup } from "@/registry/new-york-v4/ui/kbd"
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/registry/new-york-v4/ui/popover"
|
|
import { Spinner } from "@/registry/new-york-v4/ui/spinner"
|
|
import { Textarea } from "@/registry/new-york-v4/ui/textarea"
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/registry/new-york-v4/ui/tooltip"
|
|
|
|
export function InputGroupDemo() {
|
|
const [country, setCountry] = useState("+1")
|
|
|
|
return (
|
|
<div className="flex w-full flex-wrap gap-12 pb-72 *:[div]:w-full *:[div]:max-w-sm">
|
|
<div className="flex flex-col gap-10">
|
|
<Field>
|
|
<FieldLabel htmlFor="input-default-01">
|
|
Default (No Input Group)
|
|
</FieldLabel>
|
|
<Input placeholder="Default" id="input-default-01" />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-group-02">Input Group</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-group-02" placeholder="Default" />
|
|
</InputGroup>
|
|
</Field>
|
|
<Field data-disabled="true">
|
|
<FieldLabel htmlFor="input-disabled-03">Disabled</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="input-disabled-03"
|
|
placeholder="This field is disabled"
|
|
disabled
|
|
/>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field data-invalid="true">
|
|
<FieldLabel htmlFor="input-invalid-04">Invalid</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="input-invalid-04"
|
|
placeholder="This field is invalid"
|
|
aria-invalid="true"
|
|
/>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-icon-left-05">Icon (left)</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-icon-left-05" />
|
|
<InputGroupAddon>
|
|
<SearchIcon className="text-muted-foreground" />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-icon-left-06" />
|
|
<InputGroupAddon>
|
|
<FlipVerticalIcon className="text-muted-foreground" />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-icon-right-07">Icon (right)</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-icon-right-07" />
|
|
<InputGroupAddon align="inline-end">
|
|
<EyeClosedIcon />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-icon-right-08" />
|
|
<InputGroupAddon align="inline-end">
|
|
<IconLoader2 className="animate-spin text-muted-foreground" />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-icon-both-09">Icon (both)</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-icon-both-09" />
|
|
<InputGroupAddon>
|
|
<IconMicrophone className="text-muted-foreground" />
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">
|
|
<IconPlayerRecordFilled className="animate-pulse text-red-500" />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-icon-both-10">Multiple Icons</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-icon-both-10" />
|
|
<InputGroupAddon align="inline-end">
|
|
<IconStar />
|
|
<InputGroupButton
|
|
size="icon-xs"
|
|
onClick={() => toast.success("Copied to clipboard")}
|
|
>
|
|
<IconCopy />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
<InputGroupAddon>
|
|
<IconPlayerRecordFilled className="animate-pulse text-red-500" />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-description-10">Description</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-description-10" />
|
|
<InputGroupAddon align="inline-end">
|
|
<IconInfoCircle />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<FieldGroup className="grid grid-cols-2 gap-4">
|
|
<Field>
|
|
<FieldLabel htmlFor="input-group-11">First Name</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-group-11" placeholder="First Name" />
|
|
<InputGroupAddon align="inline-end">
|
|
<IconInfoCircle />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-group-12">Last Name</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-group-12" placeholder="Last Name" />
|
|
<InputGroupAddon align="inline-end">
|
|
<IconInfoCircle />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
</FieldGroup>
|
|
</div>
|
|
<div className="flex flex-col gap-10">
|
|
<Field>
|
|
<FieldLabel htmlFor="input-tooltip-20">Tooltip</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-tooltip-20" />
|
|
<InputGroupAddon align="inline-end">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<InputGroupButton className="rounded-full" size="icon-xs">
|
|
<IconInfoCircle />
|
|
</InputGroupButton>
|
|
</TooltipTrigger>
|
|
<TooltipContent>This is content in a tooltip.</TooltipContent>
|
|
</Tooltip>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-dropdown-21">Dropdown</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-dropdown-21" />
|
|
<InputGroupAddon>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<InputGroupButton className="text-muted-foreground tabular-nums">
|
|
{country} <ChevronDownIcon />
|
|
</InputGroupButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="start"
|
|
className="min-w-16"
|
|
sideOffset={10}
|
|
alignOffset={-8}
|
|
>
|
|
<DropdownMenuItem onClick={() => setCountry("+1")}>
|
|
+1
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setCountry("+44")}>
|
|
+44
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setCountry("+46")}>
|
|
+46
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-label-10">Label</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupAddon>
|
|
<FieldLabel htmlFor="input-label-10">Label</FieldLabel>
|
|
</InputGroupAddon>
|
|
<InputGroupInput id="input-label-10" />
|
|
</InputGroup>
|
|
<InputGroup className="gap-0">
|
|
<InputGroupAddon>
|
|
<FieldLabel
|
|
htmlFor="input-prefix-11"
|
|
className="text-muted-foreground"
|
|
>
|
|
example.com/
|
|
</FieldLabel>
|
|
</InputGroupAddon>
|
|
<InputGroupInput id="input-prefix-11" />
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-optional-12" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>(optional)</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-button-13">Button</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-button-13" />
|
|
<InputGroupAddon>
|
|
<InputGroupButton>Button</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-button-14" />
|
|
<InputGroupAddon>
|
|
<InputGroupButton variant="outline">Button</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-button-15" />
|
|
<InputGroupAddon>
|
|
<InputGroupButton variant="secondary">Button</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-button-16" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton variant="secondary">Button</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-button-17" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton size="icon-xs">
|
|
<IconCopy />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-button-18" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton variant="secondary" size="icon-xs">
|
|
<IconTrash />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup className="[--radius:9999px]">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<InputGroupAddon>
|
|
<InputGroupButton variant="secondary" size="icon-xs">
|
|
<IconInfoCircle />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
align="start"
|
|
className="flex flex-col gap-1 rounded-xl text-sm"
|
|
>
|
|
<p className="font-medium">Your connection is not secure.</p>
|
|
<p>
|
|
You should not enter any sensitive information on this site.
|
|
</p>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<InputGroupAddon className="text-muted-foreground">
|
|
https://
|
|
</InputGroupAddon>
|
|
<InputGroupInput id="input-secure-19" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton
|
|
size="icon-xs"
|
|
onClick={() => toast.success("Added to favorites")}
|
|
>
|
|
<IconStar />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-addon-20">Addon (block-start)</FieldLabel>
|
|
<InputGroup className="h-auto">
|
|
<InputGroupInput id="input-addon-20" />
|
|
<InputGroupAddon align="block-start">
|
|
<InputGroupText>First Name</InputGroupText>
|
|
<IconInfoCircle className="ml-auto text-muted-foreground" />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-addon-21">Addon (block-end)</FieldLabel>
|
|
<InputGroup className="h-auto">
|
|
<InputGroupInput id="input-addon-21" />
|
|
<InputGroupAddon align="block-end">
|
|
<InputGroupText>20/240 characters</InputGroupText>
|
|
<IconInfoCircle className="ml-auto text-muted-foreground" />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-comment-33">Default Button</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="textarea-comment-33"
|
|
placeholder="Share your thoughts..."
|
|
className="py-2.5"
|
|
/>
|
|
<InputGroupAddon align="block-end">
|
|
<ButtonGroup>
|
|
<Button variant="outline" size="sm">
|
|
Button
|
|
</Button>
|
|
<Button variant="outline" size="icon" className="size-8">
|
|
<IconChevronDown />
|
|
</Button>
|
|
</ButtonGroup>
|
|
<Button variant="ghost" className="ml-auto" size="sm">
|
|
Cancel
|
|
</Button>
|
|
<Button variant="default" size="sm">
|
|
Post <ArrowRightIcon />
|
|
</Button>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
</div>
|
|
<div className="flex flex-col gap-10">
|
|
<Field>
|
|
<FieldLabel htmlFor="input-kbd-22">Input Group with Kbd</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-kbd-22" />
|
|
<InputGroupAddon>
|
|
<Kbd>⌘K</Kbd>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-kbd-23" />
|
|
<InputGroupAddon align="inline-end">
|
|
<Kbd>⌘K</Kbd>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="input-search-apps-24"
|
|
placeholder="Search for Apps..."
|
|
/>
|
|
<InputGroupAddon align="inline-end">Ask AI</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">
|
|
<Kbd>Tab</Kbd>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="input-search-type-25"
|
|
placeholder="Type to search..."
|
|
/>
|
|
<InputGroupAddon align="inline-start">
|
|
<IconServerSpark />
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">
|
|
<KbdGroup>
|
|
<Kbd>Ctrl</Kbd>
|
|
<Kbd>C</Kbd>
|
|
</KbdGroup>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-username-26">Username</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-username-26" defaultValue="shadcn" />
|
|
<InputGroupAddon align="inline-end">
|
|
<div className="flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800">
|
|
<IconCheck className="size-3 text-white" />
|
|
</div>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldDescription className="text-green-700">
|
|
This username is available.
|
|
</FieldDescription>
|
|
</Field>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="input-search-docs-27"
|
|
placeholder="Search documentation..."
|
|
/>
|
|
<InputGroupAddon>
|
|
<IconSearch />
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">12 results</InputGroupAddon>
|
|
</InputGroup>
|
|
<InputGroup data-disabled="true">
|
|
<InputGroupInput
|
|
id="input-search-disabled-28"
|
|
placeholder="Search documentation..."
|
|
disabled
|
|
/>
|
|
<InputGroupAddon>
|
|
<IconSearch />
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">Disabled</InputGroupAddon>
|
|
</InputGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="url">With Button Group</FieldLabel>
|
|
<ButtonGroup>
|
|
<ButtonGroupText>https://</ButtonGroupText>
|
|
<InputGroup>
|
|
<InputGroupInput id="url" />
|
|
<InputGroupAddon align="inline-end">
|
|
<IconInfoCircle />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<ButtonGroupText>.com</ButtonGroupText>
|
|
</ButtonGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field data-disabled="true">
|
|
<FieldLabel htmlFor="input-group-29">Loading</FieldLabel>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
id="input-group-29"
|
|
disabled
|
|
defaultValue="shadcn"
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<Spinner />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-code-32">Code Editor</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="textarea-code-32"
|
|
placeholder="console.log('Hello, world!');"
|
|
className="min-h-[300px] py-3"
|
|
/>
|
|
<InputGroupAddon align="block-start" className="border-b">
|
|
<InputGroupText className="font-mono font-medium">
|
|
<IconBrandJavascript />
|
|
script.js
|
|
</InputGroupText>
|
|
<InputGroupButton size="icon-xs" className="ml-auto">
|
|
<IconRefresh />
|
|
</InputGroupButton>
|
|
<InputGroupButton size="icon-xs" variant="ghost">
|
|
<IconCopy />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="block-end" className="border-t">
|
|
<InputGroupText>Line 1, Column 1</InputGroupText>
|
|
<InputGroupText className="ml-auto">JavaScript</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
</div>
|
|
<div className="flex flex-col gap-10">
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-header-footer-12">Default</FieldLabel>
|
|
<Textarea
|
|
id="textarea-header-footer-12"
|
|
placeholder="Enter your text here..."
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-header-footer-13">
|
|
Input Group
|
|
</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="textarea-header-footer-13"
|
|
placeholder="Enter your text here..."
|
|
/>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field data-invalid="true">
|
|
<FieldLabel htmlFor="textarea-header-footer-14">Invalid</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="textarea-header-footer-14"
|
|
placeholder="Enter your text here..."
|
|
aria-invalid="true"
|
|
/>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field data-disabled="true">
|
|
<FieldLabel htmlFor="textarea-header-footer-15">Disabled</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="textarea-header-footer-15"
|
|
placeholder="Enter your text here..."
|
|
disabled
|
|
/>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-header-footer-30">Textarea</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="textarea-header-footer-30"
|
|
placeholder="Enter your text here..."
|
|
/>
|
|
<InputGroupAddon align="block-end">
|
|
<InputGroupText>0/280 characters</InputGroupText>
|
|
<InputGroupButton
|
|
variant="default"
|
|
size="icon-xs"
|
|
className="ml-auto rounded-full"
|
|
>
|
|
<ArrowUpIcon />
|
|
<span className="sr-only">Send</span>
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="prompt-31">Enter your prompt</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="prompt-31"
|
|
placeholder="Ask, Search or Chat..."
|
|
/>
|
|
<InputGroupAddon align="block-end">
|
|
<InputGroupButton
|
|
variant="outline"
|
|
className="rounded-full"
|
|
size="icon-xs"
|
|
>
|
|
<IconPlus />
|
|
</InputGroupButton>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<InputGroupButton variant="ghost">Auto</InputGroupButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent side="top" align="start">
|
|
<DropdownMenuItem>Auto</DropdownMenuItem>
|
|
<DropdownMenuItem>Agent</DropdownMenuItem>
|
|
<DropdownMenuItem>Manual</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<InputGroupText className="ml-auto">
|
|
12 messages left
|
|
</InputGroupText>
|
|
<InputGroupButton
|
|
variant="default"
|
|
className="rounded-full"
|
|
size="icon-xs"
|
|
>
|
|
<ArrowUpIcon />
|
|
<span className="sr-only">Send</span>
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="textarea-comment-31">Comment Box</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
id="textarea-comment-31"
|
|
placeholder="Share your thoughts..."
|
|
/>
|
|
<InputGroupAddon align="block-end">
|
|
<InputGroupButton variant="ghost" className="ml-auto" size="sm">
|
|
Cancel
|
|
</InputGroupButton>
|
|
<InputGroupButton variant="default" size="sm">
|
|
Post Comment
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|