this repo has no description
2
fork

Configure Feed

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

feat: mobile bottom view toggleGroup and Input

+96 -34
+96 -34
mast-react-vite/src/components/ui/input.tsx
··· 48 48 49 49 return ( 50 50 <div className="flex flex-col group" onWheel={handleWheel}> 51 - <div className="flex w-full"> 51 + <div className="hidden md:flex flex-col w-full"> 52 + <div className="flex w-full"> 53 + <div className="relative w-auto"> 54 + <ToggleGroup type="single" 55 + value={selectedToggle} 56 + onValueChange={handleToggleChange} 57 + defaultValue="add" 58 + className={cn( 59 + "h-11 border rounded-t-md border-b-0 bg-transparent text-sm cursor-default pt-1/2 pl-1 pr-1 pb-1/2", 60 + "shadow-sm transition-colors duration-0 text-center appearance-none group-focus-within:border-ring", 61 + "rounded-t-md rounded-b-none", 62 + "focus:border-ring focus-within:border-ring" 63 + )}> 64 + <ToggleGroupItem value="filter" aria-label="filter tasks"> 65 + <Search className="h-4 w-4 rounded-none" /> 66 + </ToggleGroupItem> 67 + <ToggleGroupItem value="modify" aria-label="Modify selected task(s)"> 68 + <Pencil className="h-4 w-4" /> 69 + </ToggleGroupItem> 70 + <ToggleGroupItem value="add" aria-label="Add a task"> 71 + <Plus className="h-4 w-4" /> 72 + </ToggleGroupItem> 73 + <ToggleGroupItem value="done" aria-label="Toggle selected task(s) done"> 74 + <Check className="h-4 w-4" /> 75 + </ToggleGroupItem> 76 + </ToggleGroup> 77 + <div className="absolute bottom-0 left-0 right-0 h-[2px] border group-focus-within:border-ring border-b-0 border-t-0 bg-background z-20 translate-y-[1px]"></div> 78 + </div> 79 + <div className="flex-1"></div> 80 + </div> 81 + <div className="relative w-full"> 82 + <input 83 + type={type} 84 + placeholder={selectedToggle} 85 + className={cn( 86 + "flex-1 h-9 w-full border rounded-r-md rounded-tl-none rounded-bl-md bg-background px-3 pr-12 text-base", 87 + "shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1", 88 + "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", 89 + "group-focus-within:border-ring", 90 + className 91 + )} 92 + ref={ref} 93 + value={value} 94 + {...props} 95 + /> 96 + <Button 97 + type="button" 98 + onClick={handleSubmit} 99 + className="absolute right-1 bottom-1 h-7 z-10" 100 + > 101 + 102 + </Button> 103 + </div> 104 + </div> 105 + 106 + {/* Mobile view layout - shown only on mobile */} 107 + <div className="md:hidden fixed bottom-0 left-0 w-full z-50 flex flex-col items-center pb-2"> 52 108 <div className="relative w-auto"> 53 109 <ToggleGroup type="single" 54 110 value={selectedToggle} ··· 60 116 "rounded-t-md rounded-b-none", 61 117 "focus:border-ring" 62 118 )}> 63 - <ToggleGroupItem value="filter" aria-label="filter tasks"> 64 - <Search className="h-4 w-4 rounded-none" /> 119 + <ToggleGroupItem value="filter" aria-label="filter tasks" className="rounded-md mx-1 p-2"> 120 + <Search className="h-5 w-5" /> 65 121 </ToggleGroupItem> 66 - <ToggleGroupItem value="modify" aria-label="Modify selected task(s)"> 67 - <Pencil className="h-4 w-4" /> 122 + <ToggleGroupItem value="modify" aria-label="Modify selected task(s)" className="rounded-md mx-1 p-2"> 123 + <Pencil className="h-5 w-5" /> 68 124 </ToggleGroupItem> 69 - <ToggleGroupItem value="add" aria-label="Add a task"> 70 - <Plus className="h-4 w-4" /> 125 + <ToggleGroupItem value="add" aria-label="Add a task" className="rounded-md mx-1 p-2"> 126 + <Plus className="h-5 w-5" /> 71 127 </ToggleGroupItem> 72 - <ToggleGroupItem value="done" aria-label="Toggle selected task(s) done"> 73 - <Check className="h-4 w-4" /> 128 + <ToggleGroupItem value="done" aria-label="Toggle selected task(s) done" className="rounded-md mx-1 p-2"> 129 + <Check className="h-5 w-5" /> 74 130 </ToggleGroupItem> 75 131 </ToggleGroup> 76 132 <div className="absolute bottom-0 left-0 right-0 h-[2px] border border-b-0 border-t-0 group-focus-within:border-ring bg-background z-20 translate-y-[1px]"></div> 77 133 </div> 78 - <div className="flex-1"></div> 79 - </div> 80 - <div className="relative w-full"> 81 - <input 82 - type={type} 83 - placeholder={selectedToggle} 84 - className={cn( 85 - "flex-1 h-9 w-full border rounded-r-md rounded-tl-none rounded-bl-md bg-background px-3 pr-12 text-base", 86 - "shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1", 87 - "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", 88 - "group-focus-within:border-ring", 89 - className 90 - )} 91 - ref={ref} 92 - value={value} 93 - {...props} 94 - /> 95 - <Button 96 - type="button" 97 - onClick={handleSubmit} 98 - className="absolute right-1 bottom-1 h-7 z-10" 99 - > 100 - 101 - </Button> 134 + 135 + <div className="relative w-[90%] mb-1"> 136 + <input 137 + type={type} 138 + placeholder={selectedToggle} 139 + className={cn( 140 + "flex-1 h-9 w-full border bg-background px-3 pr-12 text-base", 141 + "shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1", 142 + "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", 143 + "group-focus-within:border-ring", 144 + // Modify border radius based on viewport size 145 + "md:rounded-r-md md:rounded-tl-none md:rounded-bl-md", 146 + "rounded-md", // For mobile view (full rounded corners) 147 + className 148 + 149 + )} 150 + ref={ref} 151 + value={value} 152 + {...props} 153 + /> 154 + <Button 155 + type="button" 156 + onClick={handleSubmit} 157 + className="absolute right-1 bottom-1 h-7 z-10" 158 + > 159 + 160 + </Button> 161 + </div> 162 + 102 163 </div> 103 - </div> 164 + </div > 165 + 104 166 ) 105 167 } 106 168 )