Fix: case study does not appear on home and service page

app/[lang]/(hyperjump)/case-studies/[slug]/components/content.tsx

@@ -8,31 +8,32 @@ import {
   CaseStudiesVolunteeringPlatform
 } from "@/locales/.generated/locales-markdown";
 import type { SupportedLanguage } from "@/locales/.generated/types";
+import { CaseStudySlug } from "../../../data";
 
 type ContentProps = {
   lang: SupportedLanguage;
   slug: string;
 };
 
-const caseStudies = [
-  {
-    slug: "erp-fisheries",
-    content: CaseStudiesFisheries
-  },
-  {
-    slug: "ctoaas-media",
-    content: CaseStudiesMedia
-  },
-  {
-    slug: "saas-volunteering-platform",
-    content: CaseStudiesVolunteeringPlatform
-  }
-];
-
 export function Content({ lang, slug }: ContentProps) {
+  const caseStudies = [
+    {
+      slug: CaseStudySlug.Fisheries,
+      content: CaseStudiesFisheries
+    },
+    {
+      slug: CaseStudySlug.Media,
+      content: CaseStudiesMedia
+    },
+    {
+      slug: CaseStudySlug.VolunteeringPlatform,
+      content: CaseStudiesVolunteeringPlatform
+    }
+  ];
   const caseStudy = caseStudies.find((caseStudy) => caseStudy.slug === slug);
 
   if (!caseStudy) {
+    console.error(`Case study content for "${slug}" is not registered.`);
     notFound();
   }
 

app/[lang]/(hyperjump)/case-studies/[slug]/page.tsx

@@ -15,8 +15,12 @@ import {
 import type { SupportedLanguage } from "@/locales/.generated/types";
 import { supportedLanguages } from "@/locales/.generated/types";
 
-import type { CaseStudy } from "../../data";
-import { caseStudyBy, getCaseStudies } from "../data";
+import {
+  caseStudyBy,
+  getCaseStudies,
+  serviceBySlug,
+  type CaseStudy
+} from "../../data";
 import { Content } from "./components/content";
 
 type Params = { lang: SupportedLanguage; slug: string };
@@ -30,7 +34,7 @@ export async function generateMetadata({
 }: CaseStudyProps): Promise<Metadata> {
   const { lang, slug } = await params;
   const { url } = data;
-  const caseStudies = caseStudyBy(slug, lang);
+  const caseStudies = caseStudyBy({ lang, slug });
   const meta: Metadata = {
     title: `Case-Studies - ${caseStudies?.title ?? ""}`,
     description: caseStudies?.description ?? "",
@@ -60,7 +64,7 @@ export async function generateStaticParams(): Promise<Params[]> {
 
 export default async function CaseStudy({ params }: CaseStudyProps) {
   const { lang, slug } = await params;
-  const caseStudy = caseStudyBy(slug, lang);
+  const caseStudy = caseStudyBy({ lang, slug });
   if (!caseStudy) {
     notFound();
   }
@@ -140,13 +144,13 @@ function Recommendation({ caseStudies, lang }: RecommendationProps) {
           {caseStudyMore(lang)}
         </h2>
         <div className="grid gap-6 md:grid-cols-2">
-          {caseStudies.map(({ description, slug, title, category }) => (
+          {caseStudies.map(({ description, serviceSlug, slug, title }) => (
             <div
               key={slug}
               className="flex h-full flex-col justify-between rounded-xl border border-gray-200 p-6 text-left shadow-sm transition duration-300 hover:shadow-md">
               <div>
                 <span className="mb-4 inline-block rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-800">
-                  {category}
+                  {serviceBySlug({ lang, slug: serviceSlug })?.title}
                 </span>
                 <h3 className="text-hyperjump-black mb-2 text-lg font-semibold md:text-[22px]">
                   {title}

app/[lang]/(hyperjump)/case-studies/page.tsx

@@ -1,23 +1,21 @@
-import Link from "next/link";
 import type { Metadata } from "next";
 
 import { Hero } from "@/app/components/hero";
-import { Button } from "@/components/ui/button";
 import data from "@/data.json";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 import {
   supportedLanguages,
   type SupportedLanguage
 } from "@/locales/.generated/types";
 import {
-  caseStudyButton,
   caseStudyExplore,
   caseStudyHeroDesc,
   caseStudyHeroHeading,
   caseStudyTitle
 } from "@/locales/.generated/strings";
 
-import { getCaseStudies } from "./data";
+import { getCaseStudies } from "../data";
+import { CaseStudyCard } from "../components/case-study-card";
 
 export const generateStaticParams = async () => {
   return supportedLanguages.map((lang) => ({ lang }));
@@ -63,47 +61,20 @@ export default async function CaseStudiesPage({ params }: CaseStudyProps) {
         <h3 className="text-hyperjump-black w-72 text-[28px] font-medium md:w-full md:text-[40px]">
           {caseStudyExplore(lang)}
         </h3>
-        <CaseStudies lang={lang} />
+        <section className="bg-white pt-5 pb-10">
+          <div className="mx-auto max-w-5xl">
+            <div className="grid gap-6 md:grid-cols-3">
+              {getCaseStudies(lang).map((caseStudy) => (
+                <CaseStudyCard
+                  key={caseStudy.slug}
+                  caseStudy={caseStudy}
+                  lang={lang}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
       </div>
     </main>
   );
 }
-
-function CaseStudies({ lang }: { lang: SupportedLanguage }) {
-  return (
-    <section className="bg-white pt-5 pb-10">
-      <div className="mx-auto max-w-5xl">
-        <div className="grid gap-6 md:grid-cols-2">
-          {getCaseStudies(lang).map(
-            ({ category, description, slug, title }) => (
-              <div
-                key={slug}
-                className="flex h-full flex-col justify-between rounded-xl border border-gray-200 p-6 text-left shadow-sm transition duration-300 hover:shadow-md">
-                <div>
-                  <span className="mb-4 inline-block rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-800">
-                    {category}
-                  </span>
-                  <h3 className="text-hyperjump-black mb-2 text-lg font-semibold md:text-[22px]">
-                    {title}
-                  </h3>
-                  <p className="text-hyperjump-gray mb-4 text-sm md:text-base">
-                    {description}
-                  </p>
-                </div>
-
-                <Button
-                  asChild
-                  variant="outline"
-                  className="text-hyperjump-blue hover:bg-hyperjump-blue mt-4 w-full border-gray-300 hover:text-white">
-                  <Link href={`/${lang}/case-studies/${slug}`}>
-                    {caseStudyButton(lang)}
-                  </Link>
-                </Button>
-              </div>
-            )
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}

app/[lang]/(hyperjump)/components/case-study-card.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { caseStudyButton } from "@/locales/.generated/strings";
+import type { SupportedLanguage } from "@/locales/.generated/types";
+
+import type { CaseStudy } from "../data";
+import { serviceBySlug } from "../data";
+
+type CaseStudyCardProps = {
+  caseStudy: CaseStudy;
+  lang: SupportedLanguage;
+};
+
+export function CaseStudyCard({
+  caseStudy: { description, serviceSlug, slug, title, url },
+  lang
+}: CaseStudyCardProps) {
+  return (
+    <div
+      key={slug}
+      className="flex h-full flex-col justify-between rounded-xl border border-gray-200 bg-white p-6 text-left shadow-sm transition duration-300 hover:shadow-md">
+      <div>
+        <span className="mb-4 inline-block rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-800">
+          {serviceBySlug({ lang, slug: serviceSlug })?.title}
+        </span>
+        <h3 className="text-hyperjump-black mb-2 text-lg font-semibold md:text-[22px]">
+          {title}
+        </h3>
+        <p className="text-hyperjump-gray mb-4 text-sm md:text-base">
+          {description}
+        </p>
+      </div>
+
+      <Button
+        asChild
+        variant="outline"
+        className="text-hyperjump-blue hover:bg-hyperjump-blue mt-4 w-full border-gray-300 hover:text-white">
+        <Link href={url}>{caseStudyButton(lang)}</Link>
+      </Button>
+    </div>
+  );
+}