prepare grid view

web/app/page.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 Pejman Ghorbanzade
 
-import DarkModeButton from '@/components/darkMode';
-import ListView from '@/components/ListView';
+import DarkModeButton from '@/components/DarkModeButton';
+import Talks from '@/components/Talks';
 import type { Talk } from '@/components/types';
 
 async function getTalks(): Promise<Talk[]> {
@@ -34,9 +34,7 @@ export default async function Home() {
             <DarkModeButton />
           </div>
         </div>
-        <div>
-          <ListView talks={talks} />
-        </div>
+        <Talks talks={talks} />
       </div>
     </main>
   );

web/components/ListView.tsx → web/components/Talks.tsx

@@ -5,9 +5,29 @@ import { useState } from 'react';
 import { format } from 'date-fns';
 import { FiStar } from 'react-icons/fi';
 import Markdown from 'markdown-to-jsx';
-import type { Talk } from '@/components/types';
+import type { Talk, View } from '@/components/types';
+import ViewToggleButton from '@/components/ViewToggleButton';
 
-export default function ListView({ talks }: { talks: Talk[] }) {
+export default function Talks({ talks }: { talks: Talk[] }) {
+  const [view, setView] = useState<View>('list');
+  const ViewComponent = view === 'list' ? ListView : GridView;
+  return (
+    <>
+      <div className="flex justify-end px-6">
+        <ViewToggleButton view={view} setView={setView} />
+      </div>
+      <div>
+        <ViewComponent talks={talks} />
+      </div>
+    </>
+  );
+}
+
+function GridView({ talks }: { talks: Talk[] }) {
+  return <div>Hello</div>;
+}
+
+function ListView({ talks }: { talks: Talk[] }) {
   return (
     <div className="rounded-lg border-slate-300 bg-white px-6 dark:border-slate-700 dark:bg-gradient-to-br dark:from-black dark:to-slate-900 border divide-y divide-slate-300 dark:divide-slate-800">
       {talks.map((talk, index) => (
@@ -41,18 +61,18 @@ function ListEntry({ talk }: { talk: Talk }) {
                 Abstract
               </a>
             )}
-            {talk.links?.registration && (
+            {talk.links.registration && (
               <a href={talk.links.registration} target="_blank">
                 Registration
               </a>
             )}
-            {talk.links?.youtube && (
+            {talk.links.youtube && (
               <a href={talk.links.youtube} target="_blank">
                 Recording
               </a>
             )}
             <SlidesLink links={talk.links} />
-            {talk.links?.repository && (
+            {talk.links.repository && (
               <a href={talk.links.repository} target="_blank">
                 Repository
               </a>
@@ -78,15 +98,23 @@ function ListEntry({ talk }: { talk: Talk }) {
 }
 
 function SlidesLink({ links }: { links: Talk['links'] }) {
-  return links.pdf || links.html ? (
-    <div>
-      <span>Slides (</span>
-      {links.html && <a href={links.html}>HTML</a>}
-      {links.html && links.pdf && <span>, </span>}
-      {links.pdf && <a href={links.pdf}>PDF</a>}
-      <span>)</span>
-    </div>
-  ) : (
-    <></>
+  return (
+    (links.pdf || links.html) && (
+      <div>
+        <span>Slides (</span>
+        {links.html && (
+          <a href={links.html} target="_blank">
+            HTML
+          </a>
+        )}
+        {links.html && links.pdf && <span>, </span>}
+        {links.pdf && (
+          <a href={links.pdf} target="_blank">
+            PDF
+          </a>
+        )}
+        <span>)</span>
+      </div>
+    )
   );
 }

web/components/ViewToggleButton.tsx

@@ -0,0 +1,27 @@
+// Copyright 2024 Pejman Ghorbanzade
+'use client';
+
+import { Dispatch } from 'react';
+import { FiGrid, FiList } from 'react-icons/fi';
+import { type View } from '@/components/types';
+
+export default function ViewToggleButton({
+  view,
+  setView
+}: {
+  view: View;
+  setView: Dispatch<View>;
+}) {
+  return (
+    <div className="flex space-x-2">
+      <FiList
+        className={view === 'grid' ? 'opacity-10' : ''}
+        onClick={() => setView('list')}
+      />
+      {/* <FiGrid
+        className={view === 'list' ? 'opacity-10' : ''}
+        onClick={() => setView('grid')}
+      /> */}
+    </div>
+  );
+}

web/components/types.tsx

@@ -23,3 +23,5 @@ export type Talk = {
   abstract?: string;
   links: Links;
 };
+
+export type View = 'list' | 'grid';

web/talks.json

@@ -37,7 +37,7 @@
     "location": "Sunnyvale, CA",
     "conference": "San Francisco Bay Area C++ User Group",
     "duration": 60,
-    "tags": ["cpp", "meetup"],
+    "tags": ["cpp", "meetup", "highlight"],
     "title": "Finding regressions in mission critical software workflows",
     "abstract": "Making code changes to real-world software systems runs the risk of introducing unintended side-effects that are costly to find and fix. There are methods and tools to help us mitigate the inherent risks. This talk outlines some of these methods with a focus on regression testing which helps us compare the behavior of a given version of our software against a previous version, for a variety of test inputs. We review some of the well-known open-source regression testing solutions available in the C++ ecosystem. We use hands-on demos to show the practical challenges of using these tools for testing real-world software, and the benefits of fast feedback cycles on improving developer productivity and software release confidence.",
     "links": {
@@ -147,6 +147,17 @@
       "repository": "https://github.com/ghorbanzade/cppcon21"
     }
   },
+  {
+    "date": "27 October 2021",
+    "location": "Aurora, CO",
+    "conference": "CppCon",
+    "duration": 5,
+    "tags": ["cpp", "cppcon", "lightning"],
+    "title": "Zero Cost Regressions",
+    "links": {
+      "youtube": "https://youtu.be/8nlXVJSnOe8"
+    }
+  },
   {
     "date": "12 October 2021",
     "location": "Minneapolis, MN",