chore: initial page design of individual transcript

bitcointranscripts · Oct 23, 2024 · e27a027 · e27a027
1 parent a4872d6
commit e27a027
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 0 deletions.
diff --git a/src/app/dummy/page.tsx b/src/app/dummy/page.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import Wrapper from "@/components/layout/Wrapper";
+import BreadCrumbs from "@/components/common/BreadCrumbs";
+import TranscriptMetadataComponent from "@/components/common/TranscriptMetadatCard";
+import ContentSwitch from "@/components/common/ContentSwitch";
+
+const page = () => {
+  return (
+    <div className='flex items-center justify-center w-full h-full max-h-[calc(100vh-var(--header-height))]'>
+      <Wrapper className='h-[calc(100vh-var(--header-height))] w-full'>
+        <div className='flex flex-col w-full h-full max-h-[calc(100vh-var(--header-height))]'>
+          <section className='py-4 max-sm:pb-6 md:py-7 lg:py-8 2xl:py-10'>
+            <BreadCrumbs />
+          </section>
+
+          <section className='flex justify-between w-full gap-5 overflow-hidden h-full'>
+            <div className='h-full w-full md:w-[75%] overflow-scroll'>
+              <div>
+                <TranscriptMetadataComponent
+                  title='Newsletter #292 Recap'
+                  date={"7 March, 2004"}
+                  topics={["Anonymity Networks", "Research"]}
+                  speakers={["Gloria Zhao", "Tuedon Tuoyo"]}
+                  transcriptBy={"Afolabi"}
+                />
+              </div>
+
+              <div className='pt-3 md:pt-6 2xl:pt-8'>
+                <div className='pt-4 md:pt-5 2xl:pt-6'>
+                  <ContentSwitch />
+                </div>
+              </div>
+            </div>
+
+            <div className='hidden md:flex w-[25%] md:p-3 2xl:p-6 rounded-2xl max-h-[50%] border border-gray-custom-1200 min-h-[50%]'>
+              <div className='overflow-scroll'>
+                {/* body */}
+                <p className='text-black text-sm md:text-sm 2xl:text-lg leading-[23.22px]'>{}</p>
+              </div>
+            </div>
+          </section>
+        </div>
+      </Wrapper>
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/components/common/ContentSwitch.tsx b/src/components/common/ContentSwitch.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React, { useState } from "react";
+
+const ContentSwitch = () => {
+  const [openSection, setOpenSection] = useState({ transcript: true, summary: false, extraInfo: false });
+
+  return (
+    <div className='flex flex-col'>
+      <div className='flex gap-4 md:gap-10 xl:gap-16 justify-between items-center border-b border-b-gray-custom-1200'>
+        <SwitchItem
+          title='Transcript'
+          isOpen={openSection.transcript}
+          onClick={() => setOpenSection((prev) => ({ ...prev, transcript: true, summary: false, extraInfo: false }))}
+        />
+        <SwitchItem
+          title='Summary'
+          isOpen={openSection.summary}
+          onClick={() => setOpenSection((prev) => ({ ...prev, summary: true, transcript: false, extraInfo: false }))}
+        />
+        <SwitchItem
+          title='Extra Info'
+          isOpen={openSection.extraInfo}
+          onClick={() => setOpenSection((prev) => ({ ...prev, extraInfo: true, transcript: false, summary: false }))}
+        />
+      </div>
+
+      <div className='pt-4'>
+        {openSection.transcript ? <section>transcript</section> : null}
+        {openSection.summary ? <section>summary</section> : null}
+        {openSection.extraInfo ? <section>extra info</section> : null}
+      </div>
+    </div>
+  );
+};
+
+const SwitchItem = ({ title, isOpen, onClick }: { title: string; isOpen: boolean; onClick: () => void }) => {
+  return (
+    <button onClick={onClick} className='w-full flex items-start justify-center h-[31px] md:h-12 xl:h-14 2xl:h-[60px]'>
+      <section className='flex flex-col h-full items-center justify-between relative w-full'>
+        <p className='text-sm md:text-base xl:text-lg 2xl:text-xl font-bold text-orange-custom-100'>{title}</p>
+        {isOpen ? <div className='h-1 bg-orange-custom-100 w-full absolute bottom-0'></div> : null}
+      </section>
+    </button>
+  );
+};
+
+export default ContentSwitch;
diff --git a/src/components/common/TranscriptMetadatCard.tsx b/src/components/common/TranscriptMetadatCard.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+import { BookmarkIcon, CalendarIcon, MicIcon } from "@bitcoin-dev-project/bdp-ui/icons";
+import Link from "next/link";
+import { createSlug } from "@/utils";
+
+interface ITranscriptMetadataComponent {
+  title: string;
+  date: string | Date;
+  topics: string[];
+  speakers: string[] | null;
+  transcriptBy: string | string[];
+}
+
+const TranscriptMetadataComponent = ({ title, speakers, topics, transcriptBy }: ITranscriptMetadataComponent) => {
+  const [showDetail, setShowDetail] = useState(true);
+
+  const handleShowDetail = () => {
+    setShowDetail((prev) => !prev);
+  };
+
+  return (
+    <div className='border flex text-black flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200'>
+      <div className='flex flex-col md:flex-row flex-wrap gap-4 justify-between '>
+        <h4 className='text-orange-custom-100 text-xl font-bold md:text-2xl 2xl:text-[2rem]'>{title}</h4>
+        <button
+          onClick={handleShowDetail}
+          className='text-black text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border  w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap'
+        >
+          {showDetail ? (
+            <>
+              <Image src='/svgs/eye-close-icon.svg' alt='eye close icon' width={24} height={24} className='w-5' />
+              <span className='font-medium text-sm 2xl:text-base'>Hide Details </span>
+            </>
+          ) : (
+            <>
+              <Image src='/svgs/eye-open-icon.svg' alt='eye open icon' width={24} height={24} className='w-5' />
+              <span className='font-medium'>Show Details</span>
+            </>
+          )}
+        </button>
+      </div>
+      {/* Depends on the Show and Hide Button */}
+      {showDetail && (
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5 2xl:gap-6'>
+          <MetadataBlock
+            header={
+              <>
+                <CalendarIcon width={"19px"} color='#141B34' />
+                <p className='text-base lg:text-lg font-semibold'>Date</p>
+              </>
+            }
+            footer={
+              <div className='pl-5'>
+                <p className='text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium'>7 March, 2024</p>
+              </div>
+            }
+          />
+          {/* render only 3 tags*/}
+          <MetadataBlock
+            header={
+              <>
+                <BookmarkIcon width={"19px"} color='#000000' />
+                <p className='text-base lg:text-lg font-semibold'>Topic</p>
+              </>
+            }
+            footer={
+              <div className='flex flex-wrap gap-2'>
+                {topics &&
+                  topics.map((topic) => (
+                    <Link
+                      key={topic}
+                      href={`/topics/${createSlug(topic)}`}
+                      className='max-content py-1 px-4 rounded-[5px] bg-gray-custom-700 max-md:px-3 max-md:py-[2px] text-xs md:text-sm 2xl:text-base max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'
+                    >
+                      {topic}
+                    </Link>
+                  ))}
+              </div>
+            }
+          />
+
+          <MetadataBlock
+            header={
+              <>
+                <MicIcon width={"19px"} color='#000000' />
+                <p className='text-base lg:text-lg font-semibold'>Speakers</p>
+              </>
+            }
+            footer={
+              <div className='flex flex-wrap gap-2'>
+                {speakers &&
+                  speakers.map((speaker) => (
+                    <Link
+                      href={`/speakers/${createSlug(speaker)}`}
+                      key={speaker}
+                      className=' max-content py-[4.11px] px-[16.43px] rounded-[5.13px] bg-gray-custom-700 max-md:px-3 max-md:py-[2px] text-xs md:text-sm 2xl:text-base max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'
+                    >
+                      {speaker}
+                    </Link>
+                  ))}
+              </div>
+            }
+          />
+
+          <MetadataBlock
+            header={
+              <>
+                <Image src='/svgs/pencil-icon.svg' alt='pencil icon' width={24} height={24} className='w-5' />
+                <p className='text-base lg:text-lg font-semibold'>Transcript by</p>
+              </>
+            }
+            footer={
+              <div className='pl-5'>
+                <p className='text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium'>{transcriptBy}</p>
+              </div>
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const MetadataBlock = ({ header, footer }: { header: React.ReactNode; footer: React.ReactNode }) => {
+  return (
+    <div className='flex flex-col gap-2 border-b pb-3  border-dashed border-gray-custom-1600'>
+      <div className='flex items-center gap-1'>{header}</div>
+      <div>{footer}</div>
+    </div>
+  );
+};
+
+export default TranscriptMetadataComponent;