this repo has no description
feat: mobile bottom view toggleGroup and Input
+96
-34
+96
-34
mast-react-vite/src/components/ui/input.tsx
+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
)