diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..0442b0e --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,117 @@ +import React, {ReactElement} from 'react'; +import type * as NavbarTypes from 'components/Navbar.d'; +import {motion, useInView} from 'framer-motion'; +import Link from 'next/link'; +import {useRouter} from 'next/router'; +import Image from 'next/image'; +import LogoYearn from 'components/icons/LogoYearn'; +import MobileHeader from 'components/MobileHeader'; + +const variants = { + enter: { + x: 0, + opacity: 1, + transition: { + duration: 1, + ease: 'easeInOut' + } + }, + initial: { + x: -600, + opacity: 0, + transition: { + duration: 1, + ease: 'easeInOut' + } + } +}; + +function NavbarMenuItem({option, isSelected}: NavbarTypes.TMenuItem): ReactElement { + return ( +
+

+ {option.label} +

+
+
+ ); +} + +function Header({ + options, + children, + wrapper +}: NavbarTypes.TNavbar): ReactElement { + const ref = React.useRef(null); + const isInView = useInView(ref); + const router = useRouter(); + + return ( + <> + +
+
+ +
+ +
+ +
+

+ {'Yearn World'} +

+
+

{'A decentralized project registry for a decentralized brand.'}

+

{'Take the blue pill and enter the world of yearn.'}

+
+
+
+ +
+
+
+ + + ); +} + +export default Header; \ No newline at end of file diff --git a/components/MobileHeader.tsx b/components/MobileHeader.tsx new file mode 100644 index 0000000..d107967 --- /dev/null +++ b/components/MobileHeader.tsx @@ -0,0 +1,62 @@ +import React, {ReactElement} from 'react'; +import Link from 'next/link'; +import {Card, ModalMobileMenu} from '@yearn-finance/web-lib/components'; +import {Hamburger} from '@yearn-finance/web-lib/icons'; +import LogoYearn from 'components/icons/LogoYearn'; +import type * as NavbarTypes from 'components/Navbar.d'; + +function NavbarMenuItem({option}: NavbarTypes.TMenuItem): ReactElement { + return ( +
+

+ {option.label} +

+
+ ); +} + +function MobileHeader({options, wrapper}: NavbarTypes.TNavbar): ReactElement { + const [hasMobileMenu, set_hasMobileMenu] = React.useState(false); + + return ( +
+ +
+ +
+ +
+ +
+
+ +
+ + set_hasMobileMenu(false)}> + {options.map((option: NavbarTypes.TNavbarOption): ReactElement => { + return ( +
set_hasMobileMenu(false)}> + {React.cloneElement( + wrapper, + {href: option.route}, + + + + )} +
+ ); + })} + +
+ ); +} + +export default MobileHeader; \ No newline at end of file diff --git a/components/Navbar.d.tsx b/components/Navbar.d.tsx new file mode 100644 index 0000000..c5b6a7a --- /dev/null +++ b/components/Navbar.d.tsx @@ -0,0 +1,23 @@ +import {ReactElement} from 'react'; + +export type TNavbarOption = { + route: string; + values: string | string[]; + label: string; + icon?: ReactElement; + options?: TNavbarOption[]; +} + +export type TNavbar = { + options: TNavbarOption[]; + logo?: ReactElement; + title?: string; + selected?: string; + children?: ReactElement; + wrapper: ReactElement; +} + +export type TMenuItem = { + option: TNavbarOption; + isSelected: boolean; +} diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx new file mode 100644 index 0000000..c39cfe4 --- /dev/null +++ b/components/ProjectCard.tsx @@ -0,0 +1,74 @@ +import React, {ReactElement} from 'react'; +import axios from 'axios'; +import useSWR from 'swr'; +import type {TMetadata, TGithubReleases, TOverwrite} from 'types/metadata.d'; + +const fetcher = async (path: string, url: string): Promise => axios.get(path, {params: {url}}).then((res): any => res.data).catch((e): void => console.log(e)); +const fetcherSimple = async (url: string): Promise => axios.get(url).then((res): any => res.data).catch((e): void => console.log(e)); + +const tagClassNames: any = { + 'Yield Farming': 'bg-up-only-green-600 text-white', + 'Data analytics': 'bg-metaverse-sunset-600 text-white', + 'Experimental Defi': 'bg-up-only-green-600 text-white', + 'Design': 'bg-tokyo-party-400 text-white', + 'Communication': 'bg-disco-salmon-600 text-white', + 'NFT': 'bg-tokyo-party-400 text-white', + 'Other': 'bg-neutral-400 text-white' +}; + +function ProjectCard({ + url, + tags, + overwrite +}: {url: string, tags: string[], overwrite: TOverwrite}): ReactElement { + const {data: metadata} = useSWR(['/api/metadata', url], fetcher); + const {data: releases} = useSWR( + metadata?.['git-url'] ? `https://api.github.com/repos/${metadata?.['git-url'].replaceAll('https://github.com/', '')}/releases` : undefined, + fetcherSimple + ); + + return ( +
+ +
+

+ {overwrite?.title ? overwrite?.title : metadata?.title || ''} +

+
+ +
+
+ {tags.map((tag): ReactElement => ( +
+ {tag} +
+ ))} +
+

{metadata?.description}

+ +
+
+ ); +} + + +export default ProjectCard; \ No newline at end of file diff --git a/components/SocialCard.tsx b/components/SocialCard.tsx new file mode 100644 index 0000000..4cfc522 --- /dev/null +++ b/components/SocialCard.tsx @@ -0,0 +1,28 @@ +import Image from 'next/image'; +import React, {ReactElement} from 'react'; + +function SocialCard({ + url, + name, + logo, + bgColor, + textColor, + width = 48 +}: {url: string, name: string, logo: string, bgColor: string, textColor: string, width: number}): ReactElement { + + return ( +
+ +
+ +

+ {name} +

+
+ +
+ ); +} + + +export default SocialCard; \ No newline at end of file diff --git a/components/YearnLogo.tsx b/components/YearnLogo.tsx new file mode 100644 index 0000000..62fc461 --- /dev/null +++ b/components/YearnLogo.tsx @@ -0,0 +1,12 @@ +import React, {ReactElement} from 'react'; + +function YearnLogo(props: React.SVGProps): ReactElement { + return ( + + + + ); +} + +export default YearnLogo; + diff --git a/components/common/AppWrapper.tsx b/components/common/AppWrapper.tsx index 0c64390..fb860a1 100644 --- a/components/common/AppWrapper.tsx +++ b/components/common/AppWrapper.tsx @@ -1,11 +1,9 @@ import React, {ReactElement} from 'react'; import {AppProps} from 'next/app'; -import {KBarProvider} from 'kbar'; +import Link from 'next/link'; import {AnimatePresence, motion} from 'framer-motion'; -import Header from 'components/common/StandardHeader'; -import Footer from 'components/common/StandardFooter'; import Meta from 'components/common/Meta'; -import KBar from 'components/common/Kbar'; +import Header from 'components/Header'; const transition = {duration: 0.3, ease: [0.17, 0.67, 0.83, 0.67]}; const thumbnailVariants = { @@ -17,13 +15,34 @@ const thumbnailVariants = { function WithLayout(props: AppProps): ReactElement { const {Component, pageProps, router} = props; + const navbarMenuOptions = [ + { + route: '/', + values: ['/'], + label: 'Built on Yearn' + }, + { + route: '/social', + values: ['/social'], + label: 'Social Media' + } + ]; + + function handleExitComplete(): void { + if (typeof window !== 'undefined') { + document.getElementById('app')?.scrollIntoView({behavior: 'smooth'}); + } + } + + return (
-
- + selected={router.pathname} + options={navbarMenuOptions} + wrapper={} /> +
+
-