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">
<Input type="text"
className="bg-background p-4"
className="bg-background"
placeholder="..."
value={newText}
onKeyUp={parseTodos}

View file

@ -7,16 +7,53 @@ export interface InputProps
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ 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 (
<input
type={type}
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",
className
)}
ref={ref}
{...props}
/>
<div className="relative"
onWheel={handleWheel}
>
<select
className={cn(
"absolute top-0 left-0 h-9 rounded-l-md border-r border-input bg-transparent px-2 text-sm cursor-default",
"shadow-sm transition-all duration-200 text-center appearance-none",
)}
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>
)
}
)