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

(feat): fix some of the music player styles

Browse Source
This commit is contained in:
Triston Armstrong 2024-04-07 13:03:42 -05:00
parent 58d1c335b8
commit 37294489a8
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
2 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -17,20 +17,22 @@ export function App() {
<div className="flex flex-row gap-2 px-2"> <div className="flex flex-row gap-2 px-2">
{/* Left Section __________*/} {/* Left Section __________*/}
<div className="pt-2 min-h-[95vh] max-h-[95vh] min-w-[150px] flex flex-col gap-4 justify-start"> <div className="pt-2 min-h-[98vh] max-h-[98vh] min-w-[150px] flex flex-col gap-4 justify-start">
<div className="w-full flex justify-center"> <div className="w-full flex justify-center">
<input type="text" className="rounded-md border p-1 w-full" placeholder="Search" /> <input type="text" className="rounded-md border p-1 w-full" placeholder="Search" />
</div> </div>
<div> <div>
<h2 className="text-gray-500 text-sm">Music</h2> <h2 className="text-gray-500 text-sm">Music</h2>
<Navigation /> <Navigation />
</div> </div>
<button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100 w-full">Create New +</button> <button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100 w-full">Create New +</button>
</div> </div>
{/* Right Section __________*/} {/* Right Section __________*/}
<div className="flex-1 min-h-[95vh] max-h-[95vh] flex h-0 p-2"> <div className="flex-1 min-h-[98vh] max-h-[98vh] flex h-0 p-2">
<div className="bg-gray-200 w-full border rounded-xl p-4 flex-col flex gap-4"> <div className="bg-gray-200 w-full border rounded-xl p-4 flex-col flex gap-4">
<MusicPlayer /> <MusicPlayer />
<Popular /> <Popular />

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

@ -1,26 +1,24 @@
export function MusicPlayer() { export function MusicPlayer() {
return ( return (
<div <div className="flex justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] gap-2 items-center">
id="top" <div className="flex gap-2 items-center flex-[0.5]">
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 <img
width={50}
className="rounded-xl" className="rounded-xl"
src="https://www.thispersondoesnotexist.com" src="https://www.thispersondoesnotexist.com"
width={80}
height={"auto"}
alt="station art" alt="station art"
/> />
<div className="flex flex-col">
<p>Camden to Chinatown</p> <div className="flex flex-col" style={{ overflowX: 'hidden' }}>
<p>Loafy Building, Raimu</p> <p className="text-sm" style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>Camden to Chinatown</p>
<p className="text-sm" style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>Loafy Building, Raimu</p>
</div> </div>
</div> </div>
<div> <div className="flex-1 flex flex-col items-center">
<div className="flex gap-1 justify-center"> <div className="flex gap-1 justify-center">
<svg <svg
id="playbutton"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
@ -30,7 +28,7 @@ export function MusicPlayer() {
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
className="lucide lucide-play" className="lucide lucide-play w-5"
> >
<polygon points="6 3 20 12 6 21 6 3" /> <polygon points="6 3 20 12 6 21 6 3" />
</svg> </svg>
@ -43,8 +41,9 @@ export function MusicPlayer() {
</div> </div>
</div> </div>
<div className="flex gap-1"> <div className="flex flex-row flex-[0.5] gap-1 justify-end items-end">
<svg <svg
id="volume"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
@ -54,7 +53,7 @@ export function MusicPlayer() {
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
className="lucide lucide-volume-1" className="lucide lucide-volume-1 w-5"
> >
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" /> <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" /> <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />