Skip to content

Commit ffdb651

Browse files
ana-pagnoncelliana-pagnoncelli
committed
create home
1 parent 1003f8c commit ffdb651

File tree

3 files changed

+94
-44
lines changed

3 files changed

+94
-44
lines changed

‎src/pages/home/Home.tsx‎

Lines changed: 86 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import ListItemAvatar from "@mui/material/ListItemAvatar";
77
import Avatar from "@mui/material/Avatar";
88
import SelfImprovementIcon from "@mui/icons-material/SelfImprovement";
99
import WatchLaterIcon from "@mui/icons-material/WatchLater";
10+
import InstagramIcon from "@mui/icons-material/Instagram";
11+
import PhoneAndroidIcon from "@mui/icons-material/PhoneAndroid";
12+
import PetsIcon from "@mui/icons-material/Pets";
1013
import PlaceIcon from "@mui/icons-material/Place";
1114
import { UserContext } from "../../context/userContext";
12-
import { HomeApp, HomeBox, InformationBox } from "./styles";
15+
import { HomeApp, HomeBox, InformationBox, InformationListBox } from "./styles";
1316

1417
export function Home() {
1518
const user = useContext(UserContext);
@@ -37,46 +40,88 @@ export function Home() {
3740

3841
<InformationBox>
3942
<Typography variant='h3'>Information</Typography>
40-
<List
41-
sx={{
42-
width: "100%",
43-
maxWidth: 360
44-
}}
45-
>
46-
<ListItem>
47-
<ListItemAvatar>
48-
<Avatar>
49-
<PlaceIcon />
50-
</Avatar>
51-
</ListItemAvatar>
52-
<ListItemText
53-
primary='Location'
54-
secondary='Caixeiros Viajantes'
55-
/>
56-
</ListItem>
57-
<ListItem>
58-
<ListItemAvatar>
59-
<Avatar>
60-
<SelfImprovementIcon />
61-
</Avatar>
62-
</ListItemAvatar>
63-
<ListItemText
64-
primary='Pilates teacher'
65-
secondary='Michelle Esquia'
66-
/>
67-
</ListItem>
68-
<ListItem>
69-
<ListItemAvatar>
70-
<Avatar>
71-
<WatchLaterIcon />
72-
</Avatar>
73-
</ListItemAvatar>
74-
<ListItemText
75-
primary='Opening hours'
76-
secondary='Monday to Friday from 7 am to 6 pm'
77-
/>
78-
</ListItem>
79-
</List>
43+
<InformationListBox>
44+
<List
45+
sx={{
46+
width: "100%",
47+
maxWidth: 360,
48+
flex: 1
49+
}}
50+
>
51+
<ListItem>
52+
<ListItemAvatar>
53+
<Avatar>
54+
<SelfImprovementIcon />
55+
</Avatar>
56+
</ListItemAvatar>
57+
<ListItemText
58+
primary='Pilates teacher'
59+
secondary='Michelle Esquia'
60+
/>
61+
</ListItem>
62+
<ListItem>
63+
<ListItemAvatar>
64+
<Avatar>
65+
<PlaceIcon />
66+
</Avatar>
67+
</ListItemAvatar>
68+
<ListItemText
69+
primary='Location'
70+
secondary='Caixeiros Viajantes, Porto Alegre'
71+
/>
72+
</ListItem>
73+
74+
<ListItem>
75+
<ListItemAvatar>
76+
<Avatar>
77+
<WatchLaterIcon />
78+
</Avatar>
79+
</ListItemAvatar>
80+
<ListItemText
81+
primary='Opening hours'
82+
secondary='Monday to Friday from 7 am to 6 pm'
83+
/>
84+
</ListItem>
85+
</List>
86+
<List
87+
sx={{
88+
width: "100%",
89+
maxWidth: 360,
90+
flex: 2
91+
}}
92+
>
93+
<ListItem>
94+
<ListItemAvatar>
95+
<Avatar>
96+
<PhoneAndroidIcon />
97+
</Avatar>
98+
</ListItemAvatar>
99+
<ListItemText primary='Phone' secondary='+51999897541' />
100+
</ListItem>
101+
<ListItem
102+
component='a'
103+
href='https://www.instagram.com/michelleesquia/'
104+
>
105+
<ListItemAvatar>
106+
<Avatar>
107+
<InstagramIcon />
108+
</Avatar>
109+
</ListItemAvatar>
110+
<ListItemText
111+
primary='Instagram'
112+
secondary='https://www.instagram.com/michelleesquia/'
113+
/>
114+
</ListItem>
115+
<ListItem>
116+
<ListItemAvatar>
117+
<Avatar>
118+
<PetsIcon />
119+
</Avatar>
120+
</ListItemAvatar>
121+
<ListItemText primary='Pet Friendly' secondary='Yes' />
122+
</ListItem>
123+
</List>
124+
</InformationListBox>
80125
</InformationBox>
81126
</HomeBox>
82127
</HomeApp>

‎src/pages/home/styles.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@ export const HomeApp = styled(BaseApp)({
1010
minHeight: "100vh"
1111
});
1212

13-
export const BenefitsText = styled(BaseApp)({
14-
textAlign: "left"
13+
export const InformationListBox = styled(Box)({
14+
display: "flex",
15+
flexDirection: "row",
16+
gap: "20px",
17+
justifyContent: "space-between",
18+
alignItems: "center",
19+
marginTop: "20px"
1520
});
1621

1722
export const InformationBox = styled(Box)({

‎src/pages/profile/Profile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export function Profile() {
105105
<TextField label='Age' value={age} onChange={handleAge} />
106106
<TextField label='Phone' value={phone} onChange={handlePhone} />
107107
<TextField label='Gender' value={gender} onChange={handleGender} />
108-
<TextField label='Plan' value={plan} onChange={handlePlan} />
108+
<TextField label='Plan' value={plan} onChange={handlePlan} disabled />
109109
</ProfileForm>
110110
<Button
111111
variant='contained'

0 commit comments

Comments
 (0)