-
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.
(refactor, feat): titlebar merges with appbar and sidebar, edit profi…
…le ux tweaked, remove avatar, organisation of components into more files
- Loading branch information
Showing
18 changed files
with
293 additions
and
159 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
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,44 @@ | ||
| import { Button, Tooltip } from "@nextui-org/react"; | ||
| import React, { FC } from "react"; | ||
| import { HiCog } from "react-icons/hi"; | ||
| import { Link } from "react-router-dom"; | ||
| import UserDropdown from "../dropdowns/user/userdropdown.component"; | ||
| import { User } from "@/stores/UserStore"; | ||
|
|
||
| interface IProps { | ||
| dashboard: boolean; | ||
| user: User; | ||
| cookies: any; | ||
| } | ||
|
|
||
| /** | ||
| * @author | ||
| * @function @AppbarEnd | ||
| **/ | ||
|
|
||
| export const AppbarEnd: FC<IProps> = ({ dashboard, user, cookies }) => { | ||
| return ( | ||
| <div className="ml-auto"> | ||
| {dashboard && ( | ||
| <div className="flex items-center"> | ||
| <Tooltip content="Settings" placement="bottom"> | ||
| <Link to="/settings"> | ||
| <Button className="bg-content2 mr-2" size="md" isIconOnly> | ||
| <HiCog size="25" className="w-auto" /> | ||
| </Button> | ||
| </Link> | ||
| </Tooltip> | ||
| <UserDropdown | ||
| user={{ | ||
| username: user?.username || "", | ||
| verified: user?.verified || false, | ||
| accessToken: cookies.accessToken || "", | ||
| moderator: user?.moderator, | ||
| pfp: user?.pfp, | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
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,56 @@ | ||
| import { SidebarStore } from "@/stores/SidebarStore"; | ||
| import { Button, Tooltip } from "@nextui-org/react"; | ||
| import React, { FC } from "react"; | ||
| import { FiArrowLeft, FiMenu } from "react-icons/fi"; | ||
| import { Link } from "react-router-dom"; | ||
| import { SearchInput } from "../search/search-input.component"; | ||
| import { observer } from "mobx-react"; | ||
|
|
||
| interface IProps { | ||
| isSettings: boolean; | ||
| pageName: string; | ||
| searchBarVisible: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * @author | ||
| * @function @AppbarStart | ||
| **/ | ||
|
|
||
| const AppbarStartComp: FC<IProps> = ({ | ||
| isSettings, | ||
| pageName, | ||
| searchBarVisible, | ||
| }) => { | ||
| const { open } = SidebarStore; | ||
|
|
||
| return ( | ||
| <nav className="flex items-center text-base mr-auto"> | ||
| {isSettings ? ( | ||
| <Link to="/store"> | ||
| <Button className="mr-5" startContent={<FiArrowLeft size={20} />}> | ||
| Back | ||
| </Button> | ||
| </Link> | ||
| ) : ( | ||
| <Tooltip | ||
| placement="bottom" | ||
| content={open ? "Close Sidebar" : "Open Sidebar"} | ||
| > | ||
| <Button | ||
| onPress={() => SidebarStore.setOpen(!open)} | ||
| className="mr-5" | ||
| isIconOnly | ||
| color={open ? "primary" : "default"} | ||
| > | ||
| {<FiMenu size={24} />} | ||
| </Button> | ||
| </Tooltip> | ||
| )} | ||
| <p className="font-heading text-2xl uppercase mr-10">{pageName}</p> | ||
| {searchBarVisible && <SearchInput searchType="game" />} | ||
| </nav> | ||
| ); | ||
| }; | ||
|
|
||
| export const AppbarStart = observer(AppbarStartComp); |
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
42 changes: 42 additions & 0 deletions
42
client/src/components/appbar/verification-banner.component.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,42 @@ | ||
| import { sendVerificationLink } from "@/handlers/api"; | ||
| import { User } from "@/stores/UserStore"; | ||
| import { Button } from "@nextui-org/react"; | ||
| import React, { FC } from "react"; | ||
| import { HiBellAlert } from "react-icons/hi2"; | ||
|
|
||
| interface IProps { | ||
| user: User; | ||
| loading: boolean; | ||
| setLoading: any; | ||
| } | ||
|
|
||
| /** | ||
| * @author | ||
| * @function @VerificationBanner | ||
| **/ | ||
|
|
||
| export const VerificationBanner: FC<IProps> = ({ | ||
| user, | ||
| loading, | ||
| setLoading, | ||
| }) => { | ||
| return ( | ||
| <div className="bg-warning items-center flex p-2 bg-opacity-10 mb-5 rounded-lg text-warning"> | ||
| <HiBellAlert size={20} />{" "} | ||
| <span className="ml-2 font-medium"> | ||
| Some features are disabled. Please verify your e-mail to secure your | ||
| account. | ||
| </span> | ||
| <Button | ||
| onPress={() => | ||
| sendVerificationLink(user?.tokens.accessToken || "", setLoading) | ||
| } | ||
| className="ml-auto" | ||
| color="warning" | ||
| isLoading={loading} | ||
| > | ||
| Resend Verification Link | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; |
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,34 @@ | ||
| import { SearchStore, SearchType } from "@/stores/SearchStore"; | ||
| import { Input } from "@nextui-org/react"; | ||
| import { observer } from "mobx-react"; | ||
| import React, { FC } from "react"; | ||
|
|
||
| interface IProps { | ||
| searchType: SearchType; | ||
| } | ||
|
|
||
| /** | ||
| * @author | ||
| * @function @SearchInput | ||
| **/ | ||
|
|
||
| const SearchInputComp: FC<IProps> = ({ searchType }) => { | ||
| return ( | ||
| <Input | ||
| onChange={(e) => { | ||
| SearchStore.setSearch({ | ||
| type: searchType || "game", | ||
| query: e.target.value, | ||
| }); | ||
| }} | ||
| className="mr-5" | ||
| placeholder="Search..." | ||
| value={ | ||
| (SearchStore.search.type == searchType || "game") && | ||
| SearchStore.search.query | ||
| } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export const SearchInput = observer(SearchInputComp); |
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
Oops, something went wrong.