Skip to content

Commit 4e8fdb3

Browse files
sajadevosajadevo
committed
build the profile page
1 parent c3fd85c commit 4e8fdb3

16 files changed

+485
-1
lines changed

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@
99
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
1010
rel="stylesheet"
1111
/>
12+
<link
13+
rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
15+
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
16+
crossorigin="anonymous"
17+
referrerpolicy="no-referrer"
18+
/>
1219
</head>
1320
<body>
1421
<div id="root"></div>

‎public/img/bruce-mars.jpeg

26.1 KB
Loading

‎public/img/home-decor-1.jpeg

226 KB
Loading

‎public/img/home-decor-2.jpeg

273 KB
Loading

‎public/img/home-decor-3.jpeg

1.11 MB
Loading

‎public/img/home-decor-4.jpeg

44.5 KB
Loading

‎src/data/conversations-data.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export const conversationsData = [
2+
{
3+
img: "/img/team-1.jpeg",
4+
name: "Sophie B.",
5+
message: "Hi! I need more information...",
6+
},
7+
{
8+
img: "/img/team-2.jpeg",
9+
name: "Alexander",
10+
message: "Awesome work, can you...",
11+
},
12+
{
13+
img: "/img/team-3.jpeg",
14+
name: "Ivanna",
15+
message: "About files I can...",
16+
},
17+
{
18+
img: "/img/team-4.jpeg",
19+
name: "Peterson",
20+
message: "Have a great afternoon...",
21+
},
22+
{
23+
img: "/img/bruce-mars.jpeg",
24+
name: "Bruce Mars",
25+
message: "Hi! I need more information...",
26+
},
27+
];
28+
29+
export default conversationsData;

‎src/data/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@ export * from "@/data/statistics-cards-data";
22
export * from "@/data/statistics-charts-data";
33
export * from "@/data/projects-table-data";
44
export * from "@/data/orders-overview-data";
5+
export * from "@/data/platform-settings-data";
6+
export * from "@/data/conversations-data";
7+
export * from "@/data/projects-data";

‎src/data/platform-settings-data.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export const platformSettingsData = [
2+
{
3+
title: "account",
4+
options: [
5+
{
6+
checked: true,
7+
label: "Email me when someone follows me",
8+
},
9+
{
10+
checked: false,
11+
label: "Email me when someone answers on my post",
12+
},
13+
{
14+
checked: true,
15+
label: "Email me when someone mentions me",
16+
},
17+
],
18+
},
19+
{
20+
title: "application",
21+
options: [
22+
{
23+
checked: false,
24+
label: "New launches and projects",
25+
},
26+
{
27+
checked: true,
28+
label: "Monthly product updates",
29+
},
30+
{
31+
checked: false,
32+
label: "Subscribe to newsletter",
33+
},
34+
],
35+
},
36+
];
37+
38+
export default platformSettingsData;

‎src/data/projects-data.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
export const projectsData = [
2+
{
3+
img: "/img/home-decor-1.jpeg",
4+
title: "Modern",
5+
tag: "Project #1",
6+
description:
7+
"As Uber works through a huge amount of internal management turmoil.",
8+
route: "/dashboard/profile",
9+
members: [
10+
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
11+
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
12+
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
13+
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
14+
],
15+
},
16+
{
17+
img: "/img/home-decor-2.jpeg",
18+
title: "Scandinavian",
19+
tag: "Project #2",
20+
description:
21+
"Music is something that every person has his or her own specific opinion about.",
22+
route: "/dashboard/profile",
23+
members: [
24+
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
25+
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
26+
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
27+
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
28+
],
29+
},
30+
{
31+
img: "/img/home-decor-3.jpeg",
32+
title: "Minimalist",
33+
tag: "Project #3",
34+
description:
35+
"Different people have different taste, and various types of music.",
36+
route: "/dashboard/profile",
37+
members: [
38+
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
39+
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
40+
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
41+
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
42+
],
43+
},
44+
{
45+
img: "/img/home-decor-4.jpeg",
46+
title: "Gothic",
47+
tag: "Project #4",
48+
description:
49+
"Why would anyone pick blue over pink? Pink is obviously a better color.",
50+
route: "/dashboard/profile",
51+
members: [
52+
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
53+
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
54+
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
55+
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
56+
],
57+
},
58+
];
59+
60+
export default projectsData;

‎src/pages/dashboard/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from "@/pages/dashboard/home";
2+
export * from "@/pages/dashboard/profile";

‎src/pages/dashboard/profile.jsx

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
import {
2+
Card,
3+
CardBody,
4+
CardHeader,
5+
CardFooter,
6+
Avatar,
7+
Typography,
8+
Tabs,
9+
TabsHeader,
10+
Tab,
11+
Switch,
12+
Tooltip,
13+
Button,
14+
} from "@material-tailwind/react";
15+
import {
16+
HomeIcon,
17+
ChatBubbleLeftEllipsisIcon,
18+
Cog6ToothIcon,
19+
PencilIcon,
20+
} from "@heroicons/react/24/solid";
21+
import { Link } from "react-router-dom";
22+
import { ProfileInfoCard, MessageCard } from "@/widgets/cards";
23+
import { platformSettingsData, conversationsData, projectsData } from "@/data";
24+
25+
export function Profile() {
26+
return (
27+
<>
28+
<div className="relative mt-8 h-72 w-full overflow-hidden rounded-xl bg-[url(https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80)] bg-cover bg-center">
29+
<div className="absolute inset-0 h-full w-full bg-blue-500/50" />
30+
</div>
31+
<Card className="mx-3 -mt-16 lg:mx-4">
32+
<CardBody className="p-4">
33+
<div className="mb-10 flex items-center justify-between gap-6">
34+
<div className="flex items-center gap-6">
35+
<Avatar
36+
src="/img/bruce-mars.jpeg"
37+
alt="bruce-mars"
38+
size="xl"
39+
className="rounded-lg shadow-lg shadow-blue-gray-500/40"
40+
/>
41+
<div>
42+
<Typography variant="h5" color="blue-gray" className="mb-1">
43+
Richard Davis
44+
</Typography>
45+
<Typography
46+
variant="small"
47+
className="font-normal text-blue-gray-600"
48+
>
49+
CEO / Co-Founder
50+
</Typography>
51+
</div>
52+
</div>
53+
<div className="w-96">
54+
<Tabs value="app">
55+
<TabsHeader>
56+
<Tab value="app">
57+
<HomeIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
58+
App
59+
</Tab>
60+
<Tab value="message">
61+
<ChatBubbleLeftEllipsisIcon className="-mt-0.5 mr-2 inline-block h-5 w-5" />
62+
Message
63+
</Tab>
64+
<Tab value="settings">
65+
<Cog6ToothIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
66+
Settings
67+
</Tab>
68+
</TabsHeader>
69+
</Tabs>
70+
</div>
71+
</div>
72+
<div className="gird-cols-1 mb-12 grid gap-12 px-4 lg:grid-cols-2 xl:grid-cols-3">
73+
<div>
74+
<Typography variant="h6" color="blue-gray" className="mb-3">
75+
Platform Settings
76+
</Typography>
77+
<div className="flex flex-col gap-12">
78+
{platformSettingsData.map(({ title, options }) => (
79+
<div key={title}>
80+
<Typography className="mb-4 block text-xs font-semibold uppercase text-blue-gray-500">
81+
{title}
82+
</Typography>
83+
<div className="flex flex-col gap-6">
84+
{options.map(({ checked, label }) => (
85+
<Switch
86+
key={label}
87+
id={label}
88+
label={label}
89+
defaultChecked={checked}
90+
labelProps={{
91+
className: "text-sm font-normal text-blue-gray-500",
92+
}}
93+
/>
94+
))}
95+
</div>
96+
</div>
97+
))}
98+
</div>
99+
</div>
100+
<ProfileInfoCard
101+
title="Profile Information"
102+
description="Hi, I'm Alec Thompson, Decisions: If you can't decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality)."
103+
details={{
104+
"first name": "Alec M. Thompson",
105+
mobile: "(44) 123 1234 123",
106+
email: "[email protected]",
107+
location: "USA",
108+
social: (
109+
<div className="flex items-center gap-4">
110+
<i className="fa-brands fa-facebook text-blue-700" />
111+
<i className="fa-brands fa-twitter text-blue-400" />
112+
<i className="fa-brands fa-instagram text-purple-500" />
113+
</div>
114+
),
115+
}}
116+
action={
117+
<Tooltip content="Edit Profile">
118+
<PencilIcon className="h-4 w-4 cursor-pointer text-blue-gray-500" />
119+
</Tooltip>
120+
}
121+
/>
122+
<div>
123+
<Typography variant="h6" color="blue-gray" className="mb-3">
124+
Platform Settings
125+
</Typography>
126+
<ul className="flex flex-col gap-6">
127+
{conversationsData.map((props) => (
128+
<MessageCard
129+
key={props.name}
130+
{...props}
131+
action={
132+
<Button variant="text" size="sm">
133+
reply
134+
</Button>
135+
}
136+
/>
137+
))}
138+
</ul>
139+
</div>
140+
</div>
141+
<div className="px-4 pb-4">
142+
<Typography variant="h6" color="blue-gray" className="mb-2">
143+
Projects
144+
</Typography>
145+
<Typography
146+
variant="small"
147+
className="font-normal text-blue-gray-500"
148+
>
149+
Architects design houses
150+
</Typography>
151+
<div className="mt-6 grid grid-cols-1 gap-12 md:grid-cols-2 xl:grid-cols-4">
152+
{projectsData.map(
153+
({ img, title, description, tag, route, members }) => (
154+
<Card key={title} color="transparent" shadow={false}>
155+
<CardHeader
156+
floated={false}
157+
color="gray"
158+
className="mx-0 mt-0 mb-4 h-64 xl:h-40"
159+
>
160+
<img
161+
src={img}
162+
alt={title}
163+
className="h-full w-full object-cover"
164+
/>
165+
</CardHeader>
166+
<CardBody className="py-0 px-1">
167+
<Typography
168+
variant="small"
169+
className="font-normal text-blue-gray-500"
170+
>
171+
{tag}
172+
</Typography>
173+
<Typography
174+
variant="h5"
175+
color="blue-gray"
176+
className="mt-1 mb-2"
177+
>
178+
{title}
179+
</Typography>
180+
<Typography
181+
variant="small"
182+
className="font-normal text-blue-gray-500"
183+
>
184+
{description}
185+
</Typography>
186+
</CardBody>
187+
<CardFooter className="mt-6 flex items-center justify-between py-0 px-1">
188+
<Link to={route}>
189+
<Button variant="outlined" size="sm">
190+
view project
191+
</Button>
192+
</Link>
193+
<div>
194+
{members.map(({ img, name }, key) => (
195+
<Tooltip key={name} content={name}>
196+
<Avatar
197+
src={img}
198+
alt={name}
199+
size="xs"
200+
variant="circular"
201+
className={`cursor-pointer border-2 border-white ${
202+
key === 0 ? "" : "-ml-2.5"
203+
}`}
204+
/>
205+
</Tooltip>
206+
))}
207+
</div>
208+
</CardFooter>
209+
</Card>
210+
)
211+
)}
212+
</div>
213+
</div>
214+
</CardBody>
215+
</Card>
216+
</>
217+
);
218+
}
219+
220+
export default Profile;

‎src/routes.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ArrowRightOnRectangleIcon,
77
UserPlusIcon,
88
} from "@heroicons/react/24/solid";
9-
import { Home } from "@/pages/dashboard";
9+
import { Home, Profile } from "@/pages/dashboard";
1010

1111
const icon = {
1212
className: "w-5 h-5 text-inherit",
@@ -26,6 +26,7 @@ export const routes = [
2626
icon: <UserCircleIcon {...icon} />,
2727
name: "profile",
2828
path: "/profile",
29+
element: <Profile />,
2930
},
3031
{
3132
icon: <TableCellsIcon {...icon} />,

‎src/widgets/cards/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
export * from "@/widgets/cards/statistics-card";
2+
export * from "@/widgets/cards/profile-info-card";
3+
export * from "@/widgets/cards/message-card";

0 commit comments

Comments
 (0)