fix: add missing partner logos (#37)

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: <Image src={xyLogoSrc} alt="xy logo" />,
+  },
+  {
+    logo: <Image src={tahoLogoSrc} alt="taho logo" />,
+  },
+  {
+    logo: <Image src={swingLogoSrc} alt="swing logo" />,
+  },
+  {
+    logo: <Image src={metamaskLogoSrc} alt="metamask logo" />,
+  },
   {
     logo: <Image src={balancerLogoSrc} alt="balancer logo" />,
   },
@@ -55,5 +71,7 @@ const partners = [
 ];
 
 export function PartnersTicker() {
-  return <Ticker title={"trusted by top tier applications"} items={partners} />;
+  return (
+    <Ticker title={"trusted by top tier applications"} items={partners} variant="30" />
+  );
 }

src/app/_components/ticker.tsx

@@ -1,25 +1,44 @@
+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 (
     <div className="group relative overflow-hidden">
       <div className="mb-8 text-center text-xs uppercase lining-nums tabular-nums tracking-wide-4 text-grey-400">
         {props.title}
       </div>
       <div className="inline-flex w-full flex-nowrap">
-        <div className="flex animate-infinite-scroll items-center justify-center md:justify-start">
+        <div
+          className={twMerge(
+            "flex items-center justify-center md:justify-start",
+            scrollAnimationClass,
+          )}
+        >
           {props.items.map((item, index) => (
             <div key={index} className="w-52">
               {item.logo}
             </div>
           ))}
         </div>
         {/* Duplicate for infinite scroll */}
-        <div className="flex animate-infinite-scroll items-center justify-center md:justify-start">
+        <div
+          className={twMerge(
+            "flex items-center justify-center md:justify-start",
+            scrollAnimationClass,
+          )}
+        >
           {props.items.map((item, index) => (
             <div key={index + props.items.length} className="w-52">
               {item.logo}
@@ -28,7 +47,12 @@ export function Ticker(props: {
         </div>
         {/* Multiply again if not enough items for large screen */}
         {notEnoughItems && (
-          <div className="flex animate-infinite-scroll items-center justify-center md:justify-start">
+          <div
+            className={twMerge(
+              "flex items-center justify-center md:justify-start",
+              scrollAnimationClass,
+            )}
+          >
             {props.items.map((item, index) => (
               <div key={index + 2 * props.items.length} className="w-52">
                 {item.logo}

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": [

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": {