chore: move function to the parent component

bitcointranscripts · Nov 28, 2024 · 6fe7738 · 6fe7738
1 parent 51a322c
commit 6fe7738
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/src/components/landing-page/TranscriptCard.tsx b/src/components/landing-page/TranscriptCard.tsx
@@ -1,33 +1,27 @@
 import React from "react";
-import Link from "next/link";
 import { MicIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 import { Transcript } from "../../../.contentlayer/generated/types";
 import { createSlug } from "@/utils";
-import SourceCountData from "@/public/source-count-data.json";
 
 interface TranscriptCardProps {
   data: Transcript;
   daysOpened?: number;
   transcripts?: number;
+  source: string;
 }
 
-const TranscriptCard = ({ data, daysOpened, transcripts }: TranscriptCardProps) => {
+const TranscriptCard = ({ data, daysOpened, transcripts, source }: TranscriptCardProps) => {
   const remainingSpeakers = data?.speakers?.length && data?.speakers.length > 2 ? data?.speakers.length - 2 : 0;
 
-  const mappedKeyToName = SourceCountData.find((source) => source.slug === data.slugAsParams[0])?.name;
-
   return (
-    <Link
-      href={`${data.url}`}
+    <div
       className={`flex flex-col justify-between ${
         transcripts ? "min-w-[400px] max-md:min-w-[292px]" : "max-w-[580px] w-full"
       } p-6 gap-4 text-black border border-gray-custom-600 rounded-xl shadow-sm cursor-pointer max-2xl:p-[18px] max-md:p-4`}
     >
       <section className='flex flex-col'>
-        <p className='text-gray-custom-600 max-xl:text-[13px] max-md:text-sm leading-[100%] pb-[10px] md:pb-4 line-clamp-1'>
-          {mappedKeyToName ?? data.slugAsParams[0]}
-        </p>
-        <section className='flex justify-between items-center gap-4'>
+        <p className='text-gray-custom-600 max-xl:text-[13px] max-md:text-sm leading-[100%] pb-[10px] md:pb-4 line-clamp-1'>{source}</p>
+        <section className='flex justify-between items-start gap-4'>
           <p className='text-xl font-medium max-xl:text-lg max-md:text-base'>{data?.title}</p>
           {daysOpened ? <p className='text-sm text-nowrap whitespace-normal text-gray-custom-800'>{daysOpened} days ago</p> : null}
         </section>
@@ -64,7 +58,7 @@ const TranscriptCard = ({ data, daysOpened, transcripts }: TranscriptCardProps)
           ) : null}
         </section>
       )}
-    </Link>
+    </div>
   );
 };
 

diff --git a/src/components/landing-page/featured-transcripts/FeaturedTranscriptClient.tsx b/src/components/landing-page/featured-transcripts/FeaturedTranscriptClient.tsx
@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 import { Transcript } from "contentlayer/generated";
 import { DiceIcon } from "@bitcoin-dev-project/bdp-ui/icons";
+import SourceCountData from "@/public/source-count-data.json";
 import TranscriptCard from "../TranscriptCard";
 
 const FeaturedTranscriptClient = ({
@@ -18,6 +19,9 @@ const FeaturedTranscriptClient = ({
     setFeatured([...featuredTranscripts].sort(() => 0.5 - Math.random()));
   };
 
+  const getSourceFromTranscript = (data: Transcript) =>
+    SourceCountData.find((source) => source.slug === data.slugAsParams[0])?.name ?? (data.slugAsParams as Array<string>)[0];
+
   return (
     <div className='flex items-start flex-col gap-14 w-full z-10'>
       <section className='flex flex-col gap-6 w-full'>
@@ -32,7 +36,7 @@ const FeaturedTranscriptClient = ({
         </section>
         <div className='grid auto-rows-max gap-5 max-sm:grid-cols-1 max-lg:grid-cols-2 max-xl:grid-cols-2 grid-cols-3'>
           {featured.slice(0, 3).map((transcript, idx) => (
-            <TranscriptCard data={transcript} key={idx} />
+            <TranscriptCard data={transcript} key={idx} source={getSourceFromTranscript(transcript)} />
           ))}
         </div>
       </section>
@@ -41,7 +45,7 @@ const FeaturedTranscriptClient = ({
         <h3 className='text-2xl font-semibold max-md:text-xl'>Latest Transcripts</h3>
         <div className='grid auto-rows-max gap-5 max-sm:grid-cols-1 max-lg:grid-cols-2 max-xl:grid-cols-2 grid-cols-3'>
           {latestTranscripts.map((transcript, idx) => (
-            <TranscriptCard data={transcript} daysOpened={transcript.days_opened} key={idx} />
+            <TranscriptCard data={transcript} daysOpened={transcript.days_opened} key={idx} source={getSourceFromTranscript(transcript)} />
           ))}
         </div>
       </section>