feat: selectbox action component

This commit is contained in:
Anish Lakhwara 2025-02-19 11:09:54 -08:00
parent d5791bf5ed
commit 1a8ebaf88d
2 changed files with 47 additions and 10 deletions

View file

@ -214,7 +214,7 @@ function App({ ctx }) {
<> <>
<section className="pt-8 container"> <section className="pt-8 container">
<Input type="text" <Input type="text"
className="bg-background p-4" className="bg-background"
placeholder="..." placeholder="..."
value={newText} value={newText}
onKeyUp={parseTodos} onKeyUp={parseTodos}

View file

@ -7,16 +7,53 @@ export interface InputProps
const Input = React.forwardRef<HTMLInputElement, InputProps>( const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => { ({ className, type, ...props }, ref) => {
const [selectedIndex, setSelectedIndex] = React.useState(0)
const options = ["add", "done", "delete"]
const handleWheel = (event: React.WheelEvent) => {
event.preventDefault()
if (event.deltaY > 0) {
// Scroll down
setSelectedIndex((prev) => (prev + 1) % options.length)
} else {
// Scroll up
setSelectedIndex((prev) => (prev - 1 + options.length) % options.length)
}
}
return ( return (
<input <div className="relative"
type={type} onWheel={handleWheel}
className={cn( >
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", <select
className className={cn(
)} "absolute top-0 left-0 h-9 rounded-l-md border-r border-input bg-transparent px-2 text-sm cursor-default",
ref={ref} "shadow-sm transition-all duration-200 text-center appearance-none",
{...props} )}
/> value={options[selectedIndex]}
onChange={(e) => {
setSelectedIndex(options.indexOf(e.target.value))
}}
>
<option value="" disabled selected>
Actions
</option>
{options.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-background px-[90px] text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
ref={ref}
{...props}
/>
</div>
) )
} }
) )