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/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"; diff --git a/src/components/parts/FeaturedArticles.tsx b/src/components/parts/FeaturedArticles.tsx new file mode 100644 index 0000000..62cb623 --- /dev/null +++ b/src/components/parts/FeaturedArticles.tsx @@ -0,0 +1,60 @@ +import React, { useMemo } from "react"; +import Typography from "components/typography/Typography"; +import CategoryCard from "components/Cards/CategoryCard"; +import { + SVGMedicine, + SVGAgricultural, + SVGHumanitarian, + SVGSocials, + SVGTechnicsAndTechology, + SVGFundamental, +} from "components/icons"; + +const categories = [ + { id: 1, title: "Medical", count: 5617813, icon: }, + { + id: 2, + title: "Technics and Technology", + count: 5617813, + icon: , + }, + { id: 3, title: "Fundamental", count: 5617813, icon: }, + { id: 4, title: "Humanitarian", count: 5617813, icon: }, + { id: 5, title: "Argicultural", count: 5617813, icon: }, + { id: 6, title: "Social", count: 5617813, icon: }, +]; + +export function FeaturedArticles() { + const categoryCards = useMemo( + () => + categories.map((category) => ( + + )), + categories + ); + + return ( +
+
+ + Featured articles + + + Select the category of science
+ you are interested in + +
+
+ {categoryCards} +
+
+ ); +}