this repo has no description
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: selectbox action component

+47 -10
+1 -1
mast-react-vite/src/App.tsx
··· 214 214 <> 215 215 <section className="pt-8 container"> 216 216 <Input type="text" 217 - className="bg-background p-4" 217 + className="bg-background" 218 218 placeholder="..." 219 219 value={newText} 220 220 onKeyUp={parseTodos}
+46 -9
mast-react-vite/src/components/ui/input.tsx
··· 7 7 8 8 const Input = React.forwardRef<HTMLInputElement, InputProps>( 9 9 ({ className, type, ...props }, ref) => { 10 + const [selectedIndex, setSelectedIndex] = React.useState(0) 11 + const options = ["add", "done", "delete"] 12 + 13 + const handleWheel = (event: React.WheelEvent) => { 14 + event.preventDefault() 15 + if (event.deltaY > 0) { 16 + // Scroll down 17 + setSelectedIndex((prev) => (prev + 1) % options.length) 18 + } else { 19 + // Scroll up 20 + setSelectedIndex((prev) => (prev - 1 + options.length) % options.length) 21 + } 22 + } 23 + 10 24 return ( 11 - <input 12 - type={type} 13 - className={cn( 14 - "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", 15 - className 16 - )} 17 - ref={ref} 18 - {...props} 19 - /> 25 + <div className="relative" 26 + onWheel={handleWheel} 27 + > 28 + <select 29 + className={cn( 30 + "absolute top-0 left-0 h-9 rounded-l-md border-r border-input bg-transparent px-2 text-sm cursor-default", 31 + "shadow-sm transition-all duration-200 text-center appearance-none", 32 + )} 33 + value={options[selectedIndex]} 34 + onChange={(e) => { 35 + setSelectedIndex(options.indexOf(e.target.value)) 36 + }} 37 + > 38 + <option value="" disabled selected> 39 + Actions 40 + </option> 41 + {options.map((option) => ( 42 + <option key={option} value={option}> 43 + {option} 44 + </option> 45 + ))} 46 + </select> 47 + <input 48 + type={type} 49 + className={cn( 50 + "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", 51 + className 52 + )} 53 + ref={ref} 54 + {...props} 55 + /> 56 + </div> 20 57 ) 21 58 } 22 59 )