diff --git a/src/app/_assets/logos/metamask.svg b/src/app/_assets/logos/metamask.svg new file mode 100644 index 0000000..f0ba7d6 --- /dev/null +++ b/src/app/_assets/logos/metamask.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/_components/partners-ticker.tsx b/src/app/_components/partners-ticker.tsx index 34ec5ce..3a9b905 100644 --- a/src/app/_components/partners-ticker.tsx +++ b/src/app/_components/partners-ticker.tsx @@ -14,8 +14,24 @@ import rainbowLogoSrc from "@/app/_assets/logos/rainbow.svg"; import rangoLogoSrc from "@/app/_assets/logos/rango.svg"; import snxLogoSrc from "@/app/_assets/logos/snx.svg"; import socketLogoSrc from "@/app/_assets/logos/socket.svg"; +import xyLogoSrc from "@/app/_assets/logos/xy.svg"; +import tahoLogoSrc from "@/app/_assets/logos/taho.svg"; +import swingLogoSrc from "@/app/_assets/logos/swing.svg"; +import metamaskLogoSrc from "@/app/_assets/logos/metamask.svg"; const partners = [ + { + logo: xy logo, + }, + { + logo: taho logo, + }, + { + logo: swing logo, + }, + { + logo: metamask logo, + }, { logo: balancer logo, }, @@ -55,5 +71,7 @@ const partners = [ ]; export function PartnersTicker() { - return ; + return ( + + ); } diff --git a/src/app/_components/ticker.tsx b/src/app/_components/ticker.tsx index 2db72bf..7f3f547 100644 --- a/src/app/_components/ticker.tsx +++ b/src/app/_components/ticker.tsx @@ -1,17 +1,31 @@ +import { twMerge } from "@/app/_lib/tw-merge"; + +const variants = { + "20": "animate-infinite-scroll-20", + "30": "animate-infinite-scroll-30", +}; + export function Ticker(props: { title: string; items: { logo: React.ReactNode; }[]; + variant?: keyof typeof variants; }) { const notEnoughItems = props.items.length < 10; + const scrollAnimationClass = variants[props.variant || "20"]; return (
{props.title}
-
+
{props.items.map((item, index) => (
{item.logo} @@ -19,7 +33,12 @@ export function Ticker(props: { ))}
{/* Duplicate for infinite scroll */} -
+
{props.items.map((item, index) => (
{item.logo} @@ -28,7 +47,12 @@ export function Ticker(props: {
{/* Multiply again if not enough items for large screen */} {notEnoughItems && ( -
+
{props.items.map((item, index) => (
{item.logo} diff --git a/src/app/_lib/tw-merge.ts b/src/app/_lib/tw-merge.ts index da5bde1..5963017 100644 --- a/src/app/_lib/tw-merge.ts +++ b/src/app/_lib/tw-merge.ts @@ -39,7 +39,7 @@ export const twMerge = extendTailwindMerge({ "max-w": ["max-w-100"], animate: [ { - animate: ["infinite-scroll"], + animate: ["infinite-scroll-20", "infinite-scroll-30"], }, ], "drop-shadow": [ diff --git a/tailwind.config.ts b/tailwind.config.ts index 62ded6f..cc2a4bc 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -74,7 +74,8 @@ const config: Config = { "100": "400px", }, animation: { - "infinite-scroll": "infinite-scroll 25s linear infinite", + "infinite-scroll-20": "infinite-scroll 20s linear infinite", + "infinite-scroll-30": "infinite-scroll 30s linear infinite", }, keyframes: { "infinite-scroll": {