reuse list entry component

ghorbanzade · Feb 20, 2024 · b44f82f · b44f82f
1 parent 757e734
commit b44f82f
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 49 deletions.
diff --git a/web/app/[slug]/page.tsx b/web/app/[slug]/page.tsx
@@ -2,7 +2,7 @@
 
 import DarkModeButton from '@/components/DarkModeButton';
 import NavBar from '@/components/NavBar';
-import TalkEntry from '@/components/TalkEntry';
+import TalkPageContent from '@/components/TalkPageContent';
 import { getTalks } from '@/components/utils';
 
 export async function generateStaticParams() {
@@ -24,7 +24,7 @@ export default async function Home({ params }: { params: { slug: string } }) {
             <DarkModeButton />
           </div>
         </div>
-        <TalkEntry talk={talk} />
+        <TalkPageContent talk={talk} />
       </div>
     </main>
   );

diff --git a/web/app/page.tsx b/web/app/page.tsx
@@ -2,7 +2,7 @@
 
 import DarkModeButton from '@/components/DarkModeButton';
 import NavBar from '@/components/NavBar';
-import Talks from '@/components/Talks';
+import TalksPageContent from '@/components/TalksPageContent';
 import { getTalks } from '@/components/utils';
 
 export default async function Home() {
@@ -20,7 +20,7 @@ export default async function Home() {
             <DarkModeButton />
           </div>
         </div>
-        <Talks talks={talks} />
+        <TalksPageContent talks={talks} />
       </div>
     </main>
   );

diff --git a/web/components/ListEntry.tsx b/web/components/ListEntry.tsx
@@ -0,0 +1,31 @@
+// Copyright 2024 Pejman Ghorbanzade
+
+import { format } from 'date-fns';
+import type { Talk } from '@/components/types';
+
+export function ListEntry({
+  talk,
+  className
+}: {
+  talk: Talk;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`flex justify-between min-w-full p-6 text-slate-700 dark:text-slate-300 ${className}`}
+    >
+      <div className="flex-grow">
+        <div>
+          <span>{talk.conference}</span>
+          {talk.location && <span>, {talk.location}</span>}
+        </div>
+        <div className="text-xl">{talk.title}</div>
+      </div>
+      <div className="flex items-center">
+        <time dateTime={talk.date}>
+          {format(new Date(talk.date!), 'LLL yyyy')}
+        </time>
+      </div>
+    </div>
+  );
+}
diff --git a/web/components/TalkEntry.tsx → web/components/TalkPageContent.tsx b/web/components/TalkEntry.tsx → web/components/TalkPageContent.tsx
@@ -1,29 +1,17 @@
 // Copyright 2024 Pejman Ghorbanzade
 
-import { Talk } from '@/components/types';
-import { format } from 'date-fns';
-import Markdown from 'markdown-to-jsx';
 import Image from 'next/image';
+import Markdown from 'markdown-to-jsx';
+import { ListEntry } from '@/components/ListEntry';
+import { Talk } from '@/components/types';
 
-export default function TalkEntry({ talk }: { talk: Talk }) {
+export default function TalkPageContent({ talk }: { talk: Talk }) {
   return (
-    <div className="min-h-24 prose prose-base prose-slate min-w-full dark:prose-invert py-6 space-y-4">
-      <div className="flex justify-between rounded-lg border-slate-300 bg-white p-6 dark:border-slate-700 dark:bg-gradient-to-br dark:from-black dark:to-slate-900 border">
-        <div>
-          <div>
-            <span className="font-semibold">{talk.conference}</span>
-            {talk.location && (
-              <span className="font-light">, {talk.location}</span>
-            )}
-          </div>
-          <div className="text-xl">{talk.title}</div>
-        </div>
-        <div className="flex items-center">
-          <time dateTime={talk.date}>
-            {format(new Date(talk.date!), 'LLL yyyy')}
-          </time>
-        </div>
-      </div>
+    <div className="space-y-4">
+      <ListEntry
+        talk={talk}
+        className="rounded-lg border-slate-300 bg-white dark:border-slate-700 dark:bg-gradient-to-br dark:from-black dark:to-slate-900 border"
+      />
       <div className="rounded-lg border-slate-300 bg-white p-6 dark:border-slate-700 dark:bg-gradient-to-br dark:from-black dark:to-slate-900 border">
         <Links talk={talk} />
       </div>
@@ -39,7 +27,9 @@ export default function TalkEntry({ talk }: { talk: Talk }) {
       )}
       {talk.abstract && !talk.tags.includes('hide-abstract') && (
         <div className="rounded-lg border-slate-300 bg-white p-6 dark:border-slate-700 dark:bg-gradient-to-br dark:from-black dark:to-slate-900 border">
-          <div className="text-xl">Abstract</div>
+          <div className="text-xl text-slate-700 dark:text-slate-300">
+            Abstract
+          </div>
           <Markdown className="wsl-mark prose prose-base prose-slate min-w-full dark:prose-invert">
             {talk.abstract}
           </Markdown>
@@ -69,7 +59,7 @@ function YouTube({ link }: { link: string }) {
 
 function Links({ talk }: { talk: Talk }) {
   return (
-    <div className="flex space-x-6">
+    <div className="flex space-x-6 prose prose-base prose-slate dark:prose-invert">
       {/* {talk.abstract && !talk.tags.includes('hide-abstract') && <a>Abstract</a>}
       {talk.links.youtube && (
         <a href={talk.links.youtube} target="_blank">

diff --git a/web/components/Talks.tsx → web/components/TalksPageContent.tsx b/web/components/Talks.tsx → web/components/TalksPageContent.tsx
@@ -3,11 +3,11 @@
 
 import Link from 'next/link';
 import { useState } from 'react';
-import { format } from 'date-fns';
+import { ListEntry } from '@/components/ListEntry';
 import ViewToggleButton from '@/components/ViewToggleButton';
 import type { Talk, View } from '@/components/types';
 
-export default function Talks({ talks }: { talks: Talk[] }) {
+export default function TalksPageContent({ talks }: { talks: Talk[] }) {
   const [view, setView] = useState<View>('list');
   const ViewComponent = view === 'list' ? ListView : GridView;
   return (
@@ -35,28 +35,12 @@ function ListView({ talks }: { talks: Talk[] }) {
           className="flex decoration-transparent cursor-pointer"
           href={`/${talk.slug}`}
         >
-          <ListEntry talk={talk} />
+          <ListEntry
+            talk={talk}
+            className="hover:dark:bg-gradient-to-br hover:dark:from-black hover:dark:to-slate-900 hover:bg-slate-100"
+          />
         </Link>
       ))}
     </div>
   );
 }
-
-function ListEntry({ talk }: { talk: Talk }) {
-  return (
-    <div className="flex justify-between min-w-full p-6 text-slate-700 dark:text-slate-300 hover:dark:bg-gradient-to-br hover:dark:from-black hover:dark:to-slate-900 hover:bg-slate-100">
-      <div className="flex-grow">
-        <div>
-          <span>{talk.conference}</span>
-          {talk.location && <span>, {talk.location}</span>}
-        </div>
-        <div className="text-xl">{talk.title}</div>
-      </div>
-      <div className="flex items-center">
-        <time dateTime={talk.date}>
-          {format(new Date(talk.date!), 'LLL yyyy')}
-        </time>
-      </div>
-    </div>
-  );
-}