Klectr/KRadio
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

21 feature app redesign #23

Open
tristonarmstrong wants to merge 18 commits from 21-feature-app-redesign into main
pull from: 21-feature-app-redesign
merge into: Klectr:main
Conversation 0 Commits 18 Files Changed 14 +59 -2
1 changed files with 59 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 46a8a80788 - Show all commits

61
src/components/popular/index.tsx
View File

@ -1,10 +1,67 @@
export function Popular() { export function Popular() {
return ( return (
<div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col max-h-[150px]"> <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-2 bg-white flex-1 rounded-xl shadow-md"> <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> <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>
</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'
},
]