refactor: AdoptionSwiper to accept data as props

add AdoptionCard type

Author: wackerow

app/[locale]/10years/_components/AdoptionSwiper.tsx

@@ -11,9 +11,16 @@ import {
 
 import { cn } from "@/lib/utils/cn"
 
-import { adoptionCards, adoptionStyles } from "./data"
+import { AdoptionCard } from "./types"
 
-const AdoptionSwiper = () => {
+type AdoptionCardProps = {
+  adoptionCards: AdoptionCard[]
+  adoptionStyles: string[]
+}
+const AdoptionSwiper = ({
+  adoptionCards,
+  adoptionStyles,
+}: AdoptionCardProps) => {
   return (
     <div className="flex flex-1 flex-col gap-6 md:hidden">
       <SwiperContainer className="mx-auto w-full max-w-[550px]">

app/[locale]/10years/_components/data.tsx

@@ -1,5 +1,7 @@
 import Link from "@/components/ui/Link"
 
+import { AdoptionCard } from "./types"
+
 import Adoption1Image from "@/public/images/10-year-anniversary/adoption-1.png"
 import Adoption2Image from "@/public/images/10-year-anniversary/adoption-2.png"
 import Adoption3Image from "@/public/images/10-year-anniversary/adoption-3.png"
@@ -13,7 +15,7 @@ import StableCoinImage from "@/public/images/10-year-anniversary/the-pioneer-sta
 import Adoption4Image from "@/public/images/10-year-anniversary/walking-talking-1.png"
 import Adoption6Image from "@/public/images/10-year-anniversary/walking-talking-2.png"
 
-const adoptionCards = [
+const adoptionCards: AdoptionCard[] = [
   {
     image: Adoption1Image,
     title: "Decade of Decentralization",

app/[locale]/10years/_components/types.ts

@@ -1,3 +1,5 @@
+import { StaticImageData } from "next/image"
+
 export type Story = {
   storyEnglish: string
   storyOriginal: string
@@ -8,3 +10,11 @@ export type Story = {
   twitter: string
   region: string
 }
+
+export type AdoptionCard = {
+  image: StaticImageData
+  title: string
+  description: React.ReactNode
+  href: string
+  linkText: string
+}

app/[locale]/10years/page.tsx

@@ -274,7 +274,10 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
               </p>
             </div>
           </div>
-          <AdoptionSwiper />
+          <AdoptionSwiper
+            adoptionCards={adoptionCards}
+            adoptionStyles={adoptionStyles}
+          />
           <div className="hidden flex-1 flex-col gap-6 md:flex">
             {adoptionCards.map((card, index) => (
               <div