feat: add icons

yearn · Aug 13, 2024 · 681864d · 681864d
1 parent fef22cf
commit 681864d
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 14 deletions.
diff --git 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 = {
-	'/': <IconYearn />,
-	community: <IconCommunity />,
-	'yearn-x': <IconYearnXApps />
-};
-
 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}`}>
 						<div className={'flex size-6 items-center justify-center'}>
-							{iconsDict[tab.route as '/' | 'community' | 'yearn-x']}
+							{
+								iconsDict[
+									tab.route as
+										| '/'
+										| 'yearn-x'
+										| 'about'
+										| 'frontends'
+										| 'lockers'
+										| 'integrations'
+										| 'pools'
+								]
+							}
 						</div>
 						<p>{tab.title}</p>
 					</Link>

diff --git 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 => (
 						<Link
 							className={cl(
-								'py-2 px-[28px] text-base hover:bg-gray-600/40',
+								'py-2 px-[28px] flex gap-4 text-base hover:bg-gray-600/40',
 								currentTab === tab.route ? 'text-white font-bold' : 'text-gray-400'
 							)}
 							href={tab.route === '/' ? tab.route : `/home/${tab.route}`}
 							key={tab.route}>
-							{tab.title}
+							<div className={'flex size-6 items-center justify-center'}>
+								{
+									iconsDict[
+										tab.route as
+											| '/'
+											| 'yearn-x'
+											| 'about'
+											| 'frontends'
+											| 'lockers'
+											| 'integrations'
+											| 'pools'
+									]
+								}
+							</div>
+							<p>{tab.title}</p>
 						</Link>
 					))}
 				</div>

diff --git a/apps/common/icons/IconAbout.tsx b/apps/common/icons/IconAbout.tsx
@@ -0,0 +1,23 @@
+import type {ReactElement} from 'react';
+
+export function IconAbout(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg
+			{...props}
+			width={'18'}
+			height={'16'}
+			viewBox={'0 0 18 16'}
+			fill={'none'}
+			xmlns={'http://www.w3.org/2000/svg'}>
+			<path
+				d={
+					'M17 8C12.8416 8 9 5.08957 9 1C9 5.08957 5.15831 8 1 8C5.15831 8 9 10.9104 9 15C9 10.9104 12.8416 8 17 8Z'
+				}
+				stroke={'currentcolor'}
+				strokeWidth={'1.5'}
+				strokeLinecap={'round'}
+				strokeLinejoin={'round'}
+			/>
+		</svg>
+	);
+}
diff --git a/apps/common/icons/IconFrontends.tsx b/apps/common/icons/IconFrontends.tsx
@@ -0,0 +1,30 @@
+import type {ReactElement} from 'react';
+
+export function IconFrontends(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg
+			{...props}
+			width={'18'}
+			height={'17'}
+			viewBox={'0 0 18 17'}
+			fill={'none'}
+			xmlns={'http://www.w3.org/2000/svg'}>
+			<path
+				fillRule={'evenodd'}
+				clipRule={'evenodd'}
+				d={
+					'M11.12 0.676598L16.8792 4.2799C17.7353 4.82863 17.7474 6.13462 16.8026 6.64568L10.9071 9.89628L10.9084 9.90116C9.5699 10.6312 7.96178 10.6312 6.6233 9.90116L6.62027 9.89951L0.710922 6.64126C-0.210803 6.12419 -0.225926 4.83654 0.642371 4.27994L0.649877 4.27512L6.41166 0.676598C7.85073 -0.225546 9.68093 -0.22552 11.12 0.676598ZM10.1703 8.57623L10.169 8.57143L15.8621 5.43245L10.315 1.96184C9.36829 1.36816 8.16406 1.36774 7.2174 1.96142L1.65967 5.43256L7.3509 8.57053C8.23247 9.05079 9.28733 9.05269 10.1703 8.57623Z'
+				}
+				fill={'currentcolor'}
+			/>
+			<path
+				fillRule={'evenodd'}
+				clipRule={'evenodd'}
+				d={
+					'M1.66352 11.4964L5.72052 8.95835L4.9162 7.67265L0.654513 10.3387C-0.254185 10.8909 -0.197667 12.2026 0.705855 12.7002L6.60873 15.9548C7.94919 16.6978 9.5618 16.6983 10.9023 15.9553L16.8053 12.7005C17.7088 12.2029 17.766 10.8909 16.8572 10.3387L12.5956 7.67265L11.7913 8.95835L15.8483 11.4964L10.1676 14.6285C9.2842 15.1184 8.2276 15.1184 7.34421 14.6285L1.66352 11.4964Z'
+				}
+				fill={'currentcolor'}
+			/>
+		</svg>
+	);
+}
diff --git a/apps/common/icons/IconIntegrations.tsx b/apps/common/icons/IconIntegrations.tsx
@@ -0,0 +1,20 @@
+import type {ReactElement} from 'react';
+
+export function IconIntegrations(props: React.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={
+					'M19.5945 6.99762L13.9103 3.53665C12.7299 2.82112 11.2623 2.82112 10.082 3.53665L4.39776 6.99762C3.53581 7.51871 3 8.47535 3 9.49419V15.2962C3 16.3073 3.53581 17.2639 4.39776 17.7928L10.082 21.246C10.6721 21.6037 11.3322 21.7826 12 21.7826C12.6678 21.7826 13.3279 21.6037 13.918 21.246L19.6022 17.7928C20.4642 17.2639 21 16.3073 21 15.2962V9.49419C21 8.48312 20.4642 7.52649 19.6022 6.99762H19.5945ZM10.6877 4.53216C11.0915 4.28328 11.5418 4.16662 12 4.16662C12.4582 4.16662 12.9085 4.29106 13.3123 4.53216L18.981 7.97759L13.4288 10.9564C12.5358 11.4386 11.4642 11.4386 10.5712 10.9564L5.01898 7.97759L10.6877 4.53216ZM5.00345 16.7817C4.48318 16.4628 4.1648 15.8951 4.1648 15.2884V9.48642C4.1648 9.2842 4.21139 9.08977 4.28128 8.91088L8.5522 11.2052C10.3227 12.1541 11.4176 13.9896 11.4176 15.9962V20.5382C11.1691 20.476 10.9206 20.3827 10.6877 20.2427L5.00345 16.7895V16.7817ZM19.8352 15.2884C19.8352 15.8951 19.5091 16.4706 18.9965 16.7817L13.3123 20.2349C13.0794 20.3749 12.8387 20.4682 12.5824 20.5304V15.9884C12.5824 13.9818 13.6773 12.1463 15.4478 11.1975L19.7187 8.90311C19.7886 9.08977 19.8352 9.2842 19.8352 9.47864V15.2884Z'
+				}
+				fill={'currentcolor'}
+			/>
+		</svg>
+	);
+}
diff --git a/apps/common/icons/IconLock.tsx b/apps/common/icons/IconLock.tsx
@@ -0,0 +1,32 @@
+import type {ReactElement} from 'react';
+
+export function IconLock(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg
+			{...props}
+			width={'16'}
+			height={'18'}
+			viewBox={'0 0 16 18'}
+			fill={'none'}
+			xmlns={'http://www.w3.org/2000/svg'}>
+			<path
+				d={
+					'M13.5998 8.2002H2.3998C1.51615 8.2002 0.799805 8.91654 0.799805 9.8002V15.4002C0.799805 16.2839 1.51615 17.0002 2.3998 17.0002H13.5998C14.4835 17.0002 15.1998 16.2839 15.1998 15.4002V9.8002C15.1998 8.91654 14.4835 8.2002 13.5998 8.2002Z'
+				}
+				stroke={'currentcolor'}
+				strokeWidth={'1.5'}
+				strokeLinecap={'round'}
+				strokeLinejoin={'round'}
+			/>
+			<path
+				d={
+					'M4 8.2V5C4 3.93913 4.42143 2.92172 5.17157 2.17157C5.92172 1.42143 6.93913 1 8 1C9.06087 1 10.0783 1.42143 10.8284 2.17157C11.5786 2.92172 12 3.93913 12 5V8.2'
+				}
+				stroke={'currentcolor'}
+				strokeWidth={'1.5'}
+				strokeLinecap={'round'}
+				strokeLinejoin={'round'}
+			/>
+		</svg>
+	);
+}
diff --git a/apps/common/icons/IconPools.tsx b/apps/common/icons/IconPools.tsx
@@ -0,0 +1,22 @@
+import type {ReactElement} from 'react';
+
+export function IconPools(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg
+			{...props}
+			width={'16'}
+			height={'16'}
+			viewBox={'0 0 16 16'}
+			fill={'none'}
+			xmlns={'http://www.w3.org/2000/svg'}>
+			<path
+				fillRule={'evenodd'}
+				clipRule={'evenodd'}
+				d={
+					'M5.33334 13.2564V9.99981H10.6667V11.3751C10.9193 11.3505 11.1727 11.3331 11.4267 11.3331C11.8453 11.3331 12.2593 11.3745 12.6667 11.4391V3.6666C12.6667 2.74728 13.4147 1.99996 14.3333 1.99996C14.886 1.99996 15.3333 1.55197 15.3333 0.999981C15.3333 0.447992 14.886 0 14.3333 0C12.3113 0 10.6667 1.6453 10.6667 3.6666V4.66658H5.33334V3.6666C5.33334 2.74728 6.08134 1.99996 7 1.99996C7.55267 1.99996 8 1.55197 8 0.999981C8 0.447992 7.55267 0 7 0C4.97801 0 3.33335 1.6453 3.33335 3.6666V13.1231C3.72134 13.2564 4.13601 13.3371 4.56534 13.3371C4.82401 13.3371 5.08134 13.3078 5.33334 13.2564ZM15.8013 14.4C13.9867 12.6127 11.056 12.1514 8.672 13.2787L6.75867 14.1827C4.87134 15.0753 2.55801 14.7186 1.13468 13.3167C0.870685 13.058 0.450019 13.0607 0.191353 13.324C-0.066646 13.5867 -0.0633127 14.008 0.198687 14.2667C1.35002 15.4 2.94935 16 4.57401 16C5.51067 16 6.456 15.8 7.328 15.388L9.24133 14.484C11.1287 13.5913 13.4413 13.9473 14.8653 15.35C15.128 15.608 15.5486 15.6053 15.8086 15.3426C16.0666 15.0806 16.0633 14.6587 15.8013 14.4ZM10.6667 8.66651V5.99989H5.33334V8.66651H10.6667Z'
+				}
+				fill={'currentcolor'}
+			/>
+		</svg>
+	);
+}
diff --git a/apps/common/utils/constants.ts → apps/common/utils/constants.tsx b/apps/common/utils/constants.ts → 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 = {
+	'/': <IconYearn />,
+	about: <IconAbout />,
+	frontends: <IconFrontends />,
+	lockers: <IconLock />,
+	pools: <IconPools />,
+	'yearn-x': <IconYearnXApps />,
+	integrations: <IconIntegrations />
+};