-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
245 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| 'use client'; | ||
| import React, {Fragment, useMemo} from 'react'; | ||
| import Link from 'next/link'; | ||
| import {Dialog, Transition, TransitionChild} from '@headlessui/react'; | ||
| import {IconArrow} from '@common/icons/IconArrow'; | ||
| import {IconClose} from '@common/icons/IconClose'; | ||
| import {IconDiscord} from '@common/icons/IconDiscord'; | ||
| import {IconParagraph} from '@common/icons/IconParagraph'; | ||
| import {IconTwitter} from '@common/icons/IconTwitter'; | ||
| import {LogoYearn} from '@common/icons/LogoYearn'; | ||
|
|
||
| import type {ReactElement, ReactNode} from 'react'; | ||
| import type {Chain} from 'viem'; | ||
| import type {TMenu} from '@yearn-finance/web-lib/components/Header'; | ||
|
|
||
| export function FooterNav(): ReactElement { | ||
| const menu = useMemo((): TMenu[] => { | ||
| const HOME_MENU = {path: '/', label: 'Home'}; | ||
|
|
||
| return [ | ||
| HOME_MENU, | ||
| { | ||
| path: 'https://gov.yearn.fi/', | ||
| label: 'Governance', | ||
| target: '_blank' | ||
| }, | ||
| {path: 'https://blog.yearn.fi/', label: 'Blog', target: '_blank'}, | ||
| {path: 'https://docs.yearn.fi/', label: 'Docs', target: '_blank'}, | ||
| {path: 'https://discord.gg/yearn', label: 'Support', target: '_blank'} | ||
| ]; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className={'flex flex-col justify-between gap-y-20 md:flex-row md:items-end'}> | ||
| <div className={'flex flex-col gap-y-4'}> | ||
| {menu.map(link => ( | ||
| <Link | ||
| className={ | ||
| 'flex items-center justify-between gap-x-4 text-3xl transition-colors hover:text-primary md:justify-start' | ||
| } | ||
| key={link.path} | ||
| target={link.target} | ||
| href={link.path}> | ||
| <span>{link.label}</span> | ||
| <IconArrow className={'size-4'} /> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| <div className={'flex items-center gap-6'}> | ||
| <Link | ||
| href={'/'} | ||
| target={'_blank'} | ||
| className={'flex items-center gap-x-4'}> | ||
| <IconParagraph className={'size-8 transition-colors hover:text-primary'} /> | ||
| </Link> | ||
| <Link | ||
| href={'/'} | ||
| target={'_blank'} | ||
| className={'flex items-center gap-x-4'}> | ||
| <IconDiscord className={'size-8 transition-colors hover:text-primary'} /> | ||
| </Link> | ||
| <Link | ||
| href={'/'} | ||
| target={'_blank'} | ||
| className={'flex items-center gap-x-4'}> | ||
| <IconTwitter className={'size-8 transition-colors hover:text-primary'} /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| type TModalMobileMenu = { | ||
| isOpen: boolean; | ||
| shouldUseWallets: boolean; | ||
| shouldUseNetworks: boolean; | ||
| onClose: () => void; | ||
| children: ReactNode; | ||
| supportedNetworks: Chain[]; | ||
| }; | ||
|
|
||
| export type TModal = { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| children: ReactNode; | ||
| } & React.ComponentPropsWithoutRef<'div'>; | ||
|
|
||
| export function ModalMobileMenu(props: TModalMobileMenu): ReactElement { | ||
| const {isOpen, onClose} = props; | ||
|
|
||
| return ( | ||
| <Transition | ||
| show={isOpen} | ||
| as={Fragment}> | ||
| <Dialog | ||
| as={'div'} | ||
| className={'fixed inset-0 overflow-y-auto md:hidden'} | ||
| style={{zIndex: 88}} | ||
| onClose={onClose}> | ||
| <div | ||
| className={`relative flex min-h-screen items-end justify-end px-0 pb-0 pt-4 text-center sm:block sm:p-0`}> | ||
| <TransitionChild | ||
| as={Fragment} | ||
| enter={'ease-out duration-300'} | ||
| enterFrom={'opacity-0'} | ||
| enterTo={'opacity-100'} | ||
| leave={'ease-in duration-200'} | ||
| leaveFrom={'opacity-100'} | ||
| leaveTo={'opacity-0'}> | ||
| <div className={`yearn--modal-overlay`} /> | ||
| </TransitionChild> | ||
|
|
||
| <span | ||
| className={'hidden sm:inline-block sm:h-screen sm:align-bottom'} | ||
| aria-hidden={'true'}> | ||
| ​ | ||
| </span> | ||
| <TransitionChild | ||
| as={Fragment} | ||
| enter={'ease-out duration-200'} | ||
| enterFrom={'opacity-0 translate-y-full'} | ||
| enterTo={'opacity-100 translate-y-0'} | ||
| leave={'ease-in duration-200'} | ||
| leaveFrom={'opacity-100 translate-y-0'} | ||
| leaveTo={'opacity-0 translate-y-full'}> | ||
| <div className={`yearn--modal fixed bottom-0 h-full`}> | ||
| <div className={'flex items-center justify-between border-b border-[#292929] p-6'}> | ||
| <button onClick={onClose}> | ||
| <IconClose /> | ||
| </button> | ||
| <Link href={'/'}> | ||
| <LogoYearn | ||
| className={'size-10'} | ||
| front={'text-black'} | ||
| /> | ||
| </Link> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| background: | ||
| 'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)' | ||
| }} | ||
| className={'flex h-[calc(100vh-88px)] flex-col justify-end px-6 pb-[66px]'}> | ||
| <FooterNav /> | ||
| </div> | ||
| </div> | ||
| </TransitionChild> | ||
| </div> | ||
| </Dialog> | ||
| </Transition> | ||
| ); | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import type {ReactElement, SVGProps} from 'react'; | ||
|
|
||
| export function IconBurger(props: SVGProps<SVGSVGElement>): ReactElement { | ||
| return ( | ||
| <svg | ||
| {...props} | ||
| width={'20'} | ||
| height={'20'} | ||
| viewBox={'0 0 20 20'} | ||
| fill={'none'} | ||
| xmlns={'http://www.w3.org/2000/svg'}> | ||
| <path | ||
| d={ | ||
| 'M1.66634 1.66663C1.44533 1.66663 1.23337 1.75442 1.07709 1.9107C0.920805 2.06698 0.833008 2.27895 0.833008 2.49996C0.833008 2.72097 0.920805 2.93293 1.07709 3.08921C1.23337 3.2455 1.44533 3.33329 1.66634 3.33329H18.333C18.554 3.33329 18.766 3.2455 18.9223 3.08921C19.0785 2.93293 19.1663 2.72097 19.1663 2.49996C19.1663 2.27895 19.0785 2.06698 18.9223 1.9107C18.766 1.75442 18.554 1.66663 18.333 1.66663H1.66634ZM1.66634 6.66663C1.44533 6.66663 1.23337 6.75442 1.07709 6.9107C0.920805 7.06698 0.833008 7.27895 0.833008 7.49996C0.833008 7.72097 0.920805 7.93293 1.07709 8.08921C1.23337 8.24549 1.44533 8.33329 1.66634 8.33329H11.6663C11.8874 8.33329 12.0993 8.24549 12.2556 8.08921C12.4119 7.93293 12.4997 7.72097 12.4997 7.49996C12.4997 7.27895 12.4119 7.06698 12.2556 6.9107C12.0993 6.75442 11.8874 6.66663 11.6663 6.66663H1.66634ZM0.833008 12.5C0.833008 12.2789 0.920805 12.067 1.07709 11.9107C1.23337 11.7544 1.44533 11.6666 1.66634 11.6666H18.333C18.554 11.6666 18.766 11.7544 18.9223 11.9107C19.0785 12.067 19.1663 12.2789 19.1663 12.5C19.1663 12.721 19.0785 12.9329 18.9223 13.0892C18.766 13.2455 18.554 13.3333 18.333 13.3333H1.66634C1.44533 13.3333 1.23337 13.2455 1.07709 13.0892C0.920805 12.9329 0.833008 12.721 0.833008 12.5ZM1.66634 16.6666C1.44533 16.6666 1.23337 16.7544 1.07709 16.9107C0.920805 17.067 0.833008 17.2789 0.833008 17.5C0.833008 17.721 0.920805 17.9329 1.07709 18.0892C1.23337 18.2455 1.44533 18.3333 1.66634 18.3333H11.6663C11.8874 18.3333 12.0993 18.2455 12.2556 18.0892C12.4119 17.9329 12.4997 17.721 12.4997 17.5C12.4997 17.2789 12.4119 17.067 12.2556 16.9107C12.0993 16.7544 11.8874 16.6666 11.6663 16.6666H1.66634Z' | ||
| } | ||
| fill={'#9D9D9D'} | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import type {ReactElement, SVGProps} from 'react'; | ||
|
|
||
| export function IconClose({...props}: SVGProps<SVGSVGElement>): ReactElement { | ||
| return ( | ||
| <svg | ||
| {...props} | ||
| width={'24'} | ||
| height={'24'} | ||
| viewBox={'0 0 24 24'} | ||
| fill={'none'} | ||
| xmlns={'http://www.w3.org/2000/svg'}> | ||
| <path | ||
| d={'M6 6L18 18'} | ||
| stroke={'white'} | ||
| stroke-width={'2'} | ||
| stroke-linecap={'round'} | ||
| stroke-linejoin={'round'} | ||
| /> | ||
| <path | ||
| d={'M6 18L18 6'} | ||
| stroke={'white'} | ||
| stroke-width={'2'} | ||
| stroke-linecap={'round'} | ||
| stroke-linejoin={'round'} | ||
| /> | ||
| <path | ||
| d={'M6 6L18 18'} | ||
| stroke={'white'} | ||
| stroke-width={'2'} | ||
| stroke-linecap={'round'} | ||
| stroke-linejoin={'round'} | ||
| /> | ||
| <path | ||
| d={'M6 18L18 6'} | ||
| stroke={'white'} | ||
| stroke-width={'2'} | ||
| stroke-linecap={'round'} | ||
| stroke-linejoin={'round'} | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.