i18n: extract string for translation

use t.rich with embedded component to use as reusable string with variable number attachment; requires .tsx extension on utils.tsx

Author: wackerow

app/[locale]/developers/_components/VideoCourseCard.tsx

@@ -35,8 +35,7 @@ const VideoCourseCard = ({ course, className }: VideoCourseCardProps) => (
         size="small"
         className="mb-2 mt-4 rounded-[4px] px-1 py-0 font-bold normal-case"
       >
-        {/* // TODO: Extract intl */}
-        {Math.round(course.hours)}-hour course
+        {course.hours}
       </Tag>
       <h3 className="text-lg font-bold text-body group-hover:underline">
         {course.title}

app/[locale]/developers/types.ts

@@ -15,5 +15,5 @@ export type DevelopersPath = CardInfo & {
 }
 
 export type VideoCourse = CardInfo & {
-  hours: number
+  hours: ReactNode
 }

app/[locale]/developers/utils.ts renamed to app/[locale]/developers/utils.tsx

@@ -62,43 +62,48 @@ export const getVideoCourses = async (): Promise<VideoCourse[]> => {
     namespace: "page-developers-index",
   })
 
+  const getDuration = (hours: number) =>
+    t.rich("page-developers-course-duration", {
+      span: () => <span>{hours}</span>,
+    })
+
   return [
     {
       title: t("page-developers-course-blockchain-basics-title"),
       description: t("page-developers-course-blockchain-basics-desc"),
-      hours: 3,
+      hours: getDuration(3),
       imgSrc: cyfrinBasicBanner,
       imgAlt: t("page-developers-course-blockchain-basics-alt"),
       href: "https://updraft.cyfrin.io/courses/blockchain-basics",
     },
     {
       title: t("page-developers-course-solidity-title"),
       description: t("page-developers-course-solidity-desc"),
-      hours: 5,
+      hours: getDuration(5),
       imgSrc: cyfrinSolidityBanner,
       imgAlt: t("page-developers-course-solidity-alt"),
       href: "https://updraft.cyfrin.io/courses/solidity",
     },
     {
       title: t("page-developers-course-foundry-fundamentals-title"),
       description: t("page-developers-course-foundry-fundamentals-desc"),
-      hours: 10,
+      hours: getDuration(10),
       imgSrc: cyfrinFoundryFundamentalsBanner,
       imgAlt: t("page-developers-course-foundry-fundamentals-alt"),
       href: "https://updraft.cyfrin.io/courses/foundry",
     },
     {
       title: t("page-developers-course-advanced-foundry-title"),
       description: t("page-developers-course-advanced-foundry-desc"),
-      hours: 13,
+      hours: getDuration(13),
       imgSrc: cyfrinFoundryAdvancedBanner,
       imgAlt: t("page-developers-course-advanced-foundry-alt"),
       href: "https://updraft.cyfrin.io/courses/advanced-foundry",
     },
     {
       title: t("page-developers-course-security-title"),
       description: t("page-developers-course-security-desc"),
-      hours: 24,
+      hours: getDuration(24),
       imgSrc: cyfrinSecurityBanner,
       imgAlt: t("page-developers-course-security-alt"),
       href: "https://updraft.cyfrin.io/courses/security",

src/intl/en/page-developers-index.json

@@ -109,6 +109,7 @@
   "page-developers-speedrun-token-title": "Create a token",
   "page-developers-speedrun-token-desc": "Build a digital currency and a smart contract that trades it.",
   "page-developers-speedrun-challenge-2": "Challenge #2",
+  "page-developers-course-duration": "<span></span>-hour course",
   "page-developers-course-blockchain-basics-title": "Blockchain basics",
   "page-developers-course-blockchain-basics-desc": "Learn how blockchains and smart contracts work, create a wallet, and sign your first transaction.",
   "page-developers-course-blockchain-basics-alt": "Cyfrin Updraft Blockchain basics course banner",