rc 1.0

app/components/PastDrops.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import Image from 'next/image'
+import { useI18n } from '@/lib/i18n'
 
 interface PastDrop {
   id: number
@@ -22,6 +23,7 @@ interface PastDropsProps {
 }
 
 export default function PastDrops({ limit, showMoreLink = false }: PastDropsProps = {}) {
+  const { t } = useI18n()
   const [drops, setDrops] = useState<PastDrop[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -55,18 +57,20 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
 
   const formatSoldOutTime = (hours: number) => {
     if (hours < 1) {
-      return 'Sold out in less than 1h'
+      return `${t('pastDrops.soldOutIn')} ${t('pastDrops.lessThan1h')}`
     } else if (hours === 1) {
-      return 'Sold out in 1h'
+      return `${t('pastDrops.soldOutIn')} ${t('pastDrops.1h')}`
     } else if (hours < 24) {
-      return `Sold out in ${hours}h`
+      return `${t('pastDrops.soldOutIn')} ${t('pastDrops.hours', { hours })}`
     } else {
       const days = Math.floor(hours / 24)
       const remainingHours = hours % 24
       if (remainingHours === 0) {
-        return days === 1 ? 'Sold out in 1 day' : `Sold out in ${days} days`
+        return days === 1 
+          ? `${t('pastDrops.soldOutIn')} ${t('pastDrops.1day')}` 
+          : `${t('pastDrops.soldOutIn')} ${t('pastDrops.days', { days })}`
       } else {
-        return `Sold out in ${days}d ${remainingHours}h`
+        return `${t('pastDrops.soldOutIn')} ${t('pastDrops.daysHours', { days, hours: remainingHours })}`
       }
     }
   }
@@ -88,7 +92,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
   if (loading) {
     return (
       <div className="past">
-        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>Loading past drops...</p>
+        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>{t('pastDrops.loading')}</p>
       </div>
     )
   }
@@ -97,7 +101,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
     return (
       <div className="past">
         <p style={{ color: 'var(--muted)', textAlign: 'center' }}>
-          No past drops yet. Check back soon!
+          {t('pastDrops.noDrops')}
         </p>
       </div>
     )
@@ -149,7 +153,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
                     color: 'var(--muted)',
                   }}
                 >
-                  No Image
+                  {t('common.noImage')}
                 </div>
               )}
               <strong>{drop.item}</strong>
@@ -174,7 +178,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
               fontWeight: 500,
             }}
           >
-            More →
+            {t('pastDrops.more')}
           </a>
         </div>
       )}