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 +146 -5
4 changed files with 146 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1c2f4e9b9a - Show all commits

2
src/App.tsx
View File

@ -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>

85
src/components/local_radio/index.tsx
View File

@ -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">
<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'
}
]

2
src/components/music_player/index.tsx
View File

@ -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}

60
src/components/recommended_radio/index.tsx
View File

@ -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'
},
]