Skip to content

Commit

Permalink
build the profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
sajadevo committed Oct 28, 2022
1 parent c3fd85c commit 4e8fdb3
Show file tree
Hide file tree
Showing 16 changed files with 485 additions and 1 deletion.
7 changes: 7 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div id="root"></div>
Expand Down
Binary file added public/img/bruce-mars.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/home-decor-1.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/home-decor-2.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/home-decor-3.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/home-decor-4.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions src/data/conversations-data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
export const conversationsData = [
{
img: "/img/team-1.jpeg",
name: "Sophie B.",
message: "Hi! I need more information...",
},
{
img: "/img/team-2.jpeg",
name: "Alexander",
message: "Awesome work, can you...",
},
{
img: "/img/team-3.jpeg",
name: "Ivanna",
message: "About files I can...",
},
{
img: "/img/team-4.jpeg",
name: "Peterson",
message: "Have a great afternoon...",
},
{
img: "/img/bruce-mars.jpeg",
name: "Bruce Mars",
message: "Hi! I need more information...",
},
];

export default conversationsData;
3 changes: 3 additions & 0 deletions src/data/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@ export * from "@/data/statistics-cards-data";
export * from "@/data/statistics-charts-data";
export * from "@/data/projects-table-data";
export * from "@/data/orders-overview-data";
export * from "@/data/platform-settings-data";
export * from "@/data/conversations-data";
export * from "@/data/projects-data";
38 changes: 38 additions & 0 deletions src/data/platform-settings-data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
export const platformSettingsData = [
{
title: "account",
options: [
{
checked: true,
label: "Email me when someone follows me",
},
{
checked: false,
label: "Email me when someone answers on my post",
},
{
checked: true,
label: "Email me when someone mentions me",
},
],
},
{
title: "application",
options: [
{
checked: false,
label: "New launches and projects",
},
{
checked: true,
label: "Monthly product updates",
},
{
checked: false,
label: "Subscribe to newsletter",
},
],
},
];

export default platformSettingsData;
60 changes: 60 additions & 0 deletions src/data/projects-data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
export const projectsData = [
{
img: "/img/home-decor-1.jpeg",
title: "Modern",
tag: "Project #1",
description:
"As Uber works through a huge amount of internal management turmoil.",
route: "/dashboard/profile",
members: [
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
],
},
{
img: "/img/home-decor-2.jpeg",
title: "Scandinavian",
tag: "Project #2",
description:
"Music is something that every person has his or her own specific opinion about.",
route: "/dashboard/profile",
members: [
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
],
},
{
img: "/img/home-decor-3.jpeg",
title: "Minimalist",
tag: "Project #3",
description:
"Different people have different taste, and various types of music.",
route: "/dashboard/profile",
members: [
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
],
},
{
img: "/img/home-decor-4.jpeg",
title: "Gothic",
tag: "Project #4",
description:
"Why would anyone pick blue over pink? Pink is obviously a better color.",
route: "/dashboard/profile",
members: [
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
],
},
];

export default projectsData;
1 change: 1 addition & 0 deletions src/pages/dashboard/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from "@/pages/dashboard/home";
export * from "@/pages/dashboard/profile";
220 changes: 220 additions & 0 deletions src/pages/dashboard/profile.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
import {
Card,
CardBody,
CardHeader,
CardFooter,
Avatar,
Typography,
Tabs,
TabsHeader,
Tab,
Switch,
Tooltip,
Button,
} from "@material-tailwind/react";
import {
HomeIcon,
ChatBubbleLeftEllipsisIcon,
Cog6ToothIcon,
PencilIcon,
} from "@heroicons/react/24/solid";
import { Link } from "react-router-dom";
import { ProfileInfoCard, MessageCard } from "@/widgets/cards";
import { platformSettingsData, conversationsData, projectsData } from "@/data";

export function Profile() {
return (
<>
<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">
<div className="absolute inset-0 h-full w-full bg-blue-500/50" />
</div>
<Card className="mx-3 -mt-16 lg:mx-4">
<CardBody className="p-4">
<div className="mb-10 flex items-center justify-between gap-6">
<div className="flex items-center gap-6">
<Avatar
src="/img/bruce-mars.jpeg"
alt="bruce-mars"
size="xl"
className="rounded-lg shadow-lg shadow-blue-gray-500/40"
/>
<div>
<Typography variant="h5" color="blue-gray" className="mb-1">
Richard Davis
</Typography>
<Typography
variant="small"
className="font-normal text-blue-gray-600"
>
CEO / Co-Founder
</Typography>
</div>
</div>
<div className="w-96">
<Tabs value="app">
<TabsHeader>
<Tab value="app">
<HomeIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
App
</Tab>
<Tab value="message">
<ChatBubbleLeftEllipsisIcon className="-mt-0.5 mr-2 inline-block h-5 w-5" />
Message
</Tab>
<Tab value="settings">
<Cog6ToothIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
Settings
</Tab>
</TabsHeader>
</Tabs>
</div>
</div>
<div className="gird-cols-1 mb-12 grid gap-12 px-4 lg:grid-cols-2 xl:grid-cols-3">
<div>
<Typography variant="h6" color="blue-gray" className="mb-3">
Platform Settings
</Typography>
<div className="flex flex-col gap-12">
{platformSettingsData.map(({ title, options }) => (
<div key={title}>
<Typography className="mb-4 block text-xs font-semibold uppercase text-blue-gray-500">
{title}
</Typography>
<div className="flex flex-col gap-6">
{options.map(({ checked, label }) => (
<Switch
key={label}
id={label}
label={label}
defaultChecked={checked}
labelProps={{
className: "text-sm font-normal text-blue-gray-500",
}}
/>
))}
</div>
</div>
))}
</div>
</div>
<ProfileInfoCard
title="Profile Information"
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)."
details={{
"first name": "Alec M. Thompson",
mobile: "(44) 123 1234 123",
email: "alecthompson@mail.com",
location: "USA",
social: (
<div className="flex items-center gap-4">
<i className="fa-brands fa-facebook text-blue-700" />
<i className="fa-brands fa-twitter text-blue-400" />
<i className="fa-brands fa-instagram text-purple-500" />
</div>
),
}}
action={
<Tooltip content="Edit Profile">
<PencilIcon className="h-4 w-4 cursor-pointer text-blue-gray-500" />
</Tooltip>
}
/>
<div>
<Typography variant="h6" color="blue-gray" className="mb-3">
Platform Settings
</Typography>
<ul className="flex flex-col gap-6">
{conversationsData.map((props) => (
<MessageCard
key={props.name}
{...props}
action={
<Button variant="text" size="sm">
reply
</Button>
}
/>
))}
</ul>
</div>
</div>
<div className="px-4 pb-4">
<Typography variant="h6" color="blue-gray" className="mb-2">
Projects
</Typography>
<Typography
variant="small"
className="font-normal text-blue-gray-500"
>
Architects design houses
</Typography>
<div className="mt-6 grid grid-cols-1 gap-12 md:grid-cols-2 xl:grid-cols-4">
{projectsData.map(
({ img, title, description, tag, route, members }) => (
<Card key={title} color="transparent" shadow={false}>
<CardHeader
floated={false}
color="gray"
className="mx-0 mt-0 mb-4 h-64 xl:h-40"
>
<img
src={img}
alt={title}
className="h-full w-full object-cover"
/>
</CardHeader>
<CardBody className="py-0 px-1">
<Typography
variant="small"
className="font-normal text-blue-gray-500"
>
{tag}
</Typography>
<Typography
variant="h5"
color="blue-gray"
className="mt-1 mb-2"
>
{title}
</Typography>
<Typography
variant="small"
className="font-normal text-blue-gray-500"
>
{description}
</Typography>
</CardBody>
<CardFooter className="mt-6 flex items-center justify-between py-0 px-1">
<Link to={route}>
<Button variant="outlined" size="sm">
view project
</Button>
</Link>
<div>
{members.map(({ img, name }, key) => (
<Tooltip key={name} content={name}>
<Avatar
src={img}
alt={name}
size="xs"
variant="circular"
className={`cursor-pointer border-2 border-white ${
key === 0 ? "" : "-ml-2.5"
}`}
/>
</Tooltip>
))}
</div>
</CardFooter>
</Card>
)
)}
</div>
</div>
</CardBody>
</Card>
</>
);
}

export default Profile;
3 changes: 2 additions & 1 deletion src/routes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
ArrowRightOnRectangleIcon,
UserPlusIcon,
} from "@heroicons/react/24/solid";
import { Home } from "@/pages/dashboard";
import { Home, Profile } from "@/pages/dashboard";

const icon = {
className: "w-5 h-5 text-inherit",
Expand All @@ -26,6 +26,7 @@ export const routes = [
icon: <UserCircleIcon {...icon} />,
name: "profile",
path: "/profile",
element: <Profile />,
},
{
icon: <TableCellsIcon {...icon} />,
Expand Down
2 changes: 2 additions & 0 deletions src/widgets/cards/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export * from "@/widgets/cards/statistics-card";
export * from "@/widgets/cards/profile-info-card";
export * from "@/widgets/cards/message-card";
Loading

0 comments on commit 4e8fdb3

Please sign in to comment.