Components
Loading preview...
Here is The Input component
@felipemenezes098
npx shadcn@latest add https://21st.dev/r/felipemenezes098/the-input
'use client'
import { useState } from 'react'
import { ArrowRightIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ButtonGroup } from '@/components/ui/button-group'
import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
const currencies = [
{ value: '$', label: 'US Dollar' },
{ value: '€', label: 'Euro' },
{ value: '£', label: 'British Pound' },
] as const
export default function Input15() {
const [currency, setCurrency] = useState<string>(currencies[0].value)
return (
<ButtonGroup className="mx-auto flex max-w-sm">
<Select value={currency} onValueChange={setCurrency}>
<SelectTrigger className="h-9 w-16 shrink-0 px-2">
<SelectValue>{currency}</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectGroup>
{currencies.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.value}{' '}
<span className="text-muted-foreground">{item.label}</span>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Input
placeholder="10.00"
inputMode="decimal"
className="h-9 flex-1"
/>
<Button
variant="outline"
size="icon"
aria-label="Submit amount"
className="h-9 w-9 shrink-0"
>
<ArrowRightIcon className="size-4" />
</Button>
</ButtonGroup>
)
}