150 lines
4.7 KiB
TypeScript
150 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import { ChevronDownIcon, InfoIcon, StarIcon } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import {
|
|
ButtonGroup,
|
|
ButtonGroupText,
|
|
} from "@/styles/aria-nova/ui/button-group"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/styles/aria-nova/ui/dropdown-menu"
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
} from "@/styles/aria-nova/ui/field"
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput,
|
|
} from "@/styles/aria-nova/ui/input-group"
|
|
import {
|
|
Popover,
|
|
PopoverDescription,
|
|
PopoverHeader,
|
|
PopoverTitle,
|
|
PopoverTrigger,
|
|
} from "@/styles/aria-nova/ui/popover"
|
|
import { Tooltip, TooltipTrigger } from "@/styles/aria-nova/ui/tooltip"
|
|
|
|
export function InputGroupWithTooltip({
|
|
country,
|
|
setCountry,
|
|
}: {
|
|
country: string
|
|
setCountry: (value: string) => void
|
|
}) {
|
|
return (
|
|
<>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-tooltip-20">Tooltip</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-tooltip-20" />
|
|
<InputGroupAddon align="inline-end">
|
|
<TooltipTrigger>
|
|
<InputGroupButton className="rounded-full" size="icon-xs">
|
|
<InfoIcon />
|
|
</InputGroupButton>
|
|
<Tooltip>This is content in a tooltip.</Tooltip>
|
|
</TooltipTrigger>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-dropdown-21">Dropdown</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupInput id="input-dropdown-21" />
|
|
<InputGroupAddon>
|
|
<DropdownMenuTrigger>
|
|
<InputGroupButton className="text-muted-foreground tabular-nums">
|
|
{country} <ChevronDownIcon />
|
|
</InputGroupButton>
|
|
<DropdownMenu
|
|
placement="bottom start"
|
|
className="min-w-16"
|
|
offset={10}
|
|
crossOffset={-8}
|
|
>
|
|
<DropdownMenuItem onClick={() => setCountry("+1")}>
|
|
+1
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setCountry("+44")}>
|
|
+44
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setCountry("+46")}>
|
|
+46
|
|
</DropdownMenuItem>
|
|
</DropdownMenu>
|
|
</DropdownMenuTrigger>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="input-secure-19">Popover</FieldLabel>
|
|
<InputGroup>
|
|
<PopoverTrigger>
|
|
<InputGroupAddon>
|
|
<InputGroupButton variant="secondary" size="icon-xs">
|
|
<InfoIcon />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
<Popover placement="bottom start">
|
|
<PopoverHeader>
|
|
<PopoverTitle>Your connection is not secure.</PopoverTitle>
|
|
<PopoverDescription>
|
|
You should not enter any sensitive information on this site.
|
|
</PopoverDescription>
|
|
</PopoverHeader>
|
|
</Popover>
|
|
</PopoverTrigger>
|
|
<InputGroupAddon className="pl-1 text-muted-foreground">
|
|
https://
|
|
</InputGroupAddon>
|
|
<InputGroupInput id="input-secure-19" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton
|
|
size="icon-xs"
|
|
onClick={() => toast("Added to favorites")}
|
|
>
|
|
<StarIcon />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="url">Button Group</FieldLabel>
|
|
<ButtonGroup>
|
|
<ButtonGroupText>https://</ButtonGroupText>
|
|
<InputGroup>
|
|
<InputGroupInput id="url" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InfoIcon />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<ButtonGroupText>.com</ButtonGroupText>
|
|
</ButtonGroup>
|
|
<FieldDescription>
|
|
This is a description of the input group.
|
|
</FieldDescription>
|
|
</Field>
|
|
</FieldGroup>
|
|
</>
|
|
)
|
|
}
|