Merge branch 'myCheck/working-develop' into feature/triple-column-layout
This commit is contained in:
Maximus
commit
9376f9db09
16
src/App.tsx
Normal file
16
src/App.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Libraries */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import React from "react";
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Application root component */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/**
|
||||||
|
* Application root component
|
||||||
|
* @return {JSX.Element}
|
||||||
|
*/
|
||||||
|
function App() {
|
||||||
|
return <div>Hello world!</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
@ -1,5 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
// import { Footer } from "./parts/Footer";
|
import { Footer } from "./parts/Footer";
|
||||||
import Header from "./parts/Header";
|
import Header from "./parts/Header";
|
||||||
type Props = {
|
type Props = {
|
||||||
header?: React.ReactElement;
|
header?: React.ReactElement;
|
||||||
|
|||||||
@ -1,115 +0,0 @@
|
|||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Imports */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import React, { Fragment } from "react";
|
|
||||||
import { Menu, Transition } from "@headlessui/react";
|
|
||||||
import { PropsPartion } from "./ContextMenuItem";
|
|
||||||
import classNames from "classnames";
|
|
||||||
import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
|
|
||||||
type ChildType = React.ReactElement<any & PropsPartion[]>;
|
|
||||||
type ChildrenType = ChildType[] | ChildType;
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Component props */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
type MenuProps = {
|
|
||||||
emphasis?: "high" | "low";
|
|
||||||
disabled?: boolean;
|
|
||||||
className?: string | undefined;
|
|
||||||
button: React.ReactNode;
|
|
||||||
children: ChildrenType;
|
|
||||||
};
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Styles */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
const MenuButtonStyle = `
|
|
||||||
inline-flex
|
|
||||||
justify-center w-full
|
|
||||||
cursor-default
|
|
||||||
rounded
|
|
||||||
border border-gray-100
|
|
||||||
outline-8
|
|
||||||
py-2
|
|
||||||
px-2
|
|
||||||
text-base`;
|
|
||||||
|
|
||||||
const MenuItemStyle = `
|
|
||||||
absolute
|
|
||||||
left-0
|
|
||||||
mt-2 w-60
|
|
||||||
origin-top-left
|
|
||||||
rounded
|
|
||||||
shadow-lg
|
|
||||||
focus:outline-none
|
|
||||||
py-2 px-4 sm:text-sm`;
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Component implementation */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/**
|
|
||||||
* Use width ContextMenuAction.tsx , for example:
|
|
||||||
* <ContextMenu button="MyButton" emphasis="low/high">
|
|
||||||
* <ContextMenuAction
|
|
||||||
* caption="First Menu"
|
|
||||||
* icon={icon}
|
|
||||||
* action={() => alert('click')}
|
|
||||||
* ></ContextMenuAction>
|
|
||||||
* ...
|
|
||||||
* </ContextMenu>
|
|
||||||
*/
|
|
||||||
export default function ContextMenu({
|
|
||||||
button,
|
|
||||||
children,
|
|
||||||
className,
|
|
||||||
emphasis = "low",
|
|
||||||
}: MenuProps) {
|
|
||||||
return (
|
|
||||||
<Menu as="div" className="relative inline-block text-right">
|
|
||||||
{({ open }) => (
|
|
||||||
<>
|
|
||||||
<Menu.Button
|
|
||||||
className={classNames([
|
|
||||||
`${MenuButtonStyle}`,
|
|
||||||
{
|
|
||||||
"hover:bg-gray-100 font-bold uppercase": emphasis === "high",
|
|
||||||
},
|
|
||||||
className,
|
|
||||||
])}
|
|
||||||
>
|
|
||||||
{button}
|
|
||||||
<SelectIcon
|
|
||||||
className={`${
|
|
||||||
open ? "rotate-180 transform" : "font-normal"
|
|
||||||
} my-2 mx-3 h-2 w-3 flex-center`}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</Menu.Button>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
as={Fragment}
|
|
||||||
show={open}
|
|
||||||
enter="transition ease-out duration-100"
|
|
||||||
enterFrom="transform opacity-0 scale-95"
|
|
||||||
enterTo="transform opacity-100 scale-100"
|
|
||||||
leave="transition ease-in duration-75"
|
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
|
||||||
leaveTo="transform opacity-0 scale-95"
|
|
||||||
>
|
|
||||||
<Menu.Items
|
|
||||||
static
|
|
||||||
className={classNames([
|
|
||||||
className,
|
|
||||||
`${MenuItemStyle}`,
|
|
||||||
{ "ml-2": emphasis === "high" },
|
|
||||||
])}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Menu.Items>
|
|
||||||
</Transition>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import classNames from "classnames";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
action: Function;
|
|
||||||
caption: string;
|
|
||||||
disabled?: boolean;
|
|
||||||
icon?: React.ReactNode;
|
|
||||||
className?: string | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ContextMenuAction({
|
|
||||||
action,
|
|
||||||
caption,
|
|
||||||
disabled,
|
|
||||||
icon,
|
|
||||||
className,
|
|
||||||
}: Props) {
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
onClick={(e) => action(e)}
|
|
||||||
className={classNames([
|
|
||||||
"group flex px-2 rounded items-center text-base hover:bg-gray-100",
|
|
||||||
className,
|
|
||||||
])}
|
|
||||||
>
|
|
||||||
{icon && <div className="mr-2 h-5 w-5">{icon}</div>}
|
|
||||||
<span className="px-2 py-2">{caption}</span>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,163 +0,0 @@
|
|||||||
import classNames from "classnames";
|
|
||||||
import { useState } from "react";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Components */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import ContextMenuAction from "./ContextMenuAction";
|
|
||||||
import ContextMenu from "./ContextMenu";
|
|
||||||
import Logofreeland from "./Logofreeland";
|
|
||||||
import { Button } from "./Button/Button";
|
|
||||||
import Avatar from "./Avatar";
|
|
||||||
import Navbar from "./Navbar";
|
|
||||||
import Bell from "./Bell";
|
|
||||||
import Logo from "./Logo";
|
|
||||||
import Link from "./Link";
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Icons */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
|
|
||||||
import { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
|
|
||||||
import { ReactComponent as SVGFile } from "assets/svg/file.svg";
|
|
||||||
import { ReactComponent as SVGEye } from "assets/svg/eye.svg";
|
|
||||||
|
|
||||||
const Header = () => {
|
|
||||||
const [authenticated, setAuthenticated] = useState(false);
|
|
||||||
const onClick = () => setAuthenticated(true);
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Implement Header Component */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
return (
|
|
||||||
<header
|
|
||||||
className="header flex justify-between items-center box-border w-full
|
|
||||||
border border-gray-75
|
|
||||||
h-16
|
|
||||||
px-4
|
|
||||||
gap-5
|
|
||||||
md:gap-20
|
|
||||||
lg:gap-40 lg:px-8
|
|
||||||
xl:gap-60 xl:px-16"
|
|
||||||
>
|
|
||||||
{/* Logo and Menu */}
|
|
||||||
<div className="flex gap-8 xl:gap-x-16">
|
|
||||||
{/* Logo - start - className="w-7 sm:w-10 " /> */}
|
|
||||||
<a className="Logo flex items-center gap-1 sm:gap-2 " href="/">
|
|
||||||
<Logo
|
|
||||||
className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
|
|
||||||
/>
|
|
||||||
<Logofreeland
|
|
||||||
className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
{/* Logo - end - */}
|
|
||||||
|
|
||||||
{/* Menu( Create new - My library - About ) Start */}
|
|
||||||
<div
|
|
||||||
className="hidden lg:flex items-center
|
|
||||||
gap-2"
|
|
||||||
>
|
|
||||||
{/* Link Create now - start - */}
|
|
||||||
<Link className="text-blue-500 px-4 font-bold uppercase" href="#">
|
|
||||||
Create new
|
|
||||||
</Link>
|
|
||||||
{/* Link Create now - end - */}
|
|
||||||
|
|
||||||
{/* Dropdown Menu My library - start - */}
|
|
||||||
<ContextMenu
|
|
||||||
emphasis="high"
|
|
||||||
button="My library"
|
|
||||||
className="border-none uppercase"
|
|
||||||
>
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="My Publications"
|
|
||||||
action={() => console.log("My publications")}
|
|
||||||
icon={<SVGFile className="stroke-black " />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="My Favorites"
|
|
||||||
action={() => console.log("My Favorites")}
|
|
||||||
icon={<SVGFavoriteOutlined className="stroke-black" />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="My Collections"
|
|
||||||
action={() => console.log("My Collections")}
|
|
||||||
icon={<SVGFolder className="stroke-black fill-black" />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="Recent Viewed"
|
|
||||||
action={() => console.log("Recent Viewed")}
|
|
||||||
icon={<SVGEye className="stroke-black " />}
|
|
||||||
></ContextMenuAction>
|
|
||||||
</ContextMenu>
|
|
||||||
{/* Dropdown Menu My library - End - */}
|
|
||||||
|
|
||||||
{/* Dropdown Menu About - start - */}
|
|
||||||
<ContextMenu
|
|
||||||
emphasis="high"
|
|
||||||
button="About"
|
|
||||||
className="border-none uppercase"
|
|
||||||
>
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="About Freeland"
|
|
||||||
action={() => console.log("About Freeland")}
|
|
||||||
></ContextMenuAction>
|
|
||||||
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="Contact Us"
|
|
||||||
action={() => console.log("Contact Us")}
|
|
||||||
></ContextMenuAction>
|
|
||||||
|
|
||||||
<ContextMenuAction
|
|
||||||
caption="Help"
|
|
||||||
action={() => console.log("Help")}
|
|
||||||
></ContextMenuAction>
|
|
||||||
</ContextMenu>
|
|
||||||
{/* Dropdown Menu About - End - */}
|
|
||||||
</div>
|
|
||||||
{/* Menu( Create new - My library - About ) End */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sign in - Sign up - Notification - Avatar - Burger */}
|
|
||||||
<div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
|
|
||||||
{!authenticated
|
|
||||||
? [
|
|
||||||
<Button
|
|
||||||
emphasis="low"
|
|
||||||
onClick={onClick}
|
|
||||||
className="text-xs sm:px-4 sm:text-sm "
|
|
||||||
>
|
|
||||||
Sign in
|
|
||||||
</Button>,
|
|
||||||
<Button
|
|
||||||
emphasis="medium"
|
|
||||||
className="hidden md:flex"
|
|
||||||
onClick={onClick}
|
|
||||||
>
|
|
||||||
Sign up
|
|
||||||
</Button>,
|
|
||||||
]
|
|
||||||
: [
|
|
||||||
<Button emphasis="low">
|
|
||||||
<Button.Icon>
|
|
||||||
<Bell className="h-6 w-6" />
|
|
||||||
</Button.Icon>
|
|
||||||
</Button>,
|
|
||||||
|
|
||||||
<Button emphasis="low" className="hidden lg:flex">
|
|
||||||
<Button.Icon>
|
|
||||||
<Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
|
|
||||||
</Button.Icon>
|
|
||||||
</Button>,
|
|
||||||
]}
|
|
||||||
{/* Burger component will be shown for the small screens */}
|
|
||||||
<Navbar className="block lg:hidden" />
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {ReactComponent as SVGLogotype} from 'assets/svg/logotype.svg';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Horizontal variant of logotype component
|
|
||||||
* @param {string} name Name of service to attach to logotype
|
|
||||||
* @return {React.ReactNode}
|
|
||||||
*/
|
|
||||||
export default function Logotype({name}: Props): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div className="inline-flex flex-row flex-nowrap items-center">
|
|
||||||
<div className="flex-none">
|
|
||||||
<Link to="/">
|
|
||||||
<SVGLogotype className="w-8 h-8 mr-2" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="flex-initial text-2xl font-bold">
|
|
||||||
{name ?? ''} {process.env.REACT_APP_CMS_APP_NAME?.toLowerCase()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -5,8 +5,8 @@ import classNames from "classnames";
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Components */
|
/* Components */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import ContextMenuAction from "./ContextMenuAction";
|
import ContextMenuAction from "./drop-down-menu/ContextMenuAction";
|
||||||
import ContextMenu from "./ContextMenu";
|
import ContextMenu from "./drop-down-menu/ContextMenu";
|
||||||
import { Button } from "./Button/Button";
|
import { Button } from "./Button/Button";
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import React, { Fragment } from "react";
|
|||||||
import { Menu, Transition } from "@headlessui/react";
|
import { Menu, Transition } from "@headlessui/react";
|
||||||
import { PropsPartion } from "./ContextMenuItem";
|
import { PropsPartion } from "./ContextMenuItem";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
|
import { SVGCaretDown } from "components/icons";
|
||||||
type ChildType = React.ReactElement<any & PropsPartion[]>;
|
type ChildType = React.ReactElement<any & PropsPartion[]>;
|
||||||
type ChildrenType = ChildType[] | ChildType;
|
type ChildrenType = ChildType[] | ChildType;
|
||||||
|
|
||||||
@ -25,13 +25,13 @@ type MenuProps = {
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
const MenuButtonStyle = `
|
const MenuButtonStyle = `
|
||||||
|
items-center
|
||||||
inline-flex
|
inline-flex
|
||||||
justify-center w-full
|
justify-center w-full
|
||||||
cursor-default
|
cursor-default
|
||||||
rounded
|
rounded
|
||||||
border border-gray-100
|
border border-gray-100
|
||||||
outline-8
|
outline-8
|
||||||
bg-white
|
|
||||||
py-2
|
py-2
|
||||||
pl-4
|
pl-4
|
||||||
pr-1
|
pr-1
|
||||||
@ -52,16 +52,16 @@ py-2 px-4 sm:text-sm`;
|
|||||||
/* Component implementation */
|
/* Component implementation */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/**
|
/**
|
||||||
* Use width ContextMenuAction.tsx , for example:
|
* Use width ContextMenuAction.tsx , for example:
|
||||||
* <ContextMenu button="MyButton" emphasis="low/high">
|
* <ContextMenu button="MyButton" emphasis="low/high">
|
||||||
* <ContextMenuAction
|
* <ContextMenuAction
|
||||||
* caption="First Menu"
|
* caption="First Menu"
|
||||||
* icon={icon}
|
* icon={icon}
|
||||||
* action={() => alert('click')}
|
* action={() => alert('click')}
|
||||||
* ></ContextMenuAction>
|
* ></ContextMenuAction>
|
||||||
* ...
|
* ...
|
||||||
* </ContextMenu>
|
* </ContextMenu>
|
||||||
*/
|
*/
|
||||||
export default function ContextMenu({
|
export default function ContextMenu({
|
||||||
button,
|
button,
|
||||||
children,
|
children,
|
||||||
@ -75,15 +75,17 @@ export default function ContextMenu({
|
|||||||
<Menu.Button
|
<Menu.Button
|
||||||
className={classNames([
|
className={classNames([
|
||||||
`${MenuButtonStyle}`,
|
`${MenuButtonStyle}`,
|
||||||
{ "bg-gray-100 font-bold uppercase": emphasis === "high" },
|
{
|
||||||
|
"hover:bg-gray-100 font-bold uppercase": emphasis === "high",
|
||||||
|
},
|
||||||
className,
|
className,
|
||||||
])}
|
])}
|
||||||
>
|
>
|
||||||
{button}
|
{button}
|
||||||
<SelectIcon
|
<SVGCaretDown
|
||||||
className={`${
|
className={`${
|
||||||
open ? "rotate-180 transform" : "font-normal"
|
open ? "rotate-180 transform" : "font-normal"
|
||||||
} my-2 mx-3 h-2 w-3 flex-center`}
|
} my-2 mx-3 w-4 flex-center fill-gray-900 stroke-gray-900`}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</Menu.Button>
|
</Menu.Button>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
action: Function;
|
action: Function;
|
||||||
caption: string;
|
caption: string;
|
||||||
@ -18,19 +17,16 @@ export default function ContextMenuAction({
|
|||||||
className,
|
className,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
return (
|
return (
|
||||||
<button
|
<a
|
||||||
|
href="#"
|
||||||
onClick={(e) => action(e)}
|
onClick={(e) => action(e)}
|
||||||
disabled={disabled}
|
|
||||||
className={classNames([
|
className={classNames([
|
||||||
"group flex items-center text-base",
|
"group flex px-2 rounded items-center text-base hover:bg-gray-100",
|
||||||
{ "opacity-50": disabled, "cursor-default": !disabled },
|
|
||||||
className,
|
className,
|
||||||
])}
|
])}
|
||||||
>
|
>
|
||||||
{icon && <div className="mr-2 h-5 w-5">{icon}</div>}
|
{icon && <div className="mr-2 h-5 w-5">{icon}</div>}
|
||||||
<span className="px-2 py-2">{caption}</span>
|
<span className="px-2 py-2">{caption}</span>
|
||||||
</button>
|
</a>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -34,7 +34,7 @@ export { ReactComponent as SVGFilter } from "assets/svg/filter.svg";
|
|||||||
export { ReactComponent as SVGFlag } from "assets/svg/flag.svg";
|
export { ReactComponent as SVGFlag } from "assets/svg/flag.svg";
|
||||||
export { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
|
export { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
|
||||||
export { ReactComponent as SVGFormula } from "assets/svg/formula.svg";
|
export { ReactComponent as SVGFormula } from "assets/svg/formula.svg";
|
||||||
export { ReactComponent as SVGFundomental } from "assets/svg/fundomental.svg";
|
export { ReactComponent as SVGFundamental } from "assets/svg/fundamental.svg";
|
||||||
export { ReactComponent as SVGGrid } from "assets/svg/grid.svg";
|
export { ReactComponent as SVGGrid } from "assets/svg/grid.svg";
|
||||||
export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
|
export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
|
||||||
export { ReactComponent as SVGHelp } from "assets/svg/help.svg";
|
export { ReactComponent as SVGHelp } from "assets/svg/help.svg";
|
||||||
|
|||||||
@ -1,113 +1,174 @@
|
|||||||
/* -------------------------------------------------------------------------- */
|
import classNames from "classnames";
|
||||||
/* Libs */
|
import { useState } from "react";
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import React, { useEffect } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Components */
|
/* Components */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import ContextMenu from "components/containers/contextmenu/ContextMenu";
|
import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
|
||||||
import Logotype from "components/Logotype";
|
import ContextMenu from "../drop-down-menu/ContextMenu";
|
||||||
import Avatar from "components/containers/Avatar";
|
import Logofreeland from "../Logofreeland";
|
||||||
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
|
import { Button } from "../Button/Button";
|
||||||
/* -------------------------------------------------------------------------- */
|
import Avatar from "../Avatar";
|
||||||
/* SVG */
|
import Navbar from "../Navbar";
|
||||||
/* -------------------------------------------------------------------------- */
|
import Logo from "../Logo";
|
||||||
/* -------------------------------------------------------------------------- */
|
import { RouterLink } from "components/typography/RouterLink";
|
||||||
/* Hooks */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import { useUserStore } from "user/data/userSlice";
|
|
||||||
import { useUserViewModel } from "user/controller/userViewModel";
|
|
||||||
import { useUIStore } from "ui/data/uiSlice";
|
|
||||||
import { useUIViewModel } from "ui/controller/uiViewModel";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import ServicesNavigationContext from "services/views/ServicesNavigationContext";
|
|
||||||
import { useAuthStore } from "auth/data/authSlice";
|
|
||||||
import { useAuthViewModel } from "auth/controller/useAuthViewModel";
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Main application header */
|
/* Icons */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
type Props = {
|
import {
|
||||||
title?: string;
|
SVGBellNotification,
|
||||||
}
|
SVGBell,
|
||||||
/**
|
SVGFavoriteOutlined,
|
||||||
* Main application header
|
SVGFolder,
|
||||||
* @return {JSX.Element}
|
SVGFile,
|
||||||
*/
|
SVGEye,
|
||||||
export default function Header({title}: Props) {
|
} from "components/icons";
|
||||||
|
|
||||||
const {t} = useTranslation();
|
const Header = () => {
|
||||||
const userStore = useUserStore();
|
const [authenticated, setAuthenticated] = useState(false);
|
||||||
const uiStore = useUIStore();
|
const onClick = () => setAuthenticated(true);
|
||||||
const authStore = useAuthStore();
|
const [notification, setNotification] = useState(false);
|
||||||
const {signOut} = useAuthViewModel(authStore);
|
|
||||||
const { user, isLoading, getUser } = useUserViewModel(userStore);
|
|
||||||
const { showSearchbar } = useUIViewModel(uiStore);
|
|
||||||
|
|
||||||
useEffect(() => {
|
/* -------------------------------------------------------------------------- */
|
||||||
getUser();
|
/* Implement Header Component */
|
||||||
}, [getUser]);
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
return (
|
return (
|
||||||
|
<header
|
||||||
|
className="header flex justify-between items-center box-border w-full
|
||||||
|
border border-gray-75
|
||||||
|
h-16
|
||||||
|
px-4
|
||||||
|
gap-5
|
||||||
|
md:gap-20
|
||||||
|
lg:gap-40 lg:px-8
|
||||||
|
xl:gap-60 xl:px-16"
|
||||||
|
>
|
||||||
|
{/* Logo and Menu */}
|
||||||
|
<div className="flex gap-8 xl:gap-x-16">
|
||||||
|
{/* Logo - start - className="w-7 sm:w-10 " /> */}
|
||||||
|
<a className="Logo flex items-center gap-1 sm:gap-2 " href="/">
|
||||||
|
<Logo
|
||||||
|
className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
|
||||||
|
/>
|
||||||
|
<Logofreeland
|
||||||
|
className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
{/* Logo - end - */}
|
||||||
|
|
||||||
|
{/* Menu( Create new - My library - About ) Start */}
|
||||||
<div
|
<div
|
||||||
className="flex items-center flex-row
|
className="hidden lg:flex items-center
|
||||||
justify-between py-2.5 px-8 bg-gray-300/5 h-14"
|
gap-2"
|
||||||
>
|
>
|
||||||
<div className="flex-none flex items-center space-x-3">
|
{/* Link Create now - start - */}
|
||||||
<ServicesNavigationContext />
|
<RouterLink
|
||||||
<Logotype name={title} />
|
className="text-blue-500 px-4 font-bold uppercase"
|
||||||
</div>
|
to="/create-new"
|
||||||
<div className="flex-none flex items-center space-x-3">
|
>
|
||||||
|
Create new
|
||||||
|
</RouterLink>
|
||||||
|
{/* Link Create now - end - */}
|
||||||
|
|
||||||
|
{/* Dropdown Menu My library - start - */}
|
||||||
<ContextMenu
|
<ContextMenu
|
||||||
button={<Avatar className="p-2" />}
|
emphasis="high"
|
||||||
className="absolute w-full min-h-14 sm:w-80 -bottom-3
|
button="My library"
|
||||||
sm:top-auto sm:bottom-auto right-0
|
className="border-none uppercase"
|
||||||
mt-5 z-10 sm:transform -translate-1/2
|
|
||||||
origin-top-center flex flex-col items-center justify-center !pt-8"
|
|
||||||
>
|
>
|
||||||
<Logotype name="techpal" />
|
|
||||||
<div className="w-full my-4 flex justify-center">
|
|
||||||
<Avatar width="27%" className="p-3.5" />
|
|
||||||
</div>
|
|
||||||
<div className="text-xl text-center font-bold leading-relaxed">
|
|
||||||
{isLoading
|
|
||||||
? " "
|
|
||||||
: t("hellousr", {
|
|
||||||
username: [user?.lastname, user?.firstname].join(" "),
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-center text-gray-300 leading-relaxed mb-5">
|
|
||||||
{isLoading ? " " : user?.email}
|
|
||||||
</div>
|
|
||||||
<ContextMenuAction
|
<ContextMenuAction
|
||||||
action={() => {
|
caption="My Publications"
|
||||||
navigate('/personal-information');
|
action={() => console.log("My publications")}
|
||||||
}}
|
icon={<SVGFile className="stroke-black " />}
|
||||||
disabled={isLoading}
|
></ContextMenuAction>
|
||||||
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
|
|
||||||
caption="Account settings"
|
|
||||||
|
|
||||||
/>
|
|
||||||
<ContextMenuAction
|
<ContextMenuAction
|
||||||
action={() => {
|
caption="My Favorites"
|
||||||
navigate("");
|
action={() => console.log("My Favorites")}
|
||||||
}}
|
icon={<SVGFavoriteOutlined className="stroke-black" />}
|
||||||
disabled={isLoading}
|
></ContextMenuAction>
|
||||||
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
|
|
||||||
caption={t("account.connect")}
|
|
||||||
|
|
||||||
/>
|
|
||||||
<ContextMenuAction
|
<ContextMenuAction
|
||||||
action={signOut}
|
caption="My Collections"
|
||||||
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
|
action={() => console.log("My Collections")}
|
||||||
caption={t('logOut')}
|
icon={<SVGFolder className="stroke-black fill-black" />}
|
||||||
|
></ContextMenuAction>
|
||||||
|
|
||||||
/>
|
<ContextMenuAction
|
||||||
|
caption="Recent Viewed"
|
||||||
|
action={() => console.log("Recent Viewed")}
|
||||||
|
icon={<SVGEye className="stroke-black " />}
|
||||||
|
></ContextMenuAction>
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
|
{/* Dropdown Menu My library - End - */}
|
||||||
|
|
||||||
|
{/* Dropdown Menu About - start - */}
|
||||||
|
<ContextMenu
|
||||||
|
emphasis="high"
|
||||||
|
button="About"
|
||||||
|
className="border-none uppercase"
|
||||||
|
>
|
||||||
|
<ContextMenuAction
|
||||||
|
caption="About Freeland"
|
||||||
|
action={() => console.log("About Freeland")}
|
||||||
|
></ContextMenuAction>
|
||||||
|
|
||||||
|
<ContextMenuAction
|
||||||
|
caption="Contact Us"
|
||||||
|
action={() => console.log("Contact Us")}
|
||||||
|
></ContextMenuAction>
|
||||||
|
|
||||||
|
<ContextMenuAction
|
||||||
|
caption="Help"
|
||||||
|
action={() => console.log("Help")}
|
||||||
|
></ContextMenuAction>
|
||||||
|
</ContextMenu>
|
||||||
|
{/* Dropdown Menu About - End - */}
|
||||||
</div>
|
</div>
|
||||||
|
{/* Menu( Create new - My library - About ) End */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Sign in - Sign up - Notification - Avatar - Burger */}
|
||||||
|
<div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
|
||||||
|
{!authenticated
|
||||||
|
? [
|
||||||
|
<Button
|
||||||
|
emphasis="low"
|
||||||
|
onClick={onClick}
|
||||||
|
className="text-xs sm:px-4 sm:text-sm "
|
||||||
|
>
|
||||||
|
Sign in
|
||||||
|
</Button>,
|
||||||
|
<Button
|
||||||
|
emphasis="medium"
|
||||||
|
className="hidden md:flex"
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
Sign up
|
||||||
|
</Button>,
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
<Button emphasis="low">
|
||||||
|
<Button.Icon>
|
||||||
|
{!notification ? (
|
||||||
|
<SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
|
||||||
|
) : (
|
||||||
|
<SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
|
||||||
|
)}
|
||||||
|
</Button.Icon>
|
||||||
|
</Button>,
|
||||||
|
|
||||||
|
<Button emphasis="low" className="hidden lg:flex">
|
||||||
|
<Button.Icon>
|
||||||
|
<Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
|
||||||
|
</Button.Icon>
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
{/* Burger component will be shown for the small screens */}
|
||||||
|
<Navbar className="block lg:hidden" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user