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 index 69002fa..fa9d206 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,9 @@ /* Libraries */ /* -------------------------------------------------------------------------- */ import React from "react"; +import classNames from "classnames"; +import Inputgroup from "components/Inputgroup"; + /* -------------------------------------------------------------------------- */ /* Application root component */ /* -------------------------------------------------------------------------- */ @@ -10,7 +13,37 @@ import React from "react"; * @return {JSX.Element} */ function App() { +<<<<<<< Updated upstream return
Hello world!
; +======= + return ( +
+ + + + + + {" "} + + + +
+ ); +>>>>>>> Stashed changes } export default App; diff --git a/src/assets/12.jpeg b/src/assets/12.jpeg new file mode 100644 index 0000000..ed33c56 Binary files /dev/null and b/src/assets/12.jpeg differ diff --git a/src/assets/13.jpeg b/src/assets/13.jpeg new file mode 100644 index 0000000..5d4d825 Binary files /dev/null and b/src/assets/13.jpeg differ diff --git a/src/assets/14.jpg b/src/assets/14.jpg new file mode 100644 index 0000000..e4163b7 Binary files /dev/null and b/src/assets/14.jpg differ diff --git a/src/assets/16.jpg b/src/assets/16.jpg new file mode 100644 index 0000000..a35fa39 Binary files /dev/null and b/src/assets/16.jpg differ diff --git a/src/assets/20.png b/src/assets/20.png new file mode 100644 index 0000000..aefdbf1 Binary files /dev/null and b/src/assets/20.png differ diff --git a/src/components/Bell.tsx b/src/components/Bell.tsx new file mode 100644 index 0000000..826b68b --- /dev/null +++ b/src/components/Bell.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import classNames from "classnames"; +export type Props = { + className?: string; +}; + +const Bell = ({ className }: Props) => { + return ( +
+ + + + + + + + + + + + +
+ ); +}; + +export default Bell; diff --git a/src/components/Burger.tsx b/src/components/Burger.tsx new file mode 100644 index 0000000..61b6191 --- /dev/null +++ b/src/components/Burger.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import classNames from "classnames"; +export type Props = { + className?: string; +}; + +const Burger = ({ className }: Props) => { + return ( +
+ + + + + +
+ ); +}; + +export default Burger; diff --git a/src/components/Drop.tsx b/src/components/Drop.tsx new file mode 100644 index 0000000..36e2c7b --- /dev/null +++ b/src/components/Drop.tsx @@ -0,0 +1,98 @@ +import React, { Fragment } from "react"; +import classNames from "classnames"; +import { Menu, Transition } from "@headlessui/react"; + +import Burger from "./Burger"; + +const Drop = () => { + return ( +
+ +
+ + About + +
+ + + +
+ + {({ active }) => ( + + About Freeland + + )} + + + {({ active }) => ( + + Contact Us + + )} + + + {({ active }) => ( + + Help + + )} + + {/*
+ + {({ active }) => ( + + )} + +
*/} +
+ + + +
+ ); +}; + +export default Drop; diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx new file mode 100644 index 0000000..b43d7df --- /dev/null +++ b/src/components/Dropdown.tsx @@ -0,0 +1,64 @@ +import React, { useRef } from "react"; +import { useState } from "react"; +import classNames from "classnames"; + +export type Props = { + className?: string; + selected?: string; + setSelected: (option: string) => void; + options: string[]; +}; + +const Dropdown = ({ selected, setSelected, options, className }: Props) => { + const [isActive, setIsActive] = useState(false); + + const dropdownRef = useRef(null); + const handleClickOutsideDropdown = (e: any) => { + if (isActive && !dropdownRef.current?.contains(e.target as Node)) { + setIsActive(false); + } + }; + window.addEventListener("click", handleClickOutsideDropdown); + + return ( +
+
setIsActive(!isActive)} + > + {selected} + +
+ {isActive && ( +
+ {options.map((option) => ( +
{ + setSelected(option); + setIsActive(false); + }} + > + {option} +
+ ))} +
+ )} +
+ ); +}; + +export default Dropdown; + +//group-active:border-t-transparent group-active:border-b-black group-active:mb-2 diff --git a/src/components/Header1.tsx b/src/components/Header1.tsx new file mode 100644 index 0000000..d5a6568 --- /dev/null +++ b/src/components/Header1.tsx @@ -0,0 +1,172 @@ +import React from "react"; +import Dropdown from "./Dropdown"; +import DropDown from "./Drop"; +import Link from "./Link"; +import Logo from "./Logo"; +import Logofreeland from "./Logofreeland"; +import { useState, useEffect } from "react"; +// import { Button } from "./Button/Button"; +import Bell from "./Bell"; +// import Avatar from "./Avatar"; +import ContextMenu from "components/containers/contextmenu/ContextMenu"; +import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction"; +import Sidebar from "components/Sidebar"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import { Createnew, About, Mylibrary } from "components/pages/Overview"; +import Navbar from "./Navbar"; +import Drop from "./Drop"; + +// Icons Start ------------------------------------------- +import { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg"; +// Icons End ------------------------------------------- + +// width and height +let Short: boolean; +function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window; + + if (width > 870) { + Short = true; + } else { + Short = false; + } + return { + width, + height, + }; +} + +export function useWindowDimensions() { + const [windowDimensions, setWindowDimensions] = useState( + getWindowDimensions() + ); + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()); + } + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + return windowDimensions; +} +// width and height End + +const Header1 = () => { + const [selected, setSelected] = useState("MY LIBRARY"); + const [selectedB, setSelectedB] = useState("About"); + const { height, width } = useWindowDimensions(); + return ( +
+ {/* Logo and Menu */} +
+ {/* Logo */} + + + + + + {/* Menu( Create new - My library - About ) Start */} + {Short && ( +
+ + CREATE NEW + + + {/* Dropdown start */} + {/* + console.log("My publications")} + icon={} + > + console.log("My favorites")} + icon={} + > + */} + {/* Dropdown End */} + + {/* */} + + + {/* */} +
+ )} + + {/* Menu( Create new - My library - About ) End */} +
+
+ {/* -------------------------------------- */} + {/* Buttons Start */} + {/* + */} + {/* Buttons End */} + {/* -------------------------------------- */} + + {/* Bell Start */} + + {/* Bell End */} + + {/* Avatar Start */} + {Short && ( + + )} + {/* Avatar End */} + + {/* Burger Start */} + {!Short && ( + + )} + {/* Burger End */} +
+ {/*
{ ({ width } gt " 300px" )&& Hi}
*/} +
+ ); +}; + +export default Header1; +// bg-red-300 +// sm:bg-sky-400 +// md:bg-sky-600 +// lg:bg-sky-800 +// xl:bg-red-600 diff --git a/src/components/Headericon.tsx b/src/components/Headericon.tsx new file mode 100644 index 0000000..4997bf8 --- /dev/null +++ b/src/components/Headericon.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import classNames from "classnames"; +export type Props = { + className?: string; +}; + +export const SVGFolderplus = ({ className }: Props) => { + return ( +
+ + + + + +
+ ); +}; + +export const SVGFolderplusminus = ({ className }: Props) => { + return
; +}; diff --git a/src/components/Link.tsx b/src/components/Link.tsx new file mode 100644 index 0000000..15a3eb8 --- /dev/null +++ b/src/components/Link.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +type Props = { + href?: string; + children: React.ReactNode; + disabled?: boolean; + className?: string; +} & Omit, "">; + +export default function Link({ href, children, disabled, ...props }: Props) { + return ( + // eslint-disable-next-line jsx-a11y/anchor-is-valid + + {children} + + ); +} 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..3658ba3 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,98 @@ +import React, { Fragment } from "react"; +import classNames from "classnames"; +import { Menu, Transition } from "@headlessui/react"; +import { ChevronDownIcon } from "@heroicons/react/solid"; +import Burger from "./Burger"; + +const Navbar = () => { + return ( +
+ +
+ + + +
+ + + +
+ + {({ active }) => ( + + CREATE NEW + + )} + + + {({ active }) => ( + + MY LIBRARY + + )} + + + {({ active }) => ( + + ABOUT + + )} + + {/*
+ + {({ active }) => ( + + )} + +
*/} +
+ + + +
+ ); +}; + +export default Navbar; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..0ac392d --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,69 @@ +import React, { useState } from "react"; +import { CSSTransition } from "react-transition-group"; +import classNames from "classnames"; +import { Link } from "react-router-dom"; +import styled from "styled-components"; +import { SidebarData } from "./SidebarData"; +import Submenu from "./Submenu"; +import SidebarLink from "./Submenu"; +import Burger from "./Burger"; + +export type Props = { + className?: string; +}; + +const SideBarNav = styled.div<{ sidebar: boolean }>` + left: ${({ sidebar }) => (sidebar ? "0" : "100%")}; +`; + +const Sidebar = ({ className }: Props) => { + const [sidebar, setSidebar] = useState(false); + const toggleSidebar = () => setSidebar(!sidebar); + + return ( + + ); +}; + +export default Sidebar; diff --git a/src/components/SidebarData.tsx b/src/components/SidebarData.tsx new file mode 100644 index 0000000..121f3b8 --- /dev/null +++ b/src/components/SidebarData.tsx @@ -0,0 +1,28 @@ +import { SidebarItem } from "./SidebarItem"; + +export const SidebarData: SidebarItem[] = [ + { + title: "CREATE NEW", + path: "/overview", + }, + + { + title: "MY LIBRARY", + path: "/overview/mylibrary", + }, + + { + title: "ABOUT", + path: "/overview/about", + }, + + // { + // title: "Users", + // path: "/overview/users", + // }, + + // { + // title: "Revenue", + // path: "/overview/revenue", + // }, +]; diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx new file mode 100644 index 0000000..d939d0c --- /dev/null +++ b/src/components/SidebarItem.tsx @@ -0,0 +1,10 @@ +import React from "react"; + +export interface SidebarItem { + title: string; + path: string; + icon?: any; + iconOpened?: any; + iconClosed?: any; + subnav?: SidebarItem[]; +} diff --git a/src/components/Submenu.tsx b/src/components/Submenu.tsx new file mode 100644 index 0000000..8bc64cd --- /dev/null +++ b/src/components/Submenu.tsx @@ -0,0 +1,35 @@ +// import { iconButton } from "@material-tailwind/react"; +import { type } from "@testing-library/user-event/dist/type"; +import React from "react"; +import { Link } from "react-router-dom"; +import { SidebarItem } from "./SidebarItem"; +import styled from "styled-components"; + +// import styled from "styled-components"; + +type SidebarLinkProps = { + item: SidebarItem; +}; + +export const SidebarLink = styled(Link)` + display: flex; + justify-content: space-between; + align-items: center; + &:hover { + background-color: green; + } +`; + +// const SidebarLink = ({ item }: SidebarLinkProps) => { +const Submenu = ({ item }: SidebarLinkProps) => { + return ( + <> + +
{item.title}
+
{item?.subnav ? item?.iconClosed : item?.iconOpened}
+ + + ); +}; + +export default Submenu; diff --git a/src/components/pages/Createnew.tsx b/src/components/pages/Createnew.tsx new file mode 100644 index 0000000..f2ac385 --- /dev/null +++ b/src/components/pages/Createnew.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Createnew = () => { + return
Createnew
; +}; + +export default Createnew; diff --git a/src/components/pages/Overview.tsx b/src/components/pages/Overview.tsx new file mode 100644 index 0000000..fe6fa9e --- /dev/null +++ b/src/components/pages/Overview.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const Createnew = () => { + return <>; +}; + +export const Mylibrary = () => { + return <>; +}; + +export const About = () => { + return <>; +}; + +// export const Revenue = () => { +// return
Revenue
; +// }; + +// export const Order = () => { +// return
Order
; +// }; diff --git a/src/runtime.js b/src/runtime.js new file mode 100644 index 0000000..28e3b0c --- /dev/null +++ b/src/runtime.js @@ -0,0 +1,7 @@ +'use strict'; + +if (process.env.NODE_ENV === 'production') { + module.exports = require('./cjs/react-refresh-runtime.production.min.js'); +} else { + module.exports = require('./cjs/react-refresh-runtime.development.js'); +}