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">
{/* 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">
<input type="text" className="rounded-md border p-1 w-full" placeholder="Search" />
</div>
<div>
<h2 className="text-gray-500 text-sm">Music</h2>
<Navigation />
</div>
<button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100 w-full">Create New +</button>
</div>
{/* 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">
<MusicPlayer />
<Popular />

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

@ -1,26 +1,24 @@
export 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">
<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 gap-2 items-center flex-[0.5]">
<img
width={50}
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 className="flex flex-col" style={{ overflowX: 'hidden' }}>
<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 className="flex-1 flex flex-col items-center">
<div className="flex gap-1 justify-center">
<svg
id="playbutton"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
@ -30,7 +28,7 @@ export function MusicPlayer() {
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="lucide lucide-play"
className="lucide lucide-play w-5"
>
<polygon points="6 3 20 12 6 21 6 3" />
</svg>
@ -43,8 +41,9 @@ export function MusicPlayer() {
</div>
</div>
<div className="flex gap-1">
<div className="flex flex-row flex-[0.5] gap-1 justify-end items-end">
<svg
id="volume"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
@ -54,7 +53,7 @@ export function MusicPlayer() {
stroke-width="2"
stroke-linecap="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" />
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />