feat: individual transcript page functionality

bitcointranscripts · Nov 3, 2024 · 9290f83 · 9290f83
1 parent 7647999
commit 9290f83
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 7 deletions.
diff --git a/src/components/explore/ContentGrouping.tsx b/src/components/explore/ContentGrouping.tsx
@@ -1,18 +1,21 @@
-"use client" 
+"use client";
 
 import { createSlug, GroupedData } from "@/utils";
 import Link from "next/link";
 import { useEffect, useRef } from "react";
+import { twMerge } from "tailwind-merge";
 
 export interface IContentGrouping {
   currentGroup: string;
   groupedData: GroupedData | never[];
   screen?: "mobile" | "desktop";
+  className?: string;
 }
 const ContentGrouping = ({
   currentGroup,
   groupedData,
   screen,
+  className,
 }: IContentGrouping) => {
   const selectRef = useRef<HTMLSelectElement>(null);
   const linkRef = useRef<HTMLAnchorElement>(null);
@@ -36,9 +39,10 @@ const ContentGrouping = ({
     <>
       {screen === "desktop" && (
         <div
-          className={
-            " flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))] overflow-scroll no-scrollbar border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] "
-          }
+          className={twMerge(
+            " flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))] overflow-auto no-scrollbar border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
+            className
+          )}
         >
           {Object.keys(groupedData).map((char) => (
             <Link
@@ -61,9 +65,7 @@ const ContentGrouping = ({
             {" "}
             link group
           </a>
-          <div
-            className="selection-box pr-2 bg-orange-custom-800 py-2.5 px-4 rounded-md "
-          >
+          <div className="selection-box pr-2 bg-orange-custom-800 py-2.5 px-4 rounded-md ">
             <select
               onChange={onOptionsChange}
               value={currentGroup}

diff --git a/src/components/individual-transcript/IndividualTranscript.tsx b/src/components/individual-transcript/IndividualTranscript.tsx
@@ -0,0 +1,69 @@
+"use client";
+import React, { useState } from "react";
+import { Transcript } from "contentlayer/generated";
+import BreadCrumbs from "../common/BreadCrumbs";
+import TranscriptMetadataComponent from "../common/TranscriptMetadataCard";
+import ContentSwitch from "../common/ContentSwitch";
+import AlphabetGrouping from "../explore/AlphabetGrouping";
+import ContentGrouping from "../explore/ContentGrouping";
+import { createSlug, extractListOfHeadings } from "@/utils";
+import Wrapper from "../layout/Wrapper";
+
+const IndividualTranscript = ({ transcript }: { transcript: Transcript }) => {
+  const [currentHeading, setCurrentHeading] = useState("");
+  const allHeadings = extractListOfHeadings(transcript.body.raw).map(
+    (heading) => ({
+      name: heading.replace(/[#]+\s+/gi, ""),
+      slug: createSlug(heading.replace(/[#]+\s+/gi, "")),
+      count: 0,
+    })
+  );
+  const groupedHeading = allHeadings.reduce(
+    (heading, headingNow) => ({ ...heading, [headingNow.name]: headingNow }),
+    {}
+  );
+
+  return (
+    <Wrapper className="relative py-10 flex flex-col gap-6 lg:gap-7 2xl:gap-10 mx-auto w-full">
+      <BreadCrumbs />
+      <div className="flex gap-4 w-full justify-between ">
+        <div className=" w-full relative">
+          <div className=" w-full">
+            <TranscriptMetadataComponent
+              title={transcript.title}
+              date={transcript.date || ""}
+              topics={transcript.tags || []}
+              speakers={transcript.speakers || []}
+              transcriptBy={transcript.transcript_by || ""}
+            />
+          </div>
+
+          <div>
+            <div className="pt-4 md:pt-5 2xl:pt-6  ">
+              <ContentSwitch
+                markdown={transcript.body.raw}
+                summary={transcript?.summary}
+                extraInfo={transcript?.additional_resources}
+                currentHeading={currentHeading}
+                groupedHeading={groupedHeading}
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+        <div className="hidden lg:block  w-full sticky top-[110px]">
+            <ContentGrouping
+              currentGroup={currentHeading}
+              groupedData={groupedHeading}
+              className="!w-full rounded-xl max-h-[calc(90vh-var(--header-height))]"
+              screen="desktop"
+            />
+          </div>
+        </div>
+
+      </div>
+    </Wrapper>
+  );
+};
+
+export default IndividualTranscript;
diff --git a/src/components/individual-transcript/TranscriptTabContent.tsx b/src/components/individual-transcript/TranscriptTabContent.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import "./markdown.css";
+
+
+function formatSpeakerText(text: string): string {
+  // Regular expression pattern for "Speaker: HH:MM:SS"
+  const pattern = /(\b\w+(?: \w+)*): (\d{2}:\d{2}:\d{2})/g;
+
+  return text.replace(pattern, (match, speaker, time) => {
+    const formattedSpeaker = `<span className="font-mono font-bold text-black text-base leading-[1.36rem]">${speaker}:</span>`;
+    const formattedTime = `<span className="text-gray-custom-1700 font-mono text-base leading-[1.36rem]">${time}</span>`;
+
+    return `<p className="inline-block mt-2" > ${formattedSpeaker} ${formattedTime} </p>`;
+  });
+}
+
+const TranscriptTabContent = ({ markdown }: { markdown: string }) => {
+  const formattedMarkdown = formatSpeakerText(markdown);
+  return (
+    <MarkdownPreview
+      source={formattedMarkdown}
+      className={`!bg-transparent`}
+    />
+  );
+};
+
+export default TranscriptTabContent;
diff --git a/src/components/individual-transcript/markdown.css b/src/components/individual-transcript/markdown.css
@@ -0,0 +1,71 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
+
+
+.wmde-markdown {
+    background-color: transparent;
+}
+
+.wmde-markdown h2 {
+    padding-left: 21px;
+    border-left: 8px solid #F7931A;
+    color: #000;
+    border-bottom: none !important;
+    padding-top: 6px;
+    font-family: "Manrope", sans-serif;
+    padding-bottom: 6px;
+    margin: 8px 0px !important;
+    font-size: 1.125rem;
+
+}
+
+.wmde-markdown p {
+    margin: 0px !important;
+    color: #000;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 2.1875rem;
+}
+
+.wmde-markdown a.anchor {
+    display: none !important;
+}
+
+@media (min-width: 1024px) {
+    .wmde-markdown h2 {
+        /* margin: 0px !important; */
+        color: #000;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        margin: 12px 0px !important;
+        font-size: 1.5rem;
+    }
+
+    .wmde-markdown p {
+        margin: 0px !important;
+        color: #000;
+        font-weight: 400;
+        font-size: 1rem;
+        line-height: 2.1875rem;
+    }
+
+    .wmde-markdown a.anchor {
+        display: none !important;
+    }
+}
+
+@media (min-width: 1536px) {
+    .wmde-markdown h2 {
+        margin: 12px 0px !important;
+        font-size: 1.75rem;
+    }
+
+    .wmde-markdown p {
+        margin: 0px !important;
+        color: #000;
+        line-height: 2rem;
+    }
+
+    .wmde-markdown a.anchor {
+        display: none !important;
+    }
+}
diff --git a/src/components/svgs/AIGeneratedIcon.tsx b/src/components/svgs/AIGeneratedIcon.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const AiGeneratedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={21}
+    height={20}
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.3327 13.3333V11.6666C16.3327 9.30963 16.3327 8.13109 15.6004 7.39886C14.8682 6.66663 13.6897 6.66663 11.3327 6.66663H9.66602C7.30899 6.66663 6.13048 6.66663 5.39825 7.39886C4.66602 8.13109 4.66602 9.30963 4.66602 11.6666V13.3333C4.66602 15.6903 4.66602 16.8688 5.39825 17.601C6.13048 18.3333 7.30899 18.3333 9.66602 18.3333H11.3327C13.6897 18.3333 14.8682 18.3333 15.6004 17.601C16.3327 16.8688 16.3327 15.6903 16.3327 13.3333Z"
+      stroke="#2A58FE"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.334 15C17.5125 15 18.1017 15 18.4679 14.6339C18.834 14.2677 18.834 13.6785 18.834 12.5C18.834 11.3215 18.834 10.7322 18.4679 10.3661C18.1017 10 17.5125 10 16.334 10"
+      stroke="#2A58FE"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.66602 15C3.48751 15 2.89825 15 2.53213 14.6339C2.16602 14.2677 2.16602 13.6785 2.16602 12.5C2.16602 11.3215 2.16602 10.7322 2.53213 10.3661C2.89825 10 3.48751 10 4.66602 10"
+      stroke="#2A58FE"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.75 2.91663C11.75 3.60698 11.1903 4.16663 10.5 4.16663C9.80967 4.16663 9.25 3.60698 9.25 2.91663C9.25 2.22627 9.80967 1.66663 10.5 1.66663C11.1903 1.66663 11.75 2.22627 11.75 2.91663Z"
+      stroke="#2A58FE"
+    />
+    <path
+      d="M10.5 4.16663V6.66663"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 10.8334V11.6667"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13 10.8334V11.6667"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.83398 14.5834C8.83398 14.5834 9.38957 15 10.5007 15C11.6117 15 12.1673 14.5834 12.1673 14.5834"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+export default AiGeneratedIcon;