feat: mobile bottom view toggleGroup and Input

This commit is contained in:
Anish Lakhwara 2025-02-24 23:34:13 -08:00
parent f4e9ecb90b
commit b2c2030f19

View file

@ -48,7 +48,63 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
return ( return (
<div className="flex flex-col group" onWheel={handleWheel}> <div className="flex flex-col group" onWheel={handleWheel}>
<div className="flex w-full"> <div className="hidden md:flex flex-col w-full">
<div className="flex w-full">
<div className="relative w-auto">
<ToggleGroup type="single"
value={selectedToggle}
onValueChange={handleToggleChange}
defaultValue="add"
className={cn(
"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",
"shadow-sm transition-colors duration-0 text-center appearance-none group-focus-within:border-ring",
"rounded-t-md rounded-b-none",
"focus:border-ring focus-within:border-ring"
)}>
<ToggleGroupItem value="filter" aria-label="filter tasks">
<Search className="h-4 w-4 rounded-none" />
</ToggleGroupItem>
<ToggleGroupItem value="modify" aria-label="Modify selected task(s)">
<Pencil className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="add" aria-label="Add a task">
<Plus className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="done" aria-label="Toggle selected task(s) done">
<Check className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
<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>
</div>
<div className="flex-1"></div>
</div>
<div className="relative w-full">
<input
type={type}
placeholder={selectedToggle}
className={cn(
"flex-1 h-9 w-full border rounded-r-md rounded-tl-none rounded-bl-md bg-background px-3 pr-12 text-base",
"shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1",
"disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"group-focus-within:border-ring",
className
)}
ref={ref}
value={value}
{...props}
/>
<Button
type="button"
onClick={handleSubmit}
className="absolute right-1 bottom-1 h-7 z-10"
>
</Button>
</div>
</div>
{/* Mobile view layout - shown only on mobile */}
<div className="md:hidden fixed bottom-0 left-0 w-full z-50 flex flex-col items-center pb-2">
<div className="relative w-auto"> <div className="relative w-auto">
<ToggleGroup type="single" <ToggleGroup type="single"
value={selectedToggle} value={selectedToggle}
@ -60,47 +116,53 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
"rounded-t-md rounded-b-none", "rounded-t-md rounded-b-none",
"focus:border-ring" "focus:border-ring"
)}> )}>
<ToggleGroupItem value="filter" aria-label="filter tasks"> <ToggleGroupItem value="filter" aria-label="filter tasks" className="rounded-md mx-1 p-2">
<Search className="h-4 w-4 rounded-none" /> <Search className="h-5 w-5" />
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem value="modify" aria-label="Modify selected task(s)"> <ToggleGroupItem value="modify" aria-label="Modify selected task(s)" className="rounded-md mx-1 p-2">
<Pencil className="h-4 w-4" /> <Pencil className="h-5 w-5" />
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem value="add" aria-label="Add a task"> <ToggleGroupItem value="add" aria-label="Add a task" className="rounded-md mx-1 p-2">
<Plus className="h-4 w-4" /> <Plus className="h-5 w-5" />
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem value="done" aria-label="Toggle selected task(s) done"> <ToggleGroupItem value="done" aria-label="Toggle selected task(s) done" className="rounded-md mx-1 p-2">
<Check className="h-4 w-4" /> <Check className="h-5 w-5" />
</ToggleGroupItem> </ToggleGroupItem>
</ToggleGroup> </ToggleGroup>
<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> <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>
</div> </div>
<div className="flex-1"></div>
<div className="relative w-[90%] mb-1">
<input
type={type}
placeholder={selectedToggle}
className={cn(
"flex-1 h-9 w-full border bg-background px-3 pr-12 text-base",
"shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1",
"disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"group-focus-within:border-ring",
// Modify border radius based on viewport size
"md:rounded-r-md md:rounded-tl-none md:rounded-bl-md",
"rounded-md", // For mobile view (full rounded corners)
className
)}
ref={ref}
value={value}
{...props}
/>
<Button
type="button"
onClick={handleSubmit}
className="absolute right-1 bottom-1 h-7 z-10"
>
</Button>
</div>
</div> </div>
<div className="relative w-full"> </div >
<input
type={type}
placeholder={selectedToggle}
className={cn(
"flex-1 h-9 w-full border rounded-r-md rounded-tl-none rounded-bl-md bg-background px-3 pr-12 text-base",
"shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1",
"disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"group-focus-within:border-ring",
className
)}
ref={ref}
value={value}
{...props}
/>
<Button
type="button"
onClick={handleSubmit}
className="absolute right-1 bottom-1 h-7 z-10"
>
</Button>
</div>
</div>
) )
} }
) )