Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into fix/base-layout-schema

Browse Source
This commit is contained in:
maximus 2022-08-19 16:29:36 +00:00
commit 79f89fac3f
16 changed files with 549 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.npmrc Normal file
View File

@ -0,0 +1 @@
legacy-peer-deps=true

16
src/App.tsx
View File

@ -1,16 +0,0 @@
/* -------------------------------------------------------------------------- */
/* Libraries */
/* -------------------------------------------------------------------------- */
import React from "react";
/* -------------------------------------------------------------------------- */
/* Application root component */
/* -------------------------------------------------------------------------- */
/**
* Application root component
* @return {JSX.Element}
*/
function App() {
return <div>Hello world!</div>;
}
export default App;

3
src/assets/svg/agricultural.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5495 18.1523C20.0358 21.1083 21.1165 25.66 19.7396 29.9152H30.4102C31.4258 26.9366 34.4857 25.2281 37.9199 26.6722L39.1536 19.4836C39.362 18.2715 38.138 17.2497 36.8978 17.2497H30.0098V11.8372C30.0098 11.415 29.668 11.0636 29.2448 11.0442V8.24616H28.1901V11.0442C27.7767 11.0733 27.4479 11.4182 27.4479 11.834V17.2497H22.0703C23.099 12.4304 21.8978 10.7831 21.2044 5.88004C20.931 5.1773 20.3939 5.01934 19.7884 5H7.25586C6.6276 5.00645 6.19141 5.31591 5.96354 5.96063L5.11393 14.068L3.42122 16.0473C2.68229 16.8951 2.89714 16.6984 3.57747 17.7106C3.69466 17.6268 3.81185 17.543 3.93229 17.4656C7.49349 15.1576 13.1966 15.5734 16.5495 18.1523ZM29.0951 6.74397C29.1439 6.69561 29.222 6.69239 29.2741 6.74074C29.3229 6.7891 29.3262 6.86646 29.2773 6.91804C29.1829 7.01475 29.2188 7.15336 29.2513 7.28231C29.3099 7.50151 29.362 7.70137 29.0951 7.85288C29.0332 7.88834 28.9583 7.86578 28.9225 7.80775C28.8867 7.74973 28.9128 7.67236 28.9714 7.6369C29.069 7.5821 29.0397 7.46928 29.0072 7.34678C28.9583 7.15336 28.903 6.94383 29.0951 6.74397ZM28.3333 6.74397C28.3822 6.69561 28.4603 6.69239 28.5124 6.74074C28.5612 6.7891 28.5645 6.86646 28.5156 6.91804C28.4212 7.01475 28.457 7.15336 28.4896 7.28231C28.5482 7.50151 28.6003 7.70137 28.3333 7.85288C28.2715 7.88834 28.1966 7.86578 28.1608 7.80775C28.125 7.7465 28.1478 7.67236 28.2064 7.6369C28.304 7.5821 28.2747 7.46928 28.2422 7.34678C28.1934 7.15336 28.138 6.94383 28.3333 6.74397ZM14.4694 7.68203V13.6618C15.8659 13.9745 17.2461 14.4032 18.6035 14.9512C19.3132 15.2381 20.1497 14.313 20 13.5683L19.0885 9.06173C18.9388 8.31708 18.4603 7.67881 17.6921 7.67881H14.4694V7.68203ZM13.0827 13.3878V7.68203H9.63216C8.86393 7.68203 8.41146 8.32353 8.23568 9.06496L7.63021 11.6503C7.45768 12.3917 8.25846 13.0203 9.02669 13.0332C10.3939 13.0461 11.7448 13.1654 13.0827 13.3878ZM35.7585 27.2428C38.099 27.2428 40 29.1222 40 31.4432C40 33.7609 38.1022 35.6403 35.7585 35.6403C33.4147 35.6403 31.5202 33.7609 31.5202 31.4432C31.5202 29.1222 33.418 27.2428 35.7585 27.2428ZM9.05925 17.8267C14.0625 17.8267 18.1185 21.8433 18.1185 26.798C18.1185 31.7526 14.0625 35.7692 9.05925 35.7692C4.05599 35.7692 0 31.7526 0 26.798C0 21.8433 4.05599 17.8267 9.05925 17.8267ZM9.05925 21.9755C11.748 21.9755 13.929 24.1353 13.929 26.798C13.929 29.4607 11.748 31.6205 9.05925 31.6205C6.37044 31.6205 4.18945 29.4607 4.18945 26.798C4.18945 24.1353 6.37044 21.9755 9.05925 21.9755ZM35.7585 29.3124C36.9466 29.3124 37.9069 30.2666 37.9069 31.4399C37.9069 32.6166 36.9434 33.5675 35.7585 33.5675C34.5703 33.5675 33.61 32.6133 33.61 31.4399C33.61 30.2666 34.5736 29.3124 35.7585 29.3124ZM29.4564 19.8737H34.8112L34.6908 20.4862H29.3522L29.4564 19.8737ZM27.5781 23.1746H34.8112L34.6908 23.7871H27.4707L27.5781 23.1746ZM28.2454 21.5242H34.8145L34.694 22.1366H28.138L28.2454 21.5242Z" fill="#8C8C8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

3
src/assets/svg/fundomental.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

10
src/assets/svg/humanitarian.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

10
src/assets/svg/medicine.svg Normal file
View File

@ -0,0 +1,10 @@
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_4699)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3027 20.5378C27.0006 19.6363 28.0276 19.0479 29.1589 18.9015C30.2901 18.7552 31.4332 19.0628 32.3379 19.7571C33.2409 20.4539 33.8303 21.4802 33.9768 22.6107C34.1233 23.7413 33.8149 24.8838 33.1193 25.7874C30.1398 29.6467 27.1603 33.4712 24.1777 37.3369C23.4852 38.2341 22.4647 38.8199 21.3402 38.9657C20.2158 39.1115 19.0794 38.8054 18.1807 38.1145C17.2849 37.4211 16.7003 36.4016 16.5544 35.2788C16.4086 34.156 16.7135 33.0212 17.4024 32.1223C20.3851 28.2502 23.3169 24.4099 26.2964 20.5378H26.3027ZM7.40947 27.0093H18.7556L19.9499 25.4573C21.3698 23.6038 22.7864 21.7598 24.6891 19.2905C25.1615 18.6793 25.7431 18.1606 26.4044 17.7607V13.511C26.4361 10.9307 25.1084 8.07422 23.7108 6.21118L23.2661 5.61451H24.0252C24.4465 5.61451 24.8504 5.44731 25.1483 5.14971C25.4461 4.8521 25.6134 4.44847 25.6134 4.02759V1.58692C25.6093 1.16732 25.4406 0.766082 25.1437 0.46937C24.8467 0.172657 24.4452 0.00413754 24.0252 3.30446e-06H8.55932C8.13608 -0.00085484 7.72965 0.165459 7.42859 0.462705C7.12754 0.759951 6.95625 1.16404 6.95206 1.58692V4.01172C6.95206 4.4326 7.11939 4.83624 7.41724 5.13384C7.71508 5.43144 8.11905 5.59864 8.54027 5.59864H9.12472C8.96273 5.8208 8.80708 6.03662 8.63873 6.25244C7.0283 8.42969 5.83715 11.2163 6.0182 14.0537V31.5098C6.00916 32.1551 6.24918 32.7791 6.68842 33.2522C7.12041 33.6711 7.74934 33.887 8.61332 33.8616H14.531C14.5668 33.596 14.6198 33.3331 14.6898 33.0745C14.7427 32.8744 14.8063 32.6774 14.8804 32.4841H8.96908C8.55495 32.5135 8.14605 32.3777 7.83193 32.1064C7.60567 31.8633 7.46706 31.5517 7.43805 31.221C7.43805 31.1511 7.40947 27.0125 7.40947 27.0125V27.0093ZM15.3028 15.9707H17.1166C17.28 15.9707 17.4367 16.0356 17.5523 16.151C17.6679 16.2665 17.7328 16.4231 17.7328 16.5864V18.6558H19.8038C19.9667 18.6558 20.1229 18.7202 20.2384 18.835C20.3539 18.9498 20.4192 19.1056 20.42 19.2683V21.0774C20.42 21.2407 20.3551 21.3973 20.2395 21.5128C20.124 21.6282 19.9672 21.6931 19.8038 21.6931H17.7264V23.7625C17.7256 23.9241 17.6612 24.079 17.5471 24.1936C17.433 24.3082 17.2783 24.3733 17.1166 24.375H15.3028C15.1399 24.375 14.9837 24.3106 14.8682 24.1958C14.7527 24.081 14.6874 23.9252 14.6866 23.7625V21.6931H12.6156C12.4527 21.6923 12.2968 21.627 12.1819 21.5117C12.067 21.3963 12.0025 21.2401 12.0025 21.0774V19.2683C12.0034 19.1061 12.0682 18.9508 12.183 18.8361C12.2978 18.7214 12.4533 18.6566 12.6156 18.6558H14.6866V16.5864C14.6866 16.4231 14.7515 16.2665 14.8671 16.151C14.9827 16.0356 15.1394 15.9707 15.3028 15.9707ZM24.9019 13.3301H7.52064C7.52064 12.6731 7.47935 13.3586 7.54923 12.7461C7.87798 10.5869 8.71277 8.53587 9.98553 6.76026C10.2428 6.41748 10.5065 6.05884 10.7796 5.67481H21.6143C21.8558 6.01123 22.1162 6.35718 22.3735 6.70313C23.5456 8.2583 24.6605 10.8291 24.867 12.7683C24.8892 12.9587 24.9019 13.3364 24.9019 13.3364V13.3301ZM27.2175 31.8081L22.0559 27.8408L18.3204 32.6904C17.7956 33.3752 17.5635 34.2396 17.6748 35.0949C17.7861 35.9501 18.2318 36.7266 18.9144 37.2544C19.5995 37.7736 20.4619 38.0022 21.3145 37.8905C22.1671 37.7788 22.9413 37.3359 23.4694 36.6577L27.2175 31.8145V31.8081Z" fill="#8C8C8C"/>
</g>
<defs>
<clipPath id="clip0_22_4699">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

3
src/assets/svg/socials.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

3
src/assets/svg/technics-and-techology.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

2
src/components/Button/Button.tsx
View File

@ -55,7 +55,7 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
className={classNames([
"flex content-center justify-between",
"text-center",
padding,
{ padding: defaultStyle },
"rounded",
{
"!cursor-default": disabled,

55
src/components/Cards/CategoryCard.tsx Normal file
View File

@ -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<JSX.Element>;
} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
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 (
<div className="snap-start">
<Button
defaultStyle={false}
className="focus:outline-none group hover:bg-gray-75 active:bg-white active:outline active:outline-1 active:outline-blue-600 focus:outline-1 focus:outline-blue-600"
>
<div className=" rounded py-1 px-4 flex flex-row items-center ">
<div className="justify-center max-w-max">
{React.cloneElement(iconChild, {
className: classNames(iconChildStyle, className),
})}
</div>
<div className="flex flex-col ml-3 min-w-max">
<div className="">
<Typography
fontWeightVariant="bold"
className="text-sm leading-6 min-w-max group-active:text-blue-600 group-focus:text-blue-600"
>
{title}
</Typography>
</div>
<div className="max-w-max ">
<Typography
fontWeightVariant="normal"
className="text-xs text-gray-500 group-active:text-blue-600 group-focus:text-blue-600"
>
{count} Items
</Typography>
</div>
</div>
</div>
</Button>
</div>
);
}
export default CategoryCard;

163
src/components/Header.tsx Normal file
View File

@ -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 (
<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;

42
src/components/Logo.tsx Normal file
View File

@ -0,0 +1,42 @@
import React from "react";
import classNames from "classnames";
export type Props = {
className?: string;
};
const Logo = ({ className }: Props) => {
return (
<div className={classNames("", className)}>
<svg
// width="40"
// height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.4144 23.7511C8.27781 15.6345 1.97719 21.8024 3.62218 27.4753C7.75871 36.521 18.4462 40.5011 27.4937 36.364C30.6123 34.9384 33.2592 32.6525 35.1232 29.7747C30.3791 34.2166 21.7659 33.4741 14.4144 23.7497V23.7511Z"
fill="#003A8C"
/>
<path
d="M19.9003 18.1623C11.4604 5.36346 1.99988 12.1818 1.99988 20.0029C1.99656 22.5922 2.55489 25.1515 3.63638 27.5043C2.51332 22.2054 8.60318 18.1213 14.273 25.7253C22.5092 36.7684 30.5857 34.8254 35.1069 29.8009C36.5583 27.5725 37.4959 25.0493 37.8517 22.414V22.4486C35.9103 28.4694 27.3438 29.4487 19.9003 18.1623Z"
fill="#0050B3"
/>
<path
d="M25.6847 12.4357C19.4173 2.09746 11.4696 3.03152 6.09469 8.56867C3.44128 11.788 1.99328 15.8313 1.99989 20.0029C2.56566 12.4371 11.7164 7.16935 20.0007 20.0029C27.3643 31.4243 36.5384 28.4489 37.8432 22.4812V22.4239C37.9578 21.6113 38.0065 20.7908 37.9889 19.9703V19.1522C34.8 21.434 30.6062 20.553 25.6832 12.435L25.6847 12.4357Z"
fill="#096DD9"
/>
<path
d="M25.7278 14.2762C31.4676 23.5022 36.416 21.1419 38.0009 19.1685C37.9371 17.7893 37.714 16.4222 37.3361 15.0943C34.6607 15.1515 34.0369 14.704 31.404 10.6969C27.3806 4.53119 22.3119 0.369312 13.4568 3.23299C10.5865 4.35751 8.05111 6.19656 6.09116 8.57569C12.1761 2.97702 19.6422 4.49654 25.7278 14.2762Z"
fill="#40A9FF"
/>
<path
d="M31.0114 11.4889C33.6359 15.5037 35.2335 15.708 37.336 15.095C34.6097 5.51969 24.6358 -0.0323048 15.0593 2.69349C14.5162 2.84763 13.982 3.02747 13.4568 3.23299C21.367 0.737706 26.9774 5.32312 31.0114 11.4889Z"
fill="#91D5FF"
/>
</svg>
</div>
);
};
export default Logo;

39
src/components/Logofreeland.tsx Normal file
View File

File diff suppressed because one or more lines are too long

147
src/components/Navbar.tsx Normal file
View File

@ -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 (
<div {...props}>
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button as={Button} emphasis="low">
<Button.Icon>
<SVGHamburger className="h-6 w-6" />
</Button.Icon>
</Menu.Button>
</div>
<Transition
as={Fragment}
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
className="origin-top-right absolute right-0 mt-5 w-56 rounded-md
shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
"block px-4 py-2 text-sm"
)}
>
CREATE NEW
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
"block px-4 py-2 text-sm"
)}
>
{/* Dropdown Menu start My library */}
<ContextMenu
emphasis="low"
button="MY LIBRARY"
className="border-none"
>
<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 End My library */}
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
"block px-4 py-2 text-sm"
)}
>
{/* Dropdown Menu About - start - */}
<ContextMenu
emphasis="low"
button="ABOUT"
className="border-none"
>
<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 - */}
</a>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
);
};
export default Navbar;

12
src/components/icons.tsx
View File

@ -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";

60
src/components/parts/FeaturedArticles.tsx Normal file
View File

@ -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: <SVGMedicine /> },
{
id: 2,
title: "Technics and Technology",
count: 5617813,
icon: <SVGTechnicsAndTechology />,
},
{ id: 3, title: "Fundamental", count: 5617813, icon: <SVGFundamental /> },
{ id: 4, title: "Humanitarian", count: 5617813, icon: <SVGHumanitarian /> },
{ id: 5, title: "Argicultural", count: 5617813, icon: <SVGAgricultural /> },
{ id: 6, title: "Social", count: 5617813, icon: <SVGSocials /> },
];
export function FeaturedArticles() {
const categoryCards = useMemo(
() =>
categories.map((category) => (
<CategoryCard
title={category.title}
count={category.count}
iconChild={category.icon}
/>
)),
categories
);
return (
<section className="w-full items-center justify-center">
<div className="pt-14 lg:pt-16 pb-4 md:pb-8 text-center">
<Typography
htmlTag="h1"
fontWeightVariant="semibold"
className="text-3xl mb-2"
>
Featured articles
</Typography>
<Typography htmlTag="h2" className="text-base text-gray-500">
Select the category of science <br className="visible sm:hidden" />
you are interested in
</Typography>
</div>
<div className="py-8 px-10 flex md:flex justify-start md:justify-center md:flex-wrap overflow-x-scroll md:overflow-hidden snap-x scroll-smooth overscroll-x-contain">
{categoryCards}
</div>
</section>
);
}