-
Notifications
You must be signed in to change notification settings - Fork 0
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
1 parent
d6d2241
commit 72281b2
Showing
13 changed files
with
231 additions
and
17 deletions.
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
163 changes: 163 additions & 0 deletions
163
packages/frontend/src/mobile-components/profile/UserMenu.tsx
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,163 @@ | ||
import { FC } from "react"; | ||
import { twMerge } from "@alphaday/ui-kit"; | ||
import { Link, useHistory } from "react-router-dom"; | ||
import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-down2.svg"; | ||
import { ReactComponent as DocSVG } from "src/assets/icons/doc.svg"; | ||
import { ReactComponent as LogoutSVG } from "src/assets/icons/logout.svg"; | ||
import { ReactComponent as StarSVG } from "src/assets/icons/star.svg"; | ||
import { ReactComponent as UserSVG } from "src/assets/icons/user.svg"; | ||
|
||
const menu = [ | ||
{ | ||
id: 1, | ||
icon: UserSVG, | ||
title: "Edit profile", | ||
subtext: "Edit your profile", | ||
link: "/profile", | ||
}, | ||
{ | ||
id: 2, | ||
icon: DocSVG, | ||
title: "Privacy policy", | ||
subtext: "How we work & use your data", | ||
link: "profile/privacy", | ||
}, | ||
{ | ||
id: 3, | ||
icon: StarSVG, | ||
title: "Rate us", | ||
subtext: "Tell us what we think", | ||
link: "profile/rate", | ||
}, | ||
{ | ||
id: 4, | ||
icon: LogoutSVG, | ||
title: "Log out", | ||
subtext: null, | ||
link: "profile/log-out", | ||
}, | ||
]; | ||
|
||
const NonAuthenticatedSection = () => { | ||
return ( | ||
<div className="flex flex-col flex-start w-full items-start mb-4"> | ||
<p className="mb-0 fontGroup-highlight"> | ||
Sign up to unlock the complete experience{" "} | ||
</p> | ||
<Link | ||
to="/auth" | ||
className="flex fontGroup-highlight !font-semibold py-3 px-4 bg-accentVariant100 hover:bg-accentVariant200 w-full mt-5 justify-center rounded-lg" | ||
> | ||
Sign up | ||
</Link> | ||
<p className="mt-6"> | ||
<span className="mt-6">Already have an account?</span> | ||
<Link | ||
to="/auth" | ||
className="ml-2 font-semibold border-b border-accentVariant100" | ||
> | ||
Log in here | ||
</Link> | ||
</p> | ||
</div> | ||
); | ||
}; | ||
|
||
const AuthenticatedSection = () => { | ||
return ( | ||
<div className="flex flex-col flex-start w-full items-start mb-4"> | ||
<div className="flex"> | ||
<img | ||
src=" https://tailwindui.com/img/avatar-3.jpg" | ||
alt="username" | ||
className="mr-3 w-[60px] h-[60px] rounded-full border border-solid border-green-400" | ||
/> | ||
<p className="m-0 fontGroup-major self-center">Hi Username!</p> | ||
</div> | ||
<div className="relative flex flex-col items-center fontGroup-highlight !font-semibold py-4 px-4 bg-backgroundVariant300 w-full mt-5 justify-center rounded-lg"> | ||
<span className="w-1.5 h-1.5 rounded-full bg-secondaryOrangeSoda absolute top-4 right-4" /> | ||
<p className="block ">Some major notification here...</p> | ||
<Link | ||
to="/notifications" | ||
className="fontGroup-highlight border-b border-accentVariant100 m-0" | ||
> | ||
See all notifications | ||
</Link> | ||
</div> | ||
<p className="mt-6"> | ||
<span className="mt-6">Already have an account?</span> | ||
<Link | ||
to="/#" | ||
className="ml-2 font-semibold border-b border-accentVariant100" | ||
> | ||
Log in here | ||
</Link> | ||
</p> | ||
</div> | ||
); | ||
}; | ||
|
||
interface IUserMenu { | ||
// avatar: string; | ||
// username: string; | ||
// isOpen: boolean; | ||
// onClose: () => void; | ||
isAuthenticated: boolean; | ||
} | ||
const UserMenu: FC<IUserMenu> = ({ isAuthenticated }) => { | ||
const history = useHistory(); | ||
|
||
const navigate = (link: string) => { | ||
history.push(link); | ||
}; | ||
return ( | ||
<div className="mx-5"> | ||
{/* <div className="flex flex-start w-full items-center mb-4"> | ||
<ChevronSVG | ||
onClick={onClose} | ||
tabIndex={0} | ||
role="button" | ||
className="w-6 h-6 mr-2 rotate-180 self-center -ml-1.5" | ||
/> | ||
</div> */} | ||
{isAuthenticated ? ( | ||
<AuthenticatedSection /> | ||
) : ( | ||
<NonAuthenticatedSection /> | ||
)} | ||
<div className="mt-10 w-full"> | ||
{menu.map((item) => ( | ||
<div | ||
onClick={() => | ||
isAuthenticated ? navigate(item.link) : {} | ||
} | ||
tabIndex={0} | ||
role="button" | ||
key={item.id} | ||
className={twMerge( | ||
"flex w-full justify-start items-center border-b border-primaryVariant100 pb-2.5 pt-2.5 last:pb-0 last:border-none first:pt-0 cursor-pointer", | ||
isAuthenticated | ||
? "text-primary" | ||
: "text-primaryVariant100" | ||
)} | ||
> | ||
<item.icon className="mr-4 w-6 h-6" /> | ||
<div className="flex flex-grow min-w-max justify-between items-center"> | ||
<div className="flex flex-col w-full"> | ||
<span className="block fontGroup-highlightSemi"> | ||
{item.title} | ||
</span> | ||
<span className="fontGroup-support"> | ||
{item.subtext} | ||
</span> | ||
</div> | ||
<ChevronSVG className="h-3.5" /> | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default UserMenu; |
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,22 @@ | ||
import { useHistory } from "react-router-dom"; | ||
import { useAuth } from "src/api/hooks"; | ||
import PagedMobileLayout from "src/layout/PagedMobileLayout"; | ||
import UserMenu from "src/mobile-components/profile/UserMenu"; | ||
|
||
const UserSettings: React.FC = () => { | ||
const history = useHistory(); | ||
const { isAuthenticated } = useAuth(); | ||
|
||
return ( | ||
<PagedMobileLayout | ||
title="" | ||
handleBack={() => | ||
history.length > 1 ? history.goBack() : history.push("/") | ||
} | ||
> | ||
<UserMenu isAuthenticated={isAuthenticated} /> | ||
</PagedMobileLayout> | ||
); | ||
}; | ||
|
||
export default UserSettings; |
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
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