initial pass at media page

components/LayoutWrapper.tsx

@@ -29,7 +29,7 @@ const LayoutWrapper = ({ children }: Props) => {
                 <Link
                   key={link.title}
                   href={link.href}
-                  className="focus:shadow-outline-blue sm:border-r-1 inline border border-transparent bg-primary-600 px-4 py-3 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-primary-700 focus:outline-none dark:hover:bg-primary-500 sm:grow sm:border-y-0 sm:border-l-0 sm:border-primary-900 sm:text-center"
+                  className="focus:shadow-outline-blue sm:border-r-1 inline border border-transparent bg-primary-600 px-4 py-3 text-sm font-bold leading-5 text-white shadow transition-colors duration-150 hover:bg-primary-700 focus:outline-none dark:hover:bg-primary-500 sm:grow sm:border-y-0 sm:border-l-0 sm:border-primary-900 sm:text-center"
                 >
                   {link.title}
                 </Link>

components/MediaItem.tsx

@@ -0,0 +1,24 @@
+import PhotoGallery from './PhotoGallery'
+import YoutubeVideo from './YouTubeVideo'
+
+const MediaItem = (props) => {
+  const { type, title, data } = props
+
+  if (type !== 'video' && type !== 'photos') return null
+
+  const item =
+    type === 'video' ? (
+      <YoutubeVideo title={title} data={data} />
+    ) : (
+      <PhotoGallery title={title} data={data} />
+    )
+
+  return (
+    <div className="mb-12 w-full border border-solid border-primary-900">
+      <h3 className="bg-primary-600 px-4 py-3 text-center text-sm font-bold text-white">{title}</h3>
+      {item}
+    </div>
+  )
+}
+
+export default MediaItem

components/PhotoGallery.tsx

@@ -0,0 +1,21 @@
+import 'photoswipe/dist/photoswipe.css'
+import { Gallery, Item } from 'react-photoswipe-gallery'
+import Image from './Image'
+
+const PhotoGallery = (props) => {
+  const { title, data } = props
+
+  return (
+    <Gallery>
+      {data.length
+        ? data.map((d: string) => (
+            <Item cropped key={d}>
+              {({ ref, open }) => <Image alt={title} ref={ref} onClick={open} src={d} />}
+            </Item>
+          ))
+        : null}
+    </Gallery>
+  )
+}
+
+export default PhotoGallery

components/ThemeSwitch.tsx

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-
-const ThemeSwitch = () => {
-  const [mounted, setMounted] = useState(false)
-  const { theme, setTheme, resolvedTheme } = useTheme()
-
-  // When mounted on client, now we can show the UI
-  useEffect(() => setMounted(true), [])
-
-  return (
-    <button
-      aria-label="Toggle Dark Mode"
-      type="button"
-      className="ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4"
-      onClick={() => setTheme(theme === 'dark' || resolvedTheme === 'dark' ? 'light' : 'dark')}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        className="text-gray-900 dark:text-gray-100"
-      >
-        {mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
-          <path
-            fillRule="evenodd"
-            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-            clipRule="evenodd"
-          />
-        ) : (
-          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-        )}
-      </svg>
-    </button>
-  )
-}
-
-export default ThemeSwitch

components/YouTubeVideo.tsx

@@ -0,0 +1,18 @@
+const YoutubeVideo = (props) => {
+  const { title, data } = props
+
+  return (
+    <div
+      className="relative h-0 w-full max-w-full overflow-hidden"
+      style={{ paddingBottom: '56.25%' }}
+    >
+      <iframe
+        title={title}
+        src={`https://www.youtube.com/embed/${data}`}
+        className="absolute top-0 left-0 h-full w-full"
+      />
+    </div>
+  )
+}
+
+export default YoutubeVideo