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

(feat): abstract music player to own component

Browse Source
This commit is contained in:
Triston Armstrong 2024-04-07 11:40:58 -05:00
parent 929b8eb719
commit c79eb89e46
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
3 changed files with 72 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.tsx
View File

@ -1,6 +1,7 @@
import { useEffect } from "kaioken"
import { useStorage } from "./hooks/storageStores"
import { useStationsStore } from "./hooks/stationStores"
import { MusicPlayer } from "./components/music_player"
export function App() {
const { getStationsFile } = useStorage()
@ -13,7 +14,7 @@ export function App() {
}, [])
return (
<div className="flex flex-row gap-2 px-2 mt-[30px]">
<div className="flex flex-row gap-2 px-2">
{/* Left Section __________*/}
<div className="pt-2 min-h-[95vh] max-h-[95vh] min-w-[150px] flex flex-col gap-4 justify-start">
@ -46,37 +47,7 @@ export function App() {
<div className="bg-gray-200 w-full border rounded-xl p-4 flex-col flex gap-4">
{/* Music Player __________*/}
<div id="top" className="justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] flex gap-2 items-center">
<div className="flex gap-2 items-center">
<img className="rounded-xl" src="https://www.thispersondoesnotexist.com" width={80} height={'auto'} alt="station art" />
<div className="flex flex-col">
<p>Camden to Chinatown</p>
<p>Loafy Building, Raimu</p>
</div>
</div>
<div >
<div className="flex gap-1 justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-play">
<polygon points="6 3 20 12 6 21 6 3" />
</svg>
</div>
<div className="flex gap-1">
<p>0:40</p>
<input type="range" />
<p>1:44</p>
</div>
</div>
<div className="flex gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-volume-1">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
</svg>
<input type="range" />
</div>
</div>
<MusicPlayer />
{/* Popular Section __________*/}
<div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col max-h-[150px]">

1
src/components/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./music_player"

68
src/components/music_player/index.tsx Normal file
View File

@ -0,0 +1,68 @@
function MusicPlayer() {
return (
<div
id="top"
className="justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] flex gap-2 items-center"
>
<div className="flex gap-2 items-center">
<img
className="rounded-xl"
src="https://www.thispersondoesnotexist.com"
width={80}
height={"auto"}
alt="station art"
/>
<div className="flex flex-col">
<p>Camden to Chinatown</p>
<p>Loafy Building, Raimu</p>
</div>
</div>
<div>
<div className="flex gap-1 justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="lucide lucide-play"
>
<polygon points="6 3 20 12 6 21 6 3" />
</svg>
</div>
<div className="flex gap-1">
<p>0:40</p>
<input type="range" />
<p>1:44</p>
</div>
</div>
<div className="flex gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="lucide lucide-volume-1"
>
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
</svg>
<input type="range" />
</div>
</div>
)
}
export default MusicPlayer