Skip to content

Commit b13229b

Browse files
0tuedon0tuedon
committed
chore(dark-page): added dark pages on explore and indivdualtranscript page
1 parent 9d0bd56 commit b13229b

File tree

12 files changed

+233
-72
lines changed

12 files changed

+233
-72
lines changed

‎src/app/(explore)/[...slug]/page.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Image from "next/image";
44
import { notFound } from "next/navigation";
55
import { ContentTreeArray } from "@/utils/data";
66
import LinkIcon from "/public/svgs/link-icon.svg";
7-
import WorldIcon from "/public/svgs/world-icon.svg";
87
import allSources from "@/public/sources-data.json";
98
import { constructSlugPaths, deriveSourcesList, fetchTranscriptDetails, loopArrOrObject } from "@/utils";
109
import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
@@ -13,6 +12,7 @@ import TranscriptDetailsCard from "@/components/common/TranscriptDetailsCard";
1312
import { SourcesBreadCrumbs } from "@/components/explore/SourcesBreadCrumbs";
1413
import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
1514
import { LanguageCodes } from "@/config";
15+
import WorldIcon from "@/components/svgs/WorldIcon";
1616

1717
// forces 404 for paths not generated from `generateStaticParams` function.
1818
export const dynamicParams = false;
@@ -106,11 +106,11 @@ const page = ({ params }: { params: { slug: string[] } }) => {
106106
<h3 className='text-xl 2xl:text-2xl font-medium pt-6 md:pt-3'>{metadata?.title ?? slug[slug.length - 1]}</h3>
107107
{isRoot && metadata?.website ? (
108108
<div className='flex gap-1 items-center pt-3 md:pt-6'>
109-
<Image src={WorldIcon} alt='world icon' className='w-[18px] md:w-[20px]' />
109+
<WorldIcon className='w-[18px] md:w-[20px] dark:text-gray-custom-100' />
110110
<Link
111111
href={metadata?.website ?? ""}
112112
target='_blank'
113-
className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black underline text-wrap break-words line-clamp-1'
113+
className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black dark:text-gray-custom-100 underline text-wrap break-words line-clamp-1'
114114
>
115115
{metadata.website ?? ""}
116116
</Link>

‎src/components/common/BaseCrumbLists.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ const BaseCrumbLists = ({crumbsArray}:{crumbsArray:BaseCrumbType[]}) => {
1515
className={`capitalize hover:underline font-medium text-sm 2xl:text-base text-nowrap ${
1616
link.isActive
1717
? "text-orange-custom-100"
18-
: "text-black md:text-gray-custom-800"
18+
: "text-black md:text-gray-custom-800 dark:text-gray-custom-800"
1919
}`}
2020
href={link.link}
2121
>
2222
{link.name}
2323
</Link>
2424
{i !== crumbsArray.length - 1 && (
25-
<p className="text-custom-black-custom-200">/</p>
25+
<p className="text-custom-black-custom-200 dark:text-gray-custom-800">/</p>
2626
)}
2727
</div>
2828
))}

‎src/components/common/Tabs.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ const Tabs = ({
2727

2828
return (
2929
<div className="flex flex-col relative">
30-
<div className="sticky bg-white z-10 top-0 lg:top-0 md:pt-6 h-full flex gap-4 md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200">
30+
<div className="sticky bg-white dark:bg-dark-custom-100 z-10 top-0 lg:top-0 md:pt-6 h-full flex gap-4
31+
md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200 dark:border-b-gray-custom-1800">
3132
<Tab
3233
title="Transcript"
3334
isOpen={openTabs === "transcript"}
@@ -116,7 +117,7 @@ const Tab = ({
116117
<section className="flex flex-col h-full items-center justify-between relative w-full">
117118
<p
118119
className={`text-sm md:text-base xl:text-lg 2xl:text-xl font-normal ${
119-
isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400"
120+
isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400 dark:text-gray-custom-100"
120121
}`}
121122
>
122123
{title}

‎src/components/common/TranscriptMetadataCard.tsx

+59-53
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ import {
77
CalendarIcon,
88
MicIcon,
99
} from "@bitcoin-dev-project/bdp-ui/icons";
10-
import Link from "next/link";
1110
import { ContentData, createSlug } from "@/utils";
1211
import AiGeneratedIcon from "../svgs/AIGeneratedIcon";
1312
import { format, isDate } from "date-fns";
1413
import Pill from "./Pill";
14+
import PencilIcon from "../svgs/PencilIcon";
15+
import EyeClose from "../svgs/EyeClose";
16+
import EyeOpen from "../svgs/EyeOpen";
1517

1618
interface ITranscriptMetadataComponent {
1719
title: string;
@@ -34,44 +36,37 @@ const TranscriptMetadataComponent = ({
3436
setShowDetail((prev) => !prev);
3537
};
3638

37-
const convertedDate = date ? new Date(date) : false
38-
39-
const formattedDate = isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
39+
const convertedDate = date ? new Date(date) : false;
4040

41+
const formattedDate = isDate(convertedDate)
42+
? format(convertedDate, "d MMMM, yyyy")
43+
: "";
4144

4245
return (
43-
<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">
46+
<div className="border flex text-black dark:text-gray-custom-100 flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200 dark:border-gray-custom-1800">
4447
<div className="flex flex-col md:flex-row flex-wrap gap-4 justify-between ">
4548
<h4 className="text-orange-custom-100 text-xl font-bold md:text-2xl 2xl:text-[2rem]">
4649
{title}
4750
</h4>
4851
<button
4952
onClick={handleShowDetail}
50-
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"
53+
className="text-black dark:text-gray-custom-100
54+
text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border
55+
w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap"
5156
>
5257
{showDetail ? (
5358
<>
54-
<Image
55-
src="/svgs/eye-close-icon.svg"
56-
alt="eye close icon"
57-
width={24}
58-
height={24}
59-
className="w-5"
60-
/>
59+
<EyeClose className="w-5 dark:text-gray-custom-100" />
6160
<span className="font-medium text-sm 2xl:text-base">
6261
Hide Details{" "}
6362
</span>
6463
</>
6564
) : (
6665
<>
67-
<Image
68-
src="/svgs/eye-open-icon.svg"
69-
alt="eye open icon"
70-
width={24}
71-
height={24}
72-
className="w-5"
73-
/>
74-
<span className="font-medium">Show Details</span>
66+
<EyeOpen className="w-5 dark:text-gray-custom-100" />
67+
<span className="font-medium text-sm 2xl:text-base">
68+
Show Details
69+
</span>
7570
</>
7671
)}
7772
</button>
@@ -82,70 +77,81 @@ const TranscriptMetadataComponent = ({
8277
<MetadataBlock
8378
header={
8479
<>
85-
<CalendarIcon width={"19px"} color="#141B34" />
80+
<CalendarIcon width={"19px"} />
8681
<p className="text-base lg:text-lg font-semibold">Date</p>
8782
</>
8883
}
8984
footer={
9085
<div className="pl-2.5">
91-
{formattedDate ?
92-
<p className="text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium">
93-
{formattedDate}
94-
</p>:
95-
<p className="pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
96-
}
86+
{formattedDate ? (
87+
<p className="text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium">
88+
{formattedDate}
89+
</p>
90+
) : (
91+
<p className="pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">
92+
Not available
93+
</p>
94+
)}
9795
</div>
9896
}
9997
/>
10098
{/* render only 3 tags*/}
10199
<MetadataBlock
102100
header={
103101
<>
104-
<BookmarkIcon width={"19px"} color="#000000" />
102+
<BookmarkIcon width={"19px"} />
105103
<p className="text-base lg:text-lg font-semibold">Topics</p>
106104
</>
107105
}
108106
footer={
109107
<div className="flex flex-wrap gap-2">
110-
{(topics && topics.length > 0) ?
108+
{topics && topics.length > 0 ? (
111109
topics.map((topic) => (
112-
<Pill key={topic.slug} name={topic.name} slug={`/tags/${topic.slug}`} />
113-
)):
114-
<p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
115-
}
110+
<Pill
111+
key={topic.slug}
112+
name={topic.name}
113+
slug={`/tags/${topic.slug}`}
114+
/>
115+
))
116+
) : (
117+
<p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">
118+
Not available
119+
</p>
120+
)}
116121
</div>
117122
}
118123
/>
119124

120125
<MetadataBlock
121126
header={
122127
<>
123-
<MicIcon width={"19px"} color="#000000" />
128+
<MicIcon width={"19px"} />
124129
<p className="text-base lg:text-lg font-semibold">Speakers</p>
125130
</>
126131
}
127132
footer={
128133
<div className="flex flex-wrap gap-2">
129-
{speakers && speakers.length > 0 ?
134+
{speakers && speakers.length > 0 ? (
130135
speakers.map((speaker) => (
131-
<Pill key={speaker} name={speaker} slug={`/speakers/${createSlug(speaker)}`} />
132-
)):
133-
<p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
134-
}
136+
<Pill
137+
key={speaker}
138+
name={speaker}
139+
slug={`/speakers/${createSlug(speaker)}`}
140+
/>
141+
))
142+
) : (
143+
<p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">
144+
Not available
145+
</p>
146+
)}
135147
</div>
136148
}
137149
/>
138150

139151
<MetadataBlock
140152
header={
141153
<>
142-
<Image
143-
src="/svgs/pencil-icon.svg"
144-
alt="pencil icon"
145-
width={24}
146-
height={24}
147-
className="w-5"
148-
/>
154+
<PencilIcon className="w-5 dark:text-gray-custom-100" />
149155
<p className="text-base lg:text-lg font-semibold">
150156
Transcript by
151157
</p>
@@ -155,12 +161,12 @@ const TranscriptMetadataComponent = ({
155161
<div className="pl-5 pt-1.5 flex items-center ">
156162
{isAiGenerated ? (
157163
<>
158-
<a href="https://review.btctranscripts.com/" className="text-blue-custom-100 no-underline border-b border-blue-custom-100 max-w-[max-content] text-sm 2xl:text-base flex gap-1 items-start cursor-pointer">
159-
<AiGeneratedIcon className="-mt-0.5" />
160-
<span>
161-
AI Generated (Review for sats)
162-
</span>
163-
164+
<a
165+
href="https://review.btctranscripts.com/"
166+
className="text-blue-custom-100 no-underline border-b border-blue-custom-100 max-w-[max-content] text-sm 2xl:text-base flex gap-1 items-start cursor-pointer"
167+
>
168+
<AiGeneratedIcon className="-mt-0.5" />
169+
<span>AI Generated (Review for sats)</span>
164170
</a>{" "}
165171
</>
166172
) : (

‎src/components/individual-transcript/IndividualTranscript.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const IndividualTranscript = ({
2727
let keyWithoutHash = key.replace(/[#]+\s+/gi, "")
2828
acc[keyWithoutHash] = [{
2929
name: keyWithoutHash,
30-
slug: createContentSlug(key),
30+
slug: createContentSlug(key),
3131
}]
3232
return acc;
3333
}, {})
@@ -38,7 +38,7 @@ const IndividualTranscript = ({
3838
];
3939
const finalRoutes = [...staticRoutes, ...breadCrumbs];
4040
return (
41-
<Wrapper className="relative flex flex-col !px-0 gap-6 lg:gap-7 2xl:gap-10 mx-auto h-[calc(100vh-var(--header-height))] w-full overflow-y-auto scroll-smooth">
41+
<Wrapper className="relative flex flex-col !px-0 gap-6 lg:gap-7 dark:bg-dark-custom-100 2xl:gap-10 mx-auto h-[calc(100vh-var(--header-height))] w-full overflow-y-auto scroll-smooth">
4242
<div className="py-4 lg:pt-7 2xl:pt-10 px-4 lg:px-10 2xl:px-[60px]">
4343
<BaseCrumbLists crumbsArray={finalRoutes} />
4444
</div>

‎src/components/individual-transcript/TranscriptTabContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function formatSpeakerText(text: string): string {
1212
// Replace matched text with formatted HTML
1313
return text.replace(pattern, (match, speaker, time) => {
1414
// HTML for the speaker's name
15-
const formattedSpeaker = `<span className="font-bold text-black text-base leading-[1.36rem]">${speaker}:</span>`;
15+
const formattedSpeaker = `<span className="font-bold text-black dark:text-gray-custom-100 text-base leading-[1.36rem]">${speaker}:</span>`;
1616
// HTML for the timestamp
1717
const formattedTime = `<span className="text-gray-custom-1700 font-bold text-base leading-[1.36rem]">${time}</span>`;
1818

‎src/components/individual-transcript/markdown.css

+17-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,17 @@
1717

1818
}
1919

20+
2021
.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
2122
color: #000;
2223
font-size: 1rem
2324
}
2425

26+
html.dark .wmde-markdown h1, .wmde-markdown h2, .wmde-markdown h3, .wmde-markdown h4,
27+
.wmde-markdown h5, .wmde-markdown h6 {
28+
color: #fafafa;
29+
}
30+
2531
span.code-line {
2632
white-space: pre-wrap;
2733
}
@@ -40,11 +46,21 @@ span.code-line {
4046
line-height: 2.1875rem;
4147
}
4248

49+
html.dark .wmde-markdown p {
50+
color: #fafafa;
51+
}
4352
.wmde-markdown ul li {
4453
list-style-type: circle;
4554
color: #000;
4655
}
4756

57+
html.dark .wmde-markdown ul li {
58+
color: #fafafa;
59+
}
60+
61+
html.dark .wmde-markdown ol li {
62+
color: #fafafa;
63+
}
4864
.wmde-markdown ul {
4965
padding-left: 1em;
5066
}
@@ -68,7 +84,6 @@ span.code-line {
6884
}
6985

7086
.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
71-
color: #000;
7287
font-size: 1rem;
7388
}
7489

@@ -99,4 +114,4 @@ span.code-line {
99114
.wmde-markdown p {
100115
line-height: 2rem;
101116
}
102-
}
117+
}

0 commit comments

Comments
 (0)