add future bearer placeholders

Author: pettinarip

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

@@ -22,6 +22,7 @@ interface TorchHistoryCardProps {
   transactionHash: string
   className?: string
   isCurrentHolder?: boolean
+  isPlaceholder?: boolean
 }
 
 const TorchHistoryCard: React.FC<TorchHistoryCardProps> = ({
@@ -33,12 +34,14 @@ const TorchHistoryCard: React.FC<TorchHistoryCardProps> = ({
   transactionHash,
   className,
   isCurrentHolder,
+  isPlaceholder = false,
 }) => {
   return (
     <Card
       className={cn(
         "flex flex-col rounded-xl border border-gray-100/50 bg-gradient-to-b from-white to-gray-100 px-6 py-12 shadow-lg dark:text-body-inverse",
         isCurrentHolder && "bg-gradient-to-b from-[#B38DF0] to-[#DED4ED]",
+        isPlaceholder && "bg-gradient-to-b from-gray-100 to-gray-200",
         className
       )}
     >
@@ -67,12 +70,19 @@ const TorchHistoryCard: React.FC<TorchHistoryCardProps> = ({
       </CardHeader>
       <CardContent className="flex flex-col gap-1 p-0">
         <div>{role}</div>
-        <div className="text-xs text-body-medium">
-          From {formatDate(from)} to {formatDate(to)}
-        </div>
-        <BaseLink href={getEtherscanUrl(transactionHash)} className="text-xs">
-          View on Etherscan
-        </BaseLink>
+        {!isPlaceholder && (
+          <>
+            <div className="text-xs text-body-medium">
+              From {formatDate(from)} to {formatDate(to)}
+            </div>
+            <BaseLink
+              href={getEtherscanUrl(transactionHash)}
+              className="text-xs"
+            >
+              View on Etherscan
+            </BaseLink>
+          </>
+        )}
       </CardContent>
     </Card>
   )

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

@@ -27,14 +27,44 @@ const TorchHistorySwiper = ({
     (holder) => holder.address === currentHolderAddress
   )
 
+  // Create an array of 10 items, filling with placeholders for future holders
+  const totalCards = 10
+  const allCards = Array.from({ length: totalCards }, (_, index) => {
+    if (index < holders.length) {
+      // Use actual holder data
+      return {
+        ...holders[index],
+        isPlaceholder: false,
+      }
+    } else {
+      // Create placeholder for future holder
+      return {
+        address: `placeholder-${index}` as Address,
+        name: `Future Bearer ${index + 1}`,
+        role: "Coming soon...",
+        twitter: "",
+        event: {
+          from: "0x0000000000000000000000000000000000000000" as Address,
+          to: `placeholder-${index}` as Address,
+          blockNumber: BigInt(0),
+          transactionHash: "",
+          timestamp: 0,
+        },
+        isPlaceholder: true,
+      }
+    }
+  })
+
   return (
     <SwiperContainer className="w-full">
       <Swiper
         effect="coverflow"
         grabCursor
         centeredSlides
         slidesPerView="auto"
-        initialSlide={currentHolderIndex || holders.length - 1}
+        initialSlide={
+          currentHolderIndex >= 0 ? currentHolderIndex : holders.length - 1
+        }
         coverflowEffect={{
           rotate: 0,
           stretch: -50,
@@ -45,20 +75,27 @@ const TorchHistorySwiper = ({
         modules={[EffectCoverflow, Navigation]}
         className="w-full"
       >
-        {holders.map((holder, idx) => (
+        {allCards.map((card, idx) => (
           <SwiperSlide
             key={idx}
             className="flex !min-h-[400px] !w-60 justify-center"
           >
             <TorchHistoryCard
               className="!min-h-[400px]"
-              name={holder.name}
-              role={holder.role}
-              avatar={getBlockieImage(holder.address)}
-              from={holder.event.timestamp}
-              to={holder.event.timestamp}
-              transactionHash={holder.event.transactionHash}
-              isCurrentHolder={holder.address === currentHolderAddress}
+              name={card.name}
+              role={card.role}
+              avatar={
+                card.isPlaceholder
+                  ? "/images/10-year-anniversary/torch-cover.webp"
+                  : getBlockieImage(card.address)
+              }
+              from={card.event.timestamp}
+              to={card.event.timestamp}
+              transactionHash={card.event.transactionHash}
+              isCurrentHolder={
+                !card.isPlaceholder && card.address === currentHolderAddress
+              }
+              isPlaceholder={card.isPlaceholder}
             />
           </SwiperSlide>
         ))}