From 681864dc9fa4adc82ab35732c3449aa732810d0c Mon Sep 17 00:00:00 2001 From: Karlen9 Date: Tue, 13 Aug 2024 20:16:47 +0400 Subject: [PATCH] feat: add icons --- apps/common/components/MobileNavbar.tsx | 24 +++++++------- apps/common/components/Sidebar.tsx | 20 ++++++++++-- apps/common/icons/IconAbout.tsx | 23 +++++++++++++ apps/common/icons/IconFrontends.tsx | 30 +++++++++++++++++ apps/common/icons/IconIntegrations.tsx | 20 ++++++++++++ apps/common/icons/IconLock.tsx | 32 +++++++++++++++++++ apps/common/icons/IconPools.tsx | 22 +++++++++++++ .../utils/{constants.ts => constants.tsx} | 18 +++++++++++ 8 files changed, 175 insertions(+), 14 deletions(-) create mode 100644 apps/common/icons/IconAbout.tsx create mode 100644 apps/common/icons/IconFrontends.tsx create mode 100644 apps/common/icons/IconIntegrations.tsx create mode 100644 apps/common/icons/IconLock.tsx create mode 100644 apps/common/icons/IconPools.tsx rename apps/common/utils/{constants.ts => constants.tsx} (92%) diff --git a/apps/common/components/MobileNavbar.tsx b/apps/common/components/MobileNavbar.tsx index 45a1e7b1b..235f8db0e 100644 --- a/apps/common/components/MobileNavbar.tsx +++ b/apps/common/components/MobileNavbar.tsx @@ -1,22 +1,13 @@ import Link from 'next/link'; import {usePathname} from 'next/navigation'; import {cl} from '@builtbymom/web3/utils'; -import {IconCommunity} from '@common/icons/IconCommunity'; -import {IconYearn} from '@common/icons/IconYearn'; -import {IconYearnXApps} from '@common/icons/IconYearnXApps'; import {LogoDiscordRound} from '@common/icons/LogoDiscordRound'; import {LogoParagraphRound} from '@common/icons/LogoParagraphRound'; import {LogoTwitterRound} from '@common/icons/LogoTwitterRound'; -import {LANDING_SIDEBAR_LINKS, MENU_TABS} from '@common/utils/constants'; +import {iconsDict, LANDING_SIDEBAR_LINKS, MENU_TABS} from '@common/utils/constants'; import type {ReactElement} from 'react'; -const iconsDict = { - '/': , - community: , - 'yearn-x': -}; - export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement { const pathName = usePathname(); @@ -36,7 +27,18 @@ export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement { onClick={onClose} href={tab.route === '/' ? tab.route : `/home/${tab.route}`}>
- {iconsDict[tab.route as '/' | 'community' | 'yearn-x']} + { + iconsDict[ + tab.route as + | '/' + | 'yearn-x' + | 'about' + | 'frontends' + | 'lockers' + | 'integrations' + | 'pools' + ] + }

{tab.title}

diff --git a/apps/common/components/Sidebar.tsx b/apps/common/components/Sidebar.tsx index 192ed6f7e..cd94bc179 100644 --- a/apps/common/components/Sidebar.tsx +++ b/apps/common/components/Sidebar.tsx @@ -4,7 +4,7 @@ import {usePathname, useRouter} from 'next/navigation'; import {cl} from '@builtbymom/web3/utils'; import {useSearch} from '@common/contexts/useSearch'; import {LogoYearn} from '@common/icons/LogoYearn'; -import {LANDING_SIDEBAR_LINKS} from '@common/utils/constants'; +import {iconsDict, LANDING_SIDEBAR_LINKS} from '@common/utils/constants'; import {PromoPoster} from './PromoPoster'; import {SearchBar} from './SearchBar'; @@ -57,12 +57,26 @@ export function Sidebar(props: TSidebarProps): ReactElement { {props.tabs.map(tab => ( - {tab.title} +
+ { + iconsDict[ + tab.route as + | '/' + | 'yearn-x' + | 'about' + | 'frontends' + | 'lockers' + | 'integrations' + | 'pools' + ] + } +
+

{tab.title}

))} diff --git a/apps/common/icons/IconAbout.tsx b/apps/common/icons/IconAbout.tsx new file mode 100644 index 000000000..db220aa22 --- /dev/null +++ b/apps/common/icons/IconAbout.tsx @@ -0,0 +1,23 @@ +import type {ReactElement} from 'react'; + +export function IconAbout(props: React.SVGProps): ReactElement { + return ( + + + + ); +} diff --git a/apps/common/icons/IconFrontends.tsx b/apps/common/icons/IconFrontends.tsx new file mode 100644 index 000000000..fd355f05e --- /dev/null +++ b/apps/common/icons/IconFrontends.tsx @@ -0,0 +1,30 @@ +import type {ReactElement} from 'react'; + +export function IconFrontends(props: React.SVGProps): ReactElement { + return ( + + + + + ); +} diff --git a/apps/common/icons/IconIntegrations.tsx b/apps/common/icons/IconIntegrations.tsx new file mode 100644 index 000000000..a2daae829 --- /dev/null +++ b/apps/common/icons/IconIntegrations.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from 'react'; + +export function IconIntegrations(props: React.SVGProps): ReactElement { + return ( + + + + ); +} diff --git a/apps/common/icons/IconLock.tsx b/apps/common/icons/IconLock.tsx new file mode 100644 index 000000000..557ca3f88 --- /dev/null +++ b/apps/common/icons/IconLock.tsx @@ -0,0 +1,32 @@ +import type {ReactElement} from 'react'; + +export function IconLock(props: React.SVGProps): ReactElement { + return ( + + + + + ); +} diff --git a/apps/common/icons/IconPools.tsx b/apps/common/icons/IconPools.tsx new file mode 100644 index 000000000..9e5aee6e3 --- /dev/null +++ b/apps/common/icons/IconPools.tsx @@ -0,0 +1,22 @@ +import type {ReactElement} from 'react'; + +export function IconPools(props: React.SVGProps): ReactElement { + return ( + + + + ); +} diff --git a/apps/common/utils/constants.ts b/apps/common/utils/constants.tsx similarity index 92% rename from apps/common/utils/constants.ts rename to apps/common/utils/constants.tsx index 2dcc9472a..447e51154 100644 --- a/apps/common/utils/constants.ts +++ b/apps/common/utils/constants.tsx @@ -1,5 +1,12 @@ import {arbitrum, base, fantom, mainnet, optimism, polygon} from 'viem/chains'; import {toAddress} from '@builtbymom/web3/utils'; +import {IconAbout} from '@common/icons/IconAbout'; +import {IconFrontends} from '@common/icons/IconFrontends'; +import {IconIntegrations} from '@common/icons/IconIntegrations'; +import {IconLock} from '@common/icons/IconLock'; +import {IconPools} from '@common/icons/IconPools'; +import {IconYearn} from '@common/icons/IconYearn'; +import {IconYearnXApps} from '@common/icons/IconYearnXApps'; import type {TApp} from '@common/types/category'; @@ -230,6 +237,7 @@ export const LANDING_SIDEBAR_LINKS = [ export const MENU_TABS = [ {title: 'Home', route: '/'}, + {title: 'About', route: 'about'}, {title: 'Frontends', route: 'frontends'}, {title: 'Lockers', route: 'lockers'}, {title: 'Pools', route: 'pools'}, @@ -243,3 +251,13 @@ export const CATEGORY_PAGE_FILTERS = [ {title: 'Tab', value: 'tab'}, {title: 'Large Filter', value: 'large-filter'} ]; + +export const iconsDict = { + '/': , + about: , + frontends: , + lockers: , + pools: , + 'yearn-x': , + integrations: +};