From 189a81bd1c54400f62d949b2a39c63a630a6985d Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Wed, 7 Feb 2024 16:11:01 +0100 Subject: [PATCH 1/6] feat: more icon components + prop fixes --- src/app/_components/icons/across.tsx | 4 +- src/app/_components/icons/chevron-down.tsx | 21 ++ src/app/_components/icons/discord.tsx | 19 ++ .../_components/icons/gradient/arrow-up.tsx | 74 ++--- .../icons/gradient/blocks-connected.tsx | 56 ++-- .../icons/gradient/blocks-diagonal.tsx | 96 +++---- src/app/_components/icons/gradient/bridge.tsx | 29 +- src/app/_components/icons/gradient/chat.tsx | 61 ++--- .../_components/icons/gradient/checklist.tsx | 97 +++---- .../icons/gradient/checkmark-simple.tsx | 29 +- .../_components/icons/gradient/checkmark.tsx | 22 +- src/app/_components/icons/gradient/code.tsx | 34 +-- .../icons/gradient/cross-chain.tsx | 51 ++-- src/app/_components/icons/gradient/dollar.tsx | 30 +- .../icons/gradient/double-chevron-right.tsx | 62 ++--- .../_components/icons/gradient/feather.tsx | 60 ++-- .../icons/gradient/logos/arbitrum.tsx | 50 ++-- .../_components/icons/gradient/logos/base.tsx | 48 ++-- .../icons/gradient/logos/ethereum.tsx | 256 +++++++++--------- .../icons/gradient/logos/optimism.tsx | 88 +++--- .../icons/gradient/logos/polygon.tsx | 46 ++-- .../icons/gradient/logos/zksync.tsx | 106 ++++---- src/app/_components/icons/gradient/plus.tsx | 51 ++-- .../icons/gradient/shield-large.tsx | 38 +-- .../icons/gradient/shield-small.tsx | 28 +- src/app/_components/icons/index.tsx | 7 + src/app/_components/icons/medium.tsx | 19 ++ src/app/_components/icons/menu.tsx | 18 ++ src/app/_components/icons/minus.tsx | 16 ++ src/app/_components/icons/twitter.tsx | 26 ++ src/app/_components/icons/uma.tsx | 51 ++++ 31 files changed, 864 insertions(+), 729 deletions(-) create mode 100644 src/app/_components/icons/chevron-down.tsx create mode 100644 src/app/_components/icons/discord.tsx create mode 100644 src/app/_components/icons/medium.tsx create mode 100644 src/app/_components/icons/menu.tsx create mode 100644 src/app/_components/icons/minus.tsx create mode 100644 src/app/_components/icons/twitter.tsx create mode 100644 src/app/_components/icons/uma.tsx diff --git a/src/app/_components/icons/across.tsx b/src/app/_components/icons/across.tsx index f30e08d..239d6cf 100644 --- a/src/app/_components/icons/across.tsx +++ b/src/app/_components/icons/across.tsx @@ -14,8 +14,8 @@ export function AcrossIcon({ className, ...props }: SVGProps) { > diff --git a/src/app/_components/icons/chevron-down.tsx b/src/app/_components/icons/chevron-down.tsx new file mode 100644 index 0000000..89b7de1 --- /dev/null +++ b/src/app/_components/icons/chevron-down.tsx @@ -0,0 +1,21 @@ +import { SVGProps } from "react"; + +export function ChevronDownIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/discord.tsx b/src/app/_components/icons/discord.tsx new file mode 100644 index 0000000..79825fb --- /dev/null +++ b/src/app/_components/icons/discord.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from "react"; + +export function DiscordIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/gradient/arrow-up.tsx b/src/app/_components/icons/gradient/arrow-up.tsx index dd02336..2d402e4 100644 --- a/src/app/_components/icons/gradient/arrow-up.tsx +++ b/src/app/_components/icons/gradient/arrow-up.tsx @@ -10,7 +10,7 @@ export function ArrowUpIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.7143" rx="6" fill="#44D2FF" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.7143" rx="6" fill="#44D2FF" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { ) { y2="57.7152" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="57.7152" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="70.7153" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="70.7153" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/blocks-connected.tsx b/src/app/_components/icons/gradient/blocks-connected.tsx index a506132..4d04998 100644 --- a/src/app/_components/icons/gradient/blocks-connected.tsx +++ b/src/app/_components/icons/gradient/blocks-connected.tsx @@ -10,7 +10,7 @@ export function BlocksConnectedIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.7143" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.7143" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { fill="url(#paint0_linear_564_7341)" /> @@ -67,13 +67,13 @@ export function BlocksConnectedIcon(props: SVGProps) { y2="41.7141" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="67.4272" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="78.8557" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/blocks-diagonal.tsx b/src/app/_components/icons/gradient/blocks-diagonal.tsx index f90a0ba..9b2dd2e 100644 --- a/src/app/_components/icons/gradient/blocks-diagonal.tsx +++ b/src/app/_components/icons/gradient/blocks-diagonal.tsx @@ -16,7 +16,7 @@ export function BlocksDiagonalIcon(props: SVGProps) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { y2="96" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="96" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="60.75" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="60.75" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="25.5" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="25.5" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/bridge.tsx b/src/app/_components/icons/gradient/bridge.tsx index a32e625..a3c151a 100644 --- a/src/app/_components/icons/gradient/bridge.tsx +++ b/src/app/_components/icons/gradient/bridge.tsx @@ -2,18 +2,11 @@ import { SVGProps } from "react"; export function BridgeIcon(props: SVGProps) { return ( - - + + @@ -27,13 +20,13 @@ export function BridgeIcon(props: SVGProps) { y2="50.1865" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/chat.tsx b/src/app/_components/icons/gradient/chat.tsx index 1e36cac..daee084 100644 --- a/src/app/_components/icons/gradient/chat.tsx +++ b/src/app/_components/icons/gradient/chat.tsx @@ -26,24 +26,17 @@ export function ChatIcon({ variant = "aqua", className, ...props }: Props) { )} {...props} > - + - - + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/checklist.tsx b/src/app/_components/icons/gradient/checklist.tsx index f4efdf8..deebd3f 100644 --- a/src/app/_components/icons/gradient/checklist.tsx +++ b/src/app/_components/icons/gradient/checklist.tsx @@ -10,7 +10,7 @@ export function ChecklistIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" - /> - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { y2="53.1452" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="19.1442" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="87.7155" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/checkmark-simple.tsx b/src/app/_components/icons/gradient/checkmark-simple.tsx index 84a21b0..e7e18e3 100644 --- a/src/app/_components/icons/gradient/checkmark-simple.tsx +++ b/src/app/_components/icons/gradient/checkmark-simple.tsx @@ -2,18 +2,11 @@ import { SVGProps } from "react"; export function CheckmarkSimpleIcon(props: SVGProps) { return ( - - + + @@ -27,13 +20,13 @@ export function CheckmarkSimpleIcon(props: SVGProps) { y2="22.9333" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/checkmark.tsx b/src/app/_components/icons/gradient/checkmark.tsx index 37cfe97..3aa7239 100644 --- a/src/app/_components/icons/gradient/checkmark.tsx +++ b/src/app/_components/icons/gradient/checkmark.tsx @@ -15,11 +15,11 @@ export function CheckmarkIcon(props: SVGProps) { height="96" rx="48" fill="url(#paint0_linear_564_7350)" - fill-opacity="0.2" + fillOpacity="0.2" /> @@ -32,8 +32,8 @@ export function CheckmarkIcon(props: SVGProps) { y2="96" gradientUnits="userSpaceOnUse" > - - + + ) { y2="82.2859" gradientUnits="userSpaceOnUse" > - - - - - - + + + + + + diff --git a/src/app/_components/icons/gradient/code.tsx b/src/app/_components/icons/gradient/code.tsx index a5b02e5..b1e1410 100644 --- a/src/app/_components/icons/gradient/code.tsx +++ b/src/app/_components/icons/gradient/code.tsx @@ -16,7 +16,7 @@ export function CodeIcon(props: SVGProps) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="24" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> @@ -66,9 +66,9 @@ export function CodeIcon(props: SVGProps) { width="101.08" height="88.2525" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ) { y2="77.3025" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/cross-chain.tsx b/src/app/_components/icons/gradient/cross-chain.tsx index c74c331..c83bc77 100644 --- a/src/app/_components/icons/gradient/cross-chain.tsx +++ b/src/app/_components/icons/gradient/cross-chain.tsx @@ -9,7 +9,7 @@ export function CrossChainIcon(props: SVGProps) { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" - /> - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { y2="60.75" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="82.2859" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/dollar.tsx b/src/app/_components/icons/gradient/dollar.tsx index f840eff..86513a0 100644 --- a/src/app/_components/icons/gradient/dollar.tsx +++ b/src/app/_components/icons/gradient/dollar.tsx @@ -10,7 +10,7 @@ export function DollarIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> @@ -60,13 +60,13 @@ export function DollarIcon(props: SVGProps) { y2="81.4292" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/double-chevron-right.tsx b/src/app/_components/icons/gradient/double-chevron-right.tsx index 9b759cc..b06e54f 100644 --- a/src/app/_components/icons/gradient/double-chevron-right.tsx +++ b/src/app/_components/icons/gradient/double-chevron-right.tsx @@ -16,7 +16,7 @@ export function DoubleChevronRightIcon(props: SVGProps) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { y2="48.001" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="48.001" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/feather.tsx b/src/app/_components/icons/gradient/feather.tsx index 0002218..1839ac2 100644 --- a/src/app/_components/icons/gradient/feather.tsx +++ b/src/app/_components/icons/gradient/feather.tsx @@ -13,10 +13,10 @@ export function FeatherIcon(props: SVGProps) { ) { fill="url(#paint2_linear_564_7302)" /> ) { y2="90.8574" gradientUnits="userSpaceOnUse" > - - + + ) { y2="66.0018" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="66.0018" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="90.8574" gradientUnits="userSpaceOnUse" > - - + + diff --git a/src/app/_components/icons/gradient/logos/arbitrum.tsx b/src/app/_components/icons/gradient/logos/arbitrum.tsx index 73748c4..71c375e 100644 --- a/src/app/_components/icons/gradient/logos/arbitrum.tsx +++ b/src/app/_components/icons/gradient/logos/arbitrum.tsx @@ -13,8 +13,8 @@ export function ArbitrumIcon({ variant = "aqua", ...props }: LogoIconProps) { > @@ -27,9 +27,9 @@ export function ArbitrumIcon({ variant = "aqua", ...props }: LogoIconProps) { width="70" height="75" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/base.tsx b/src/app/_components/icons/gradient/logos/base.tsx index fb09f1c..d197625 100644 --- a/src/app/_components/icons/gradient/logos/base.tsx +++ b/src/app/_components/icons/gradient/logos/base.tsx @@ -11,7 +11,7 @@ export function BaseIcon({ variant = "aqua", ...props }: LogoIconProps) { fill="none" {...props} > - + - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/ethereum.tsx b/src/app/_components/icons/gradient/logos/ethereum.tsx index b78c959..7876867 100644 --- a/src/app/_components/icons/gradient/logos/ethereum.tsx +++ b/src/app/_components/icons/gradient/logos/ethereum.tsx @@ -45,9 +45,9 @@ export function EthereumIcon({ variant = "aqua", ...props }: LogoIconProps) { width="58" height="80" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/optimism.tsx b/src/app/_components/icons/gradient/logos/optimism.tsx index 326a013..5caf079 100644 --- a/src/app/_components/icons/gradient/logos/optimism.tsx +++ b/src/app/_components/icons/gradient/logos/optimism.tsx @@ -29,9 +29,9 @@ export function OptimismIcon({ variant = "aqua", ...props }: LogoIconProps) { width="88" height="58" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/polygon.tsx b/src/app/_components/icons/gradient/logos/polygon.tsx index 07e9c0f..2b0d685 100644 --- a/src/app/_components/icons/gradient/logos/polygon.tsx +++ b/src/app/_components/icons/gradient/logos/polygon.tsx @@ -25,9 +25,9 @@ export function PolygonIcon({ variant = "aqua", ...props }: LogoIconProps) { width="76" height="71" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/zksync.tsx b/src/app/_components/icons/gradient/logos/zksync.tsx index 0da0e1b..efc8c32 100644 --- a/src/app/_components/icons/gradient/logos/zksync.tsx +++ b/src/app/_components/icons/gradient/logos/zksync.tsx @@ -11,26 +11,26 @@ export function ZkSyncIcon({ variant = "aqua", ...props }: LogoIconProps) { fill="none" {...props} > - + @@ -43,9 +43,9 @@ export function ZkSyncIcon({ variant = "aqua", ...props }: LogoIconProps) { width="72" height="73" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/plus.tsx b/src/app/_components/icons/gradient/plus.tsx index af0ea13..9da1d4f 100644 --- a/src/app/_components/icons/gradient/plus.tsx +++ b/src/app/_components/icons/gradient/plus.tsx @@ -2,24 +2,17 @@ import { SVGProps } from "react"; export function PlusIcon(props: SVGProps) { return ( - - + + @@ -32,9 +25,9 @@ export function PlusIcon(props: SVGProps) { width="65" height="64" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ) { y2="39.8076" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="40" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/shield-large.tsx b/src/app/_components/icons/gradient/shield-large.tsx index d5a56ca..024f2ab 100644 --- a/src/app/_components/icons/gradient/shield-large.tsx +++ b/src/app/_components/icons/gradient/shield-large.tsx @@ -10,14 +10,14 @@ export function ShieldLargeIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { width="76.8659" height="89.7819" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ) { y2="81.2573" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="81.2573" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/shield-small.tsx b/src/app/_components/icons/gradient/shield-small.tsx index da4bacd..c757dd0 100644 --- a/src/app/_components/icons/gradient/shield-small.tsx +++ b/src/app/_components/icons/gradient/shield-small.tsx @@ -16,11 +16,11 @@ export function ShieldIcon(props: SVGProps) { height="87.4286" rx="43.7143" stroke="url(#paint0_linear_564_7328)" - stroke-opacity="0.15" - stroke-width="8.57143" - stroke-linecap="round" - stroke-linejoin="round" - stroke-dasharray="44.57 44.57" + strokeOpacity="0.15" + strokeWidth="8.57143" + strokeLinecap="round" + strokeLinejoin="round" + strokeDasharray="44.57 44.57" /> ) { y2="96" gradientUnits="userSpaceOnUse" > - - + + ) { y2="73.7144" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx index 7671471..016a27a 100644 --- a/src/app/_components/icons/index.tsx +++ b/src/app/_components/icons/index.tsx @@ -1,4 +1,11 @@ export { AcrossIcon } from "./across"; +export { UmaIcon } from "./uma"; +export { MenuIcon } from "./menu"; +export { MinusIcon } from "./minus"; +export { DiscordIcon } from "./discord"; +export { MediumIcon } from "./medium"; +export { TwitterIcon } from "./twitter"; +export { ChevronDownIcon } from "./chevron-down"; // Gradient icons export { ArrowUpIcon } from "./gradient/arrow-up"; diff --git a/src/app/_components/icons/medium.tsx b/src/app/_components/icons/medium.tsx new file mode 100644 index 0000000..4e8ef75 --- /dev/null +++ b/src/app/_components/icons/medium.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from "react"; + +export function MediumIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/menu.tsx b/src/app/_components/icons/menu.tsx new file mode 100644 index 0000000..c1ffb8a --- /dev/null +++ b/src/app/_components/icons/menu.tsx @@ -0,0 +1,18 @@ +import { SVGProps } from "react"; + +export function MenuIcon(props: SVGProps) { + return ( + + + + + + ); +} diff --git a/src/app/_components/icons/minus.tsx b/src/app/_components/icons/minus.tsx new file mode 100644 index 0000000..d316b25 --- /dev/null +++ b/src/app/_components/icons/minus.tsx @@ -0,0 +1,16 @@ +import { SVGProps } from "react"; + +export function MinusIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/twitter.tsx b/src/app/_components/icons/twitter.tsx new file mode 100644 index 0000000..b073d48 --- /dev/null +++ b/src/app/_components/icons/twitter.tsx @@ -0,0 +1,26 @@ +import { SVGProps } from "react"; + +export function TwitterIcon(props: SVGProps) { + return ( + + + + + + + + + + + ); +} diff --git a/src/app/_components/icons/uma.tsx b/src/app/_components/icons/uma.tsx new file mode 100644 index 0000000..67828eb --- /dev/null +++ b/src/app/_components/icons/uma.tsx @@ -0,0 +1,51 @@ +import { SVGProps } from "react"; + +export function UmaIcon(props: SVGProps) { + return ( + + + + + + + + + + + + + + ); +} From d2d7b6d6c6da6fbe08d28d80045acc088cf45c92 Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Wed, 7 Feb 2024 16:32:07 +0100 Subject: [PATCH 2/6] feat: header nav component --- package.json | 1 + src/app/(routes)/layout.tsx | 8 +- src/app/_components/button.tsx | 18 +++ src/app/_components/header-nav.tsx | 32 ----- .../_components/header-nav/flyout-menu.tsx | 68 +++++++++ src/app/_components/header-nav/index.tsx | 133 ++++++++++++++++++ .../_components/header-nav/mobile-menu.tsx | 69 +++++++++ .../header-nav/products-sub-nav.tsx | 44 ++++++ src/app/_components/header-nav/types.ts | 11 ++ src/app/_components/icon-box.tsx | 16 +++ tailwind.config.ts | 23 ++- yarn.lock | 22 ++- 12 files changed, 405 insertions(+), 40 deletions(-) create mode 100644 src/app/_components/button.tsx delete mode 100644 src/app/_components/header-nav.tsx create mode 100644 src/app/_components/header-nav/flyout-menu.tsx create mode 100644 src/app/_components/header-nav/index.tsx create mode 100644 src/app/_components/header-nav/mobile-menu.tsx create mode 100644 src/app/_components/header-nav/products-sub-nav.tsx create mode 100644 src/app/_components/header-nav/types.ts create mode 100644 src/app/_components/icon-box.tsx diff --git a/package.json b/package.json index 7644d40..d99fda8 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}'" }, "dependencies": { + "@headlessui/react": "^1.7.18", "next": "14.1.0", "react": "^18", "react-dom": "^18", diff --git a/src/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx index 27b2db7..ccf3634 100644 --- a/src/app/(routes)/layout.tsx +++ b/src/app/(routes)/layout.tsx @@ -2,7 +2,7 @@ import type { Metadata } from "next"; import { twMerge } from "tailwind-merge"; import { Barlow } from "next/font/google"; -import HeaderNav from "@/app/_components/header-nav"; +import { HeaderNav } from "@/app/_components/header-nav"; import "./globals.css"; @@ -23,8 +23,10 @@ export default function RootLayout({ return ( - - {children} +
+ + {children} +
); diff --git a/src/app/_components/button.tsx b/src/app/_components/button.tsx new file mode 100644 index 0000000..6a4b513 --- /dev/null +++ b/src/app/_components/button.tsx @@ -0,0 +1,18 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; + +type ButtonProps = ComponentProps<"button">; + +export function Button({ className, children, ...props }: ButtonProps) { + return ( + + ); +} diff --git a/src/app/_components/header-nav.tsx b/src/app/_components/header-nav.tsx deleted file mode 100644 index 5039acd..0000000 --- a/src/app/_components/header-nav.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Link from "next/link"; - -import { AcrossIcon } from "./icons/across"; - -export default function HeaderNav() { - return ( -
- - - - -
- ); -} diff --git a/src/app/_components/header-nav/flyout-menu.tsx b/src/app/_components/header-nav/flyout-menu.tsx new file mode 100644 index 0000000..61f6794 --- /dev/null +++ b/src/app/_components/header-nav/flyout-menu.tsx @@ -0,0 +1,68 @@ +import { Fragment } from "react"; +import { Popover, Transition } from "@headlessui/react"; +import Link from "next/link"; +import { twMerge } from "tailwind-merge"; + +import { ChevronDownIcon } from "../icons"; +import { IconBox } from "../icon-box"; + +import { NavItem } from "./types"; + +type Props = { + buttonLabel: string; + menuItems: NavItem[]; + className?: string; +}; + +export function FlyoutMenu({ buttonLabel, menuItems, className }: Props) { + return ( + + + {buttonLabel} + + + + +
+
+ {menuItems.map((item) => ( + + + + + +
+
{item.label}
+
+ {item.description} +
+
+ + + ))} +
+
+ + + + ); +} diff --git a/src/app/_components/header-nav/index.tsx b/src/app/_components/header-nav/index.tsx new file mode 100644 index 0000000..46ee69a --- /dev/null +++ b/src/app/_components/header-nav/index.tsx @@ -0,0 +1,133 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { useState } from "react"; + +import { + AcrossIcon, + MenuIcon, + MinusIcon, + BridgeIcon, + PlusIcon, + CheckmarkSimpleIcon, + DiscordIcon, + TwitterIcon, + MediumIcon, +} from "../icons"; +import { Button } from "../button"; + +import { FlyoutMenu } from "./flyout-menu"; +import { MobileMenu } from "./mobile-menu"; +import { ProductsSubNav } from "./products-sub-nav"; + +const productsNavigationItems = [ + { + label: "Across Bridge", + description: "Bridge Without Compromise", + href: "/across-bridge", + Icon: BridgeIcon, + iconClassName: + "group-hover:drop-shadow-aqua data-[is-current=true]:drop-shadow-aqua h-4 w-4", + iconContainerClassName: "bg-aqua-100/[.05]", + containerClassName: "group-hover:bg-aqua-100/[.05]", + }, + { + label: "Across+", + description: "Cross-chain Bridge hooks to Fullfill User intents", + href: "/across-plus", + Icon: PlusIcon, + iconClassName: + "group-hover:drop-shadow-teal data-[is-current=true]:drop-shadow-teal h-5 w-5", + iconContainerClassName: "bg-teal-100/[.05]", + containerClassName: "group-hover:bg-teal-100/[.05]", + }, + { + label: "Across Settlement", + description: "Cross-chain Intents Settlement Layer", + href: "/across-settlement", + Icon: CheckmarkSimpleIcon, + iconClassName: + "group-hover:drop-shadow-purple data-[is-current=true]:drop-shadow-purple h-4 w-5", + iconContainerClassName: "bg-purple-100/[.05]", + containerClassName: "group-hover:bg-purple-100/[.05]", + }, +]; + +const communityNavigationItems = [ + { + label: "Discord", + description: "Access support and chat with community members", + href: "#", // TODO: Add discord link + Icon: DiscordIcon, + iconClassName: "h-4 w-5", + iconContainerClassName: "bg-light-100/[.05]", + containerClassName: "group-hover:bg-light-100/[.05]", + }, + { + label: "Twitter", + description: "Follow for the latest updates on Across", + href: "#", // TODO: Add twitter link + Icon: TwitterIcon, + iconClassName: "h-4 w-4", + iconContainerClassName: "bg-light-100/[.05]", + containerClassName: "group-hover:bg-light-100/[.05]", + }, + { + label: "Medium", + description: "Read deep dives on Across infra and campaigns", + href: "#", // TODO: Add medium link + Icon: MediumIcon, + iconClassName: "h-3 w-5", + iconContainerClassName: "bg-light-100/[.05]", + containerClassName: "group-hover:bg-light-100/[.05]", + }, +]; + +export function HeaderNav() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const pathname = usePathname(); + const isProductsPath = productsNavigationItems.some((item) => + pathname.startsWith(item.href), + ); + + return ( +
+ + {/* Only show sub-menu when in products-related path */} + {isProductsPath && } +
+ setIsMenuOpen(false)} + productsNavItems={productsNavigationItems} + communityNavItems={communityNavigationItems} + /> +
+
+ ); +} diff --git a/src/app/_components/header-nav/mobile-menu.tsx b/src/app/_components/header-nav/mobile-menu.tsx new file mode 100644 index 0000000..050bf35 --- /dev/null +++ b/src/app/_components/header-nav/mobile-menu.tsx @@ -0,0 +1,69 @@ +import Link from "next/link"; +import { Fragment } from "react"; +import { twMerge } from "tailwind-merge"; +import { Transition } from "@headlessui/react"; + +import { UmaIcon } from "../icons"; +import { Button } from "../button"; +import { IconBox } from "../icon-box"; + +import { NavItem } from "./types"; + +export function MobileMenu(props: { + productsNavItems: NavItem[]; + communityNavItems: NavItem[]; + isMenuOpen: boolean; + onClickItem: () => void; +}) { + return ( + +
+ + {props.productsNavItems.map((item) => ( + + + + + +
+
{item.label}
+
+ {item.description} +
+
+ + + ))} +
+
+ {props.communityNavItems.map((item) => ( + + + + ))} +
+
+
Powered by
+ +
+
+ + ); +} diff --git a/src/app/_components/header-nav/products-sub-nav.tsx b/src/app/_components/header-nav/products-sub-nav.tsx new file mode 100644 index 0000000..f9a1a12 --- /dev/null +++ b/src/app/_components/header-nav/products-sub-nav.tsx @@ -0,0 +1,44 @@ +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { twMerge } from "tailwind-merge"; + +import { IconBox } from "../icon-box"; + +import { NavItem } from "./types"; + +export function ProductsSubNav(props: { navItems: NavItem[] }) { + const pathname = usePathname(); + const isCurrentPath = (href: string) => pathname.startsWith(href); + + return ( +
+ {props.navItems.map((item) => ( + + + + + +
+ {item.label} +
+ + + ))} +
+ ); +} diff --git a/src/app/_components/header-nav/types.ts b/src/app/_components/header-nav/types.ts new file mode 100644 index 0000000..92f92d2 --- /dev/null +++ b/src/app/_components/header-nav/types.ts @@ -0,0 +1,11 @@ +import { SVGProps } from "react"; + +export type NavItem = { + label: string; + description: string; + href: string; + Icon: (props: SVGProps) => React.ReactNode; + iconClassName: string; + iconContainerClassName: string; + containerClassName: string; +}; diff --git a/src/app/_components/icon-box.tsx b/src/app/_components/icon-box.tsx new file mode 100644 index 0000000..34527b2 --- /dev/null +++ b/src/app/_components/icon-box.tsx @@ -0,0 +1,16 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; + +type Props = ComponentProps<"div">; + +export function IconBox({ className, ...props }: Props) { + return ( +
+ ); +} diff --git a/tailwind.config.ts b/tailwind.config.ts index bddb2f4..a67e4c8 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -14,8 +14,10 @@ const config: Config = { 300: "#C5D5E0", }, grey: { + light: "#313237", dark: "#2D2E33", 400: "#9DAAB3", + 600: "#3E4047", }, aqua: { 100: "#6CF9D8", @@ -47,12 +49,25 @@ const config: Config = { "tight-4": "-0.12rem", // -1.92px "tight-5": "-0.04rem", // -0.64px "tight-6": "-0.03rem", // -0.48px + "wide-4": "0.12rem", // 1.92px }, extend: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + dropShadow: { + aqua: [ + "0px 0px 13.811px #6CF9D8", + "0px 0px 9.865px #00A27C", + "0px 0px 2.631px rgba(0, 0, 0, 0.25)", + ], + teal: [ + "0px 0px 13.811px #7FE9E1", + "0px 0px 9.865px #7FBCE9", + "0px 0px 2.631px rgba(0, 0, 0, 0.25)", + ], + purple: [ + "0px 0px 13.811px #E66DFA", + "0px 0px 9.865px #974AE4", + "0px 0px 2.631px rgba(0, 0, 0, 0.25)", + ], }, }, }, diff --git a/yarn.lock b/yarn.lock index 1e26e44..327a6c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -51,6 +51,14 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b" integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A== +"@headlessui/react@^1.7.18": + version "1.7.18" + resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7" + integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ== + dependencies: + "@tanstack/react-virtual" "^3.0.0-beta.60" + client-only "^0.0.1" + "@humanwhocodes/config-array@^0.11.13": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" @@ -209,6 +217,18 @@ dependencies: tslib "^2.4.0" +"@tanstack/react-virtual@^3.0.0-beta.60": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.4.tgz#32a90aa6faa2eeebb5f4ca561d26bae9f3435e45" + integrity sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA== + dependencies: + "@tanstack/virtual-core" "3.0.0" + +"@tanstack/virtual-core@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz#637bee36f0cabf96a1d436887c90f138a7e9378b" + integrity sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -586,7 +606,7 @@ chokidar@^3.5.3: optionalDependencies: fsevents "~2.3.2" -client-only@0.0.1: +client-only@0.0.1, client-only@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== From fbdafdd688387b0b21a1cb1fc4a5234ff607daa8 Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Wed, 7 Feb 2024 18:35:55 +0100 Subject: [PATCH 3/6] fix: mobile tweaks --- src/app/_components/header-nav/index.tsx | 45 +++++++--- .../_components/header-nav/mobile-menu.tsx | 23 +++-- .../header-nav/products-sub-nav.tsx | 84 +++++++++++++------ tailwind.config.ts | 15 ++++ 4 files changed, 125 insertions(+), 42 deletions(-) diff --git a/src/app/_components/header-nav/index.tsx b/src/app/_components/header-nav/index.tsx index 46ee69a..fe7d418 100644 --- a/src/app/_components/header-nav/index.tsx +++ b/src/app/_components/header-nav/index.tsx @@ -3,6 +3,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { useState } from "react"; +import { twMerge } from "tailwind-merge"; import { AcrossIcon, @@ -27,8 +28,7 @@ const productsNavigationItems = [ description: "Bridge Without Compromise", href: "/across-bridge", Icon: BridgeIcon, - iconClassName: - "group-hover:drop-shadow-aqua data-[is-current=true]:drop-shadow-aqua h-4 w-4", + iconClassName: "group-hover:drop-shadow-aqua h-4 w-4", iconContainerClassName: "bg-aqua-100/[.05]", containerClassName: "group-hover:bg-aqua-100/[.05]", }, @@ -37,8 +37,7 @@ const productsNavigationItems = [ description: "Cross-chain Bridge hooks to Fullfill User intents", href: "/across-plus", Icon: PlusIcon, - iconClassName: - "group-hover:drop-shadow-teal data-[is-current=true]:drop-shadow-teal h-5 w-5", + iconClassName: "group-hover:drop-shadow-teal h-5 w-5", iconContainerClassName: "bg-teal-100/[.05]", containerClassName: "group-hover:bg-teal-100/[.05]", }, @@ -47,8 +46,7 @@ const productsNavigationItems = [ description: "Cross-chain Intents Settlement Layer", href: "/across-settlement", Icon: CheckmarkSimpleIcon, - iconClassName: - "group-hover:drop-shadow-purple data-[is-current=true]:drop-shadow-purple h-4 w-5", + iconClassName: "group-hover:drop-shadow-purple h-4 w-5", iconContainerClassName: "bg-purple-100/[.05]", containerClassName: "group-hover:bg-purple-100/[.05]", }, @@ -58,7 +56,7 @@ const communityNavigationItems = [ { label: "Discord", description: "Access support and chat with community members", - href: "#", // TODO: Add discord link + href: "https://discord.com/invite/sKSkhTtu8s", Icon: DiscordIcon, iconClassName: "h-4 w-5", iconContainerClassName: "bg-light-100/[.05]", @@ -67,7 +65,7 @@ const communityNavigationItems = [ { label: "Twitter", description: "Follow for the latest updates on Across", - href: "#", // TODO: Add twitter link + href: "https://twitter.com/AcrossProtocol", Icon: TwitterIcon, iconClassName: "h-4 w-4", iconContainerClassName: "bg-light-100/[.05]", @@ -76,7 +74,7 @@ const communityNavigationItems = [ { label: "Medium", description: "Read deep dives on Across infra and campaigns", - href: "#", // TODO: Add medium link + href: "https://medium.com/across-protocol", Icon: MediumIcon, iconClassName: "h-3 w-5", iconContainerClassName: "bg-light-100/[.05]", @@ -98,7 +96,16 @@ export function HeaderNav() {
- +
Home @@ -107,7 +114,18 @@ export function HeaderNav() {
- + {/* Only show menu button on mobile */} + {props.productsNavItems.map((item) => (
{props.communityNavItems.map((item) => ( - - - + + + + + ))}
diff --git a/src/app/_components/header-nav/products-sub-nav.tsx b/src/app/_components/header-nav/products-sub-nav.tsx index f9a1a12..36ceb1e 100644 --- a/src/app/_components/header-nav/products-sub-nav.tsx +++ b/src/app/_components/header-nav/products-sub-nav.tsx @@ -6,39 +6,73 @@ import { IconBox } from "../icon-box"; import { NavItem } from "./types"; +const classNameOverrides: Record< + string, + { + iconClassName: string; + currentPathIconClassName: string; + } +> & {} = { + "/across-bridge": { + iconClassName: "h-2 w-2 sm:h-4 sm:w-4", + currentPathIconClassName: "drop-shadow-aqua-sm sm:drop-shadow-aqua", + }, + "/across-plus": { + iconClassName: "h-3 w-3 sm:h-4 sm:w-4", + currentPathIconClassName: "drop-shadow-teal-sm sm:drop-shadow-teal", + }, + "/across-settlement": { + iconClassName: "h-2 w-3 sm:h-4 sm:w-4", + currentPathIconClassName: "drop-shadow-purple-sm sm:drop-shadow-purple", + }, +}; + export function ProductsSubNav(props: { navItems: NavItem[] }) { const pathname = usePathname(); const isCurrentPath = (href: string) => pathname.startsWith(href); return ( -
- {props.navItems.map((item) => ( - - - - - -
+
+ {props.navItems.map((item) => ( + + - {item.label} -
- - - ))} + + + +
+ {item.label} +
+ + + ))} +
); } diff --git a/tailwind.config.ts b/tailwind.config.ts index a67e4c8..1debaef 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -53,16 +53,31 @@ const config: Config = { }, extend: { dropShadow: { + "aqua-sm": [ + "0px 0px 8.286px #6CF9D8", + "0px 0px 5.919px #00A27C", + "0px 0px 1.578px rgba(0, 0, 0, 0.25)", + ], aqua: [ "0px 0px 13.811px #6CF9D8", "0px 0px 9.865px #00A27C", "0px 0px 2.631px rgba(0, 0, 0, 0.25)", ], + "teal-sm": [ + "0px 0px 8.286px #7FE9E1", + "0px 0px 5.919px #7FBCE9", + "0px 0px 1.578px rgba(0, 0, 0, 0.25)", + ], teal: [ "0px 0px 13.811px #7FE9E1", "0px 0px 9.865px #7FBCE9", "0px 0px 2.631px rgba(0, 0, 0, 0.25)", ], + "purple-sm": [ + "0px 0px 8.286px #E66DFA", + "0px 0px 5.919px #974AE4", + "0px 0px 1.578px rgba(0, 0, 0, 0.25)", + ], purple: [ "0px 0px 13.811px #E66DFA", "0px 0px 9.865px #974AE4", From ece7a94a5aa7c48548eb4b2b8b689dac1232d91b Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Wed, 7 Feb 2024 18:50:37 +0100 Subject: [PATCH 4/6] fix: formatting --- src/app/_components/button.tsx | 2 +- src/app/_components/header-nav/flyout-menu.tsx | 6 +++--- src/app/_components/header-nav/index.tsx | 2 +- src/app/_components/header-nav/mobile-menu.tsx | 8 ++++---- src/app/_components/header-nav/products-sub-nav.tsx | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/app/_components/button.tsx b/src/app/_components/button.tsx index 6a4b513..aedc0bd 100644 --- a/src/app/_components/button.tsx +++ b/src/app/_components/button.tsx @@ -7,7 +7,7 @@ export function Button({ className, children, ...props }: ButtonProps) { return ( {/* Only show menu button on mobile */}