diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..521a9f7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 69002fa..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/* -------------------------------------------------------------------------- */ -/* Libraries */ -/* -------------------------------------------------------------------------- */ -import React from "react"; -/* -------------------------------------------------------------------------- */ -/* Application root component */ -/* -------------------------------------------------------------------------- */ -/** - * Application root component - * @return {JSX.Element} - */ -function App() { - return
Hello world!
; -} - -export default App; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..d9934f5 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,163 @@ +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 ( +
+ {/* Logo and Menu */} +
+ {/* Logo - start - className="w-7 sm:w-10 " /> */} + + + + + {/* Logo - end - */} + + {/* Menu( Create new - My library - About ) Start */} +
+ {/* Link Create now - start - */} + + Create new + + {/* Link Create now - end - */} + + {/* Dropdown Menu My library - start - */} + + console.log("My publications")} + icon={} + > + + console.log("My Favorites")} + icon={} + > + + console.log("My Collections")} + icon={} + > + + console.log("Recent Viewed")} + icon={} + > + + {/* Dropdown Menu My library - End - */} + + {/* Dropdown Menu About - start - */} + + console.log("About Freeland")} + > + + console.log("Contact Us")} + > + + console.log("Help")} + > + + {/* Dropdown Menu About - End - */} +
+ {/* Menu( Create new - My library - About ) End */} +
+ + {/* Sign in - Sign up - Notification - Avatar - Burger */} +
+ {!authenticated + ? [ + , + , + ] + : [ + , + + , + ]} + {/* Burger component will be shown for the small screens */} + +
+
+ ); +}; + +export default Header; diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 0000000..2cd65b8 --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import classNames from "classnames"; +export type Props = { + className?: string; +}; + +const Logo = ({ className }: Props) => { + return ( +
+ + + + + + + +
+ ); +}; + +export default Logo; diff --git a/src/components/Logofreeland.tsx b/src/components/Logofreeland.tsx new file mode 100644 index 0000000..88e6cdf --- /dev/null +++ b/src/components/Logofreeland.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import classNames from "classnames"; +export type Props = { + className?: string; +}; + +const Logofreeland = ({ className }: Props) => { + return ( +
+ + + + + + + + + +
+ ); +}; + +export default Logofreeland; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..81fc892 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,147 @@ +import { Menu, Transition } from "@headlessui/react"; +import React, { Fragment } from "react"; +import classNames from "classnames"; + +/* -------------------------------------------------------------------------- */ +/* Components */ +/* -------------------------------------------------------------------------- */ +import ContextMenuAction from "./ContextMenuAction"; +import ContextMenu from "./ContextMenu"; +import { Button } from "./Button/Button"; + +/* -------------------------------------------------------------------------- */ +/* Icons */ +/* -------------------------------------------------------------------------- */ +import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg"; +import { ReactComponent as SVGHamburger } from "assets/svg/hamburger.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"; + +type Props = React.ComponentPropsWithoutRef<"div">; + +const Navbar = (props: Props) => { + return ( +
+ +
+ + + + + +
+ + + +
+ + {({ active }) => ( + + CREATE NEW + + )} + + + {({ active }) => ( + + {/* Dropdown Menu start My library */} + + console.log("My publications")} + icon={} + > + + console.log("My Favorites")} + icon={} + > + + console.log("My Collections")} + icon={} + > + + console.log("Recent Viewed")} + icon={} + > + + {/* Dropdown Menu End My library */} + + )} + + + {({ active }) => ( + + {/* Dropdown Menu About - start - */} + + console.log("About Freeland")} + > + + console.log("Contact Us")} + > + + console.log("Help")} + > + + {/* Dropdown Menu About - End - */} + + )} + +
+ + + +
+ ); +}; + +export default Navbar;