feat: twitter spaces

reactplay · Apr 3, 2023 · 68ffb27 · 68ffb27
1 parent 69992c2
commit 68ffb27
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 11 deletions.
diff --git a/components/MediaLayout.js b/components/MediaLayout.js
@@ -1,16 +1,22 @@
 import Link from "next/link";
 import Image from "next/image";
+import ReactPlayLogo from "../public/ReactPlayLogo.svg";
 import { HiArrowNarrowRight } from "react-icons/hi";
+import { BiPlay } from "react-icons/bi";
 
-const MediaLayout = ({ events, videoLinks, twitterLinks, title, id }) => {
+const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
   return (
     <section
       id={id}
       className={`flex flex-col items-center justify-center w-full mx-auto px-4 ${
         events && "bg-gray-50"
-      } ${twitterLinks && "bg-cyan-400/10"} ${videoLinks && "bg-slate-900"}`}
+      } ${twitterSpaces && "bg-cyan-400/10"} ${
+        reactPlayLive && "bg-slate-900"
+      }`}
     >
-      <h1 className={`text-5xl py-16 font-sans ${videoLinks && "text-white"}`}>
+      <h1
+        className={`text-5xl py-16 font-sans ${reactPlayLive && "text-white"}`}
+      >
         {!title.split(" ")[1] ? (
           <span className="font-black">{title}</span>
         ) : (
@@ -37,7 +43,7 @@ const MediaLayout = ({ events, videoLinks, twitterLinks, title, id }) => {
             </article>
           </Link>
         ))}
-        {videoLinks?.map((el) => (
+        {reactPlayLive?.map((el) => (
           <iframe
             key={el.id}
             width="360"
@@ -49,25 +55,44 @@ const MediaLayout = ({ events, videoLinks, twitterLinks, title, id }) => {
             allowFullScreen
           ></iframe>
         ))}
-        {twitterLinks?.map((el) => (
+        {twitterSpaces?.map((el) => (
           <div
             key={el.id}
-            className="mb-10 rounded text-sm text-gray-300 sm:h-[21rem] md:h-[20rem] flex flex-col gap-5 bg-cyan-800 w-[350px] px-6 py-8 cursor-pointer hover:scale-105 transition-all"
+            className="bg-slate-900 text-white w-[350px] p-4 rounded-lg"
           >
-            {el.guestSpeaker}
+            {/* Host */}
+            <div className="flex gap-2 items-center">
+              {/* logo */}
+              <Image alt="Logo of ReactPlay" src={ReactPlayLogo} />
+              <span className="uppercase bg-slate-600 px-1 rounded text-sm">
+                Host
+              </span>
+            </div>
+            <h3 className="py-4 text-xl font-semibold">{el.title}</h3>
+            <p className="pb-10">{el.date}</p>
+            <div className="py-2 flex justify-center rounded-full bg-slate-400 hover:bg-slate-500 transition">
+              <a
+                className="text-gray-900 inline-flex items-center font-semibold text-base"
+                href={el.link}
+                target="_blank"
+              >
+                <BiPlay className="w-6 h-6" />
+                Play Recording
+              </a>
+            </div>
           </div>
         ))}
       </div>
 
       {/* link to rest of the media */}
       <button
         className={`font-sans font-black text-2xl py-16 decoration-cyan-400 underline transition-shadow ${
-          videoLinks && "text-white"
+          reactPlayLive && "text-white"
         }`}
       >
         <a
           href={
-            videoLinks
+            reactPlayLive
               ? "https://www.youtube.com/playlist?list=PLIJrr73KDmRxqfDS58ZC3MoianOjcm__Y"
               : ""
           }

diff --git a/pages/index.js b/pages/index.js
@@ -16,12 +16,12 @@ export default function Home() {
         <Banner />
         <MediaLayout events={Config.events} title="Events" id="events" />
         <MediaLayout
-          videoLinks={reactPlayLive}
+          reactPlayLive={reactPlayLive}
           title="ReactPlay Live"
           id="live"
         />
         <MediaLayout
-          twitterLinks={Config.twitterSpaces}
+          twitterSpaces={Config.twitterSpaces}
           title="Twitter Spaces"
           id="spaces"
         />

diff --git a/services/metadata/home.js b/services/metadata/home.js
@@ -69,36 +69,50 @@ export const Config = {
       id: 0,
       link: "https://twitter.com/i/spaces/1OdKrBXaBrOKX",
       guestSpeaker: "Nikhil",
+      title: "Catch up with Nikhil - UX, Design Systems, OSS, React, and more.",
+      date: "Aug 3, 2022",
     },
     {
       id: 1,
       link: "https://twitter.com/i/spaces/1zqJVPQobgnKB",
       guestSpeaker: "Shruti",
+      title: "Catch up with Shruti - CSS, Design, Tailwind, and more!",
+      date: "Sep 2, 2022",
     },
     {
       id: 2,
       link: "https://twitter.com/i/spaces/1djxXljXOpVxZ",
       guestSpeaker: "Swapna",
+      title: "Catch up with Swapna - Content, Career, DSA, and more!",
+      date: "Oct 13, 2022",
     },
     // {
     //   id: 3,
     //   link: "https://twitter.com/i/spaces/1DXxyvzankdKM",
     //   guestSpeaker: "Aakansha",
+    //   title: "Catch up with Aakansha - Side hustles, Open Source, and more!",
+    //   date: null,
     // },
     // {
     //   id: 4,
     //   link: "https://twitter.com/i/spaces/1djGXlmrMYOGZ",
     //   guestSpeaker: "Ajin",
+    //   title: "Catch up with Ajin - react native, flutter, career and more !",
+    //   date: "Nov 18, 2022",
     // },
     // {
     //   id: 5,
     //   link: "https://twitter.com/i/spaces/1MYxNgzkeNzKw",
     //   guestSpeaker: "Victoria",
+    //   title: "Catching up with Victoria - Career, Dev wellbeing, Blogging",
+    //   date: "Jan 13, 2023",
     // },
     // {
     //   id: 6,
     //   link: "https://twitter.com/i/spaces/1RDxlaoZopEKL",
     //   guestSpeaker: "Ritesh",
+    //   title: "Catching up with Ritesh - #2PlaysAMonth special episode",
+    //   date: "Feb 3, 2023",
     // },
   ],
 };