From 46a8a807885463e59740ad671e85fa21b20460ed Mon Sep 17 00:00:00 2001
From: Triston <tarmstrong95@proton.me>
Date: Wed, 24 Apr 2024 18:16:37 -0400
Subject: [PATCH] feat: add dummy data and properly style the popular section

---
 src/components/popular/index.tsx | 61 ++++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/components/popular/index.tsx b/src/components/popular/index.tsx
index d7020d9..d733ba6 100644
--- a/src/components/popular/index.tsx
+++ b/src/components/popular/index.tsx
@@ -1,10 +1,67 @@
 export function Popular() {
   return (
-    <div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col max-h-[150px]">
-      <div id="middle-main" className="font-bold p-2 bg-white flex-1 rounded-xl  shadow-md">
+    <div className="bg-gray-300 flex-1 rounded-xl flex flex-col max-h-[200px] overflow-hidden">
+      <div id="middle-main" className="font-bold p-4 bg-white flex-1 rounded-xl shadow-md flex flex-col gap-2">
         <h2>Popular</h2>
+        <div className="flex gap-4 overflow-y-scroll">
+          {dummyData.map(x => (
+            <div className="flex flex-col min-w-[100px]">
+              <img src={x.image} width={100} className="rounded-xl" />
+              <p className="text-[.8rem] text-gray-500">{x.title}</p>
+              <small className="text-[.6rem] text-gray-300">{x.location}</small>
+            </div>
+          ))}
+        </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'
+  },
+]
+