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/assets/svg/agricultural.svg b/src/assets/svg/agricultural.svg new file mode 100644 index 0000000..5fc8d1f --- /dev/null +++ b/src/assets/svg/agricultural.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/fundomental.svg b/src/assets/svg/fundomental.svg new file mode 100644 index 0000000..981ee00 --- /dev/null +++ b/src/assets/svg/fundomental.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/humanitarian.svg b/src/assets/svg/humanitarian.svg new file mode 100644 index 0000000..c6447b4 --- /dev/null +++ b/src/assets/svg/humanitarian.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/medicine.svg b/src/assets/svg/medicine.svg new file mode 100644 index 0000000..8c88b83 --- /dev/null +++ b/src/assets/svg/medicine.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/socials.svg b/src/assets/svg/socials.svg new file mode 100644 index 0000000..6dc6b17 --- /dev/null +++ b/src/assets/svg/socials.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/technics-and-techology.svg b/src/assets/svg/technics-and-techology.svg new file mode 100644 index 0000000..bf63908 --- /dev/null +++ b/src/assets/svg/technics-and-techology.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 7928c33..98c618e 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -55,7 +55,7 @@ export const Button: React.FC & ButtonExtentions = ({ className={classNames([ "flex content-center justify-between", "text-center", - padding, + { padding: defaultStyle }, "rounded", { "!cursor-default": disabled, diff --git a/src/components/Cards/CategoryCard.tsx b/src/components/Cards/CategoryCard.tsx new file mode 100644 index 0000000..7690a9a --- /dev/null +++ b/src/components/Cards/CategoryCard.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { SVGMedicine } from "../icons"; +import Typography from "components/typography/Typography"; +import { Button } from "components/Button/Button"; +import classNames from "classnames"; +import { JsxElement } from "typescript"; + +type Props = { + count?: number; + title: string; + + iconChild: Required; +} & Omit, "">; + +function CategoryCard({ count, title, iconChild, className, ...props }: Props) { + const iconChildStyle = + "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600"; + + return ( +
+ +
+ ); +} + +export default CategoryCard; diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx new file mode 100644 index 0000000..0073083 --- /dev/null +++ b/src/components/ContextMenu.tsx @@ -0,0 +1,115 @@ +/* -------------------------------------------------------------------------- */ +/* 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; +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: + * + * alert('click')} + * > + * ... + * + */ +export default function ContextMenu({ + button, + children, + className, + emphasis = "low", +}: MenuProps) { + return ( + + {({ open }) => ( + <> + + {button} + + + + + {children} + + + + )} + + ); +} diff --git a/src/components/ContextMenuAction.tsx b/src/components/ContextMenuAction.tsx new file mode 100644 index 0000000..8d1e653 --- /dev/null +++ b/src/components/ContextMenuAction.tsx @@ -0,0 +1,32 @@ +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 ( + action(e)} + className={classNames([ + "group flex px-2 rounded items-center text-base hover:bg-gray-100", + className, + ])} + > + {icon &&
{icon}
} + {caption} + + ); +} 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 ( +
+ +
+ + + + + +
+ + + + + + + +
+ ); +}; + +export default Navbar; diff --git a/src/components/icons.tsx b/src/components/icons.tsx index e480c84..f17c0d9 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -2,7 +2,6 @@ export { ReactComponent as SVGArrowBigRight } from "assets/svg/arrow-big-right.s export { ReactComponent as SVGArrowDown } from "assets/svg/arrow-down.svg"; export { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg"; export { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg"; -export { ReactComponent as SVGBookmark } from "assets/svg/bookmark.svg"; export { ReactComponent as SVGCaretDown } from "assets/svg/caret-down.svg"; export { ReactComponent as SVGCaretLeft } from "assets/svg/caret-left.svg"; export { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg"; @@ -17,7 +16,6 @@ export { ReactComponent as SVGEdit1 } from "assets/svg/edit1.svg"; export { ReactComponent as SVGEdit2 } from "assets/svg/edit2.svg"; export { ReactComponent as SVGError } from "assets/svg/error.svg"; export { ReactComponent as SVGEye } from "assets/svg/eye.svg"; -export { ReactComponent as SVGFavorite } from "assets/svg/favorite.svg"; export { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg"; export { ReactComponent as SVGFolder } from "assets/svg/folder.svg"; export { ReactComponent as SVGKey } from "assets/svg/key.svg"; @@ -30,7 +28,6 @@ export { ReactComponent as SVGSearch } from "assets/svg/search.svg"; export { ReactComponent as SVGShare } from "assets/svg/share.svg"; export { ReactComponent as SVGUser } from "assets/svg/user.svg"; export { ReactComponent as SVGXMark } from "assets/svg/xmark.svg"; -export { ReactComponent as SVGCheckmark } from "assets/svg/checkmark.svg"; export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg"; export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg"; export { ReactComponent as SVGBell } from "assets/svg/bell.svg"; @@ -63,3 +60,12 @@ export { ReactComponent as SVGSmile } from "assets/svg/smile.svg"; export { ReactComponent as SVGTable } from "assets/svg/table.svg"; export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg"; export { ReactComponent as SVGVideo } from "assets/svg/video.svg"; +export { ReactComponent as SVGFacebook } from "assets/svg/facebook.svg"; +export { ReactComponent as SVGInstagram } from "assets/svg/instagram.svg"; +export { ReactComponent as SVGSelectArrow } from "assets/svg/select-arrow.svg"; +export { ReactComponent as SVGAgricultural } from "assets/svg/agricultural.svg"; +export { ReactComponent as SVGFundomental } from "assets/svg/fundomental.svg"; +export { ReactComponent as SVGHumanitarian } from "assets/svg/humanitarian.svg"; +export { ReactComponent as SVGMedicine } from "assets/svg/medicine.svg"; +export { ReactComponent as SVGSocials } from "assets/svg/socials.svg"; +export { ReactComponent as SVGTechnicsAndTechology } from "assets/svg/technics-and-techology.svg";