Skip to content

Commit 751e6fe

Browse files
aaronxsuaaronxsu
committed
Use UserProfileSubheader and update Button on Components page
1 parent e67e0ed commit 751e6fe

1 file changed

Lines changed: 174 additions & 62 deletions

File tree

‎src/frontend/src/pages/Components.tsx‎

Lines changed: 174 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import Button from "components/Button/Button";
2-
import StarIcon from "assets/icons/star.svg?react";
2+
import {
3+
Places,
4+
UserProfileSubheader,
5+
UserProfileSubheaderMobile,
6+
} from "components/UserProfileSubheader/UserProfileSubheader";
7+
38
import ArrowLeftIcon from "assets/icons/arrow-left.svg?react";
49
import ArrowRightIcon from "assets/icons/arrow-right.svg?react";
10+
import StarIcon from "assets/icons/star.svg?react";
511

612
const Components = () => {
713
return (
@@ -29,85 +35,191 @@ const Components = () => {
2935
Small
3036
</h3>
3137
<div className="flex flex-column flex-wrap items-center gap-4">
32-
<Button variant="primary" size="small">
33-
Primary
34-
</Button>
35-
<Button variant="secondary" size="small">
36-
Secondary
37-
</Button>
38-
<Button variant="outline" size="small">
39-
Outline
40-
</Button>
41-
<Button variant="outline" size="small">
42-
<ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
43-
</Button>
44-
<Button isDisabled size="small">
45-
Disabled
46-
</Button>
47-
<Button variant="outline" size="small">
48-
Next
49-
<ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
50-
</Button>
51-
<Button variant="orange" size="small">
52-
<StarIcon className="font-normal h-[14px] w-[14px]" />
53-
Add to favorites
54-
</Button>
38+
<Button
39+
variant="primary"
40+
size="small"
41+
label="Primary"
42+
/>
43+
<Button
44+
variant="secondary"
45+
size="small"
46+
label="Secondary"
47+
/>
48+
<Button
49+
variant="outline"
50+
size="small"
51+
label="Outline"
52+
/>
53+
<Button
54+
variant="outline"
55+
size="small"
56+
leftIcon={
57+
<ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
58+
}
59+
/>
60+
<Button
61+
isDisabled
62+
size="small"
63+
label="Disabled"
64+
/>
65+
<Button
66+
variant="outline"
67+
size="small"
68+
label="Next"
69+
rightIcon={
70+
<ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
71+
}
72+
/>
73+
<Button
74+
variant="orange"
75+
size="small"
76+
label="Add to favorites"
77+
leftIcon={
78+
<StarIcon className="font-normal h-[14px] w-[14px]" />
79+
}
80+
/>
5581
</div>
5682
</div>
5783
<div>
5884
<h3 className="text-xl text-gray-800 mb-2">
5985
Medium
6086
</h3>
6187
<div className="flex flex-column flex-wrap items-center gap-4">
62-
<Button variant="primary">Primary</Button>
63-
<Button variant="secondary">Secondary</Button>
64-
<Button variant="outline">Outline</Button>
65-
<Button variant="outline">
66-
<ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
67-
</Button>
68-
<Button isDisabled>Disabled</Button>
69-
<Button variant="outline">
70-
Next
71-
<ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
72-
</Button>
73-
<Button variant="orange">
74-
<StarIcon className="font-normal h-[14px] w-[14px]" />
75-
Add to favorites
76-
</Button>
88+
<Button variant="primary" label="Primary" />
89+
<Button variant="secondary" label="Secondary" />
90+
<Button variant="outline" label="Outline" />
91+
<Button
92+
variant="outline"
93+
leftIcon={
94+
<ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
95+
}
96+
/>
97+
<Button isDisabled label="Disabled" />
98+
<Button
99+
variant="outline"
100+
label="Next"
101+
rightIcon={
102+
<ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
103+
}
104+
/>
105+
<Button
106+
variant="orange"
107+
label="Add to favorites"
108+
leftIcon={
109+
<StarIcon className="font-normal h-[14px] w-[14px]" />
110+
}
111+
/>
77112
</div>
78113
</div>
79114
<div>
80115
<h3 className="text-xl text-gray-800 mb-2">
81116
Large
82117
</h3>
83118
<div className="flex flex-column flex-wrap items-center gap-4">
84-
<Button variant="primary" size="large">
85-
Primary
86-
</Button>
87-
<Button variant="secondary" size="large">
88-
Secondary
89-
</Button>
90-
<Button variant="outline" size="large">
91-
Outline
92-
</Button>
93-
<Button variant="outline" size="large">
94-
<ArrowLeftIcon className="font-normal h-[17px] w-[17px] text-black" />
95-
</Button>
96-
<Button size="large" isDisabled>
97-
Disabled
98-
</Button>
99-
<Button variant="outline" size="large">
100-
Next
101-
<ArrowRightIcon className="font-normal h-[17px] w-[17px] text-black" />
102-
</Button>
103-
<Button variant="orange" size="large">
104-
<StarIcon className="font-normal h-[17px] w-[17px]" />
105-
Add to favorites
106-
</Button>
119+
<Button
120+
variant="primary"
121+
size="large"
122+
label="Primary"
123+
/>
124+
<Button
125+
variant="secondary"
126+
size="large"
127+
label="Secondary"
128+
/>
129+
<Button
130+
variant="outline"
131+
size="large"
132+
label="Outline"
133+
/>
134+
<Button
135+
variant="outline"
136+
size="large"
137+
leftIcon={
138+
<ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
139+
}
140+
/>
141+
<Button
142+
isDisabled
143+
size="large"
144+
label="Disabled"
145+
/>
146+
<Button
147+
variant="outline"
148+
size="large"
149+
label="Next"
150+
rightIcon={
151+
<ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
152+
}
153+
/>
154+
<Button
155+
variant="orange"
156+
size="large"
157+
label="Add to favorites"
158+
leftIcon={
159+
<StarIcon className="font-normal h-[14px] w-[14px]" />
160+
}
161+
/>
107162
</div>
108163
</div>
109164
</div>
110165
</section>
166+
167+
{/* Section for User profile sub header */}
168+
<section className="p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
169+
<h2 className="text-3xl font-medium text-gray-800 mb-8 pb-4 border-b">
170+
User profile subheader
171+
</h2>
172+
<div className="space-y-8">
173+
<div className="flex flex-col gap-4">
174+
<h3 className="text-xl text-gray-800 mb-2">
175+
Small
176+
</h3>
177+
<UserProfileSubheaderMobile
178+
size="small"
179+
mode="transit"
180+
place={Places.Work}
181+
display="map"
182+
/>
183+
<UserProfileSubheader
184+
size="small"
185+
mode="transit"
186+
place={Places.Work}
187+
/>
188+
</div>
189+
<div className="flex flex-col gap-4">
190+
<h3 className="text-xl text-gray-800 mb-2">
191+
Medium
192+
</h3>
193+
<UserProfileSubheaderMobile
194+
size="medium"
195+
mode="car"
196+
place={Places.Daycare}
197+
display="list"
198+
/>
199+
<UserProfileSubheader
200+
size="medium"
201+
mode="car"
202+
place={Places.Daycare}
203+
/>
204+
</div>
205+
<div className="flex flex-col gap-4">
206+
<h3 className="text-xl text-gray-800 mb-2">
207+
Large
208+
</h3>
209+
<UserProfileSubheaderMobile
210+
size="large"
211+
mode="car"
212+
place={Places.Doctor}
213+
display="map"
214+
/>
215+
<UserProfileSubheader
216+
size="large"
217+
mode="transit"
218+
place={Places.Doctor}
219+
/>
220+
</div>
221+
</div>
222+
</section>
111223
</div>
112224
</div>
113225
);

0 commit comments

Comments
 (0)