feat: mobile bottom view toggleGroup and Input
This commit is contained in:
parent
f4e9ecb90b
commit
b2c2030f19
|
@ -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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue