From 1c2f4e9b9a9f3202f176ca5a48cd8c5dbb300724 Mon Sep 17 00:00:00 2001
From: Triston <tarmstrong95@proton.me>
Date: Wed, 24 Apr 2024 19:53:25 -0400
Subject: [PATCH] feat: add dummy data and fill out component

---
 src/App.tsx                                |  2 +-
 src/components/local_radio/index.tsx       | 87 +++++++++++++++++++++-
 src/components/music_player/index.tsx      |  2 +-
 src/components/recommended_radio/index.tsx | 60 ++++++++++++++-
 4 files changed, 146 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ac79a28..a34443d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,7 +38,7 @@ export function App() {
           <Popular />
           {/* Bottom Section __________*/}
 
-          <div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4 ">
+          <div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4 min-h-0">
             <LocalRadio />
             <RecommendedRadio />
           </div>
diff --git a/src/components/local_radio/index.tsx b/src/components/local_radio/index.tsx
index ae577a9..27c924c 100644
--- a/src/components/local_radio/index.tsx
+++ b/src/components/local_radio/index.tsx
@@ -1,7 +1,90 @@
 export function LocalRadio() {
   return (
-    <div id="bottom-l" className="font-bold p-2 bg-white flex-1 rounded-xl shadow-md">
-      <h2>Local Radio</h2>
+    <div id="bottom-l" className="flex flex-col min-h-0 overflow-y-hidden font-bold p-2 bg-white flex-1 rounded-xl shadow-md gap-2">
+      <h2 >Local Radio</h2>
+
+      <div className="flex flex-col gap-4 overflow-y-scroll h-full">
+        {dummyData.map(x => (
+          <div className="flex flex-row min-w-[100px] gap-2 items-center">
+            <img src={x.image} width={50} className="rounded-xl" />
+            <h3 className="text-xl text-gray-500">{x.title}</h3>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
+
+const dummyData = [
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  }
+]
+
diff --git a/src/components/music_player/index.tsx b/src/components/music_player/index.tsx
index 17f7838..e6ac5b5 100644
--- a/src/components/music_player/index.tsx
+++ b/src/components/music_player/index.tsx
@@ -1,6 +1,6 @@
 export function MusicPlayer() {
   return (
-    <div className="flex justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] gap-2 items-center">
+    <div className="flex justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] gap-2 items-center pb-5">
       <div className="flex gap-2 items-center flex-[0.5]">
         <img
           width={50}
diff --git a/src/components/recommended_radio/index.tsx b/src/components/recommended_radio/index.tsx
index c909269..1e8bd6a 100644
--- a/src/components/recommended_radio/index.tsx
+++ b/src/components/recommended_radio/index.tsx
@@ -1,7 +1,65 @@
 export function RecommendedRadio() {
   return (
-    <div id="bottom-r" className="font-bold p-2 bg-white flex-1 rounded-xl  shadow-md">
+    <div id="bottom-r" className="flex-col flex font-bold p-2 bg-white flex-1 rounded-xl  shadow-md gap-2">
       <h2>Recommended For You</h2>
+
+      <div className="flex flex-col gap-4 overflow-y-scroll h-full">
+        {dummyData.map(x => (
+          <div className="flex flex-row min-w-[100px] items-center gap-2">
+            <img src={x.image} width={50} className="rounded-xl" />
+            <h3 className="text-xl text-gray-500">{x.title}</h3>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
+
+const dummyData = [
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+  {
+    location: 'Florida, USA',
+    title: '93.3 FLZ',
+    image: 'https://thispersondoesnotexist.com'
+  },
+]
+