-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
485 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export * from "@/pages/dashboard/home"; | ||
export * from "@/pages/dashboard/profile"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; |
Oops, something went wrong.