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

feat(app.tsx): adds/updates buttons and styles

Browse Source 
adds a refresh button, and changes the back buttons to be left chevrons. Changes styles of buttons
and removes some styling on the view station page
This commit is contained in:
Triston Armstrong 2024-03-16 10:41:17 -05:00
parent d28f4af806
commit cca5894610
1 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.tsx
View File

@ -72,6 +72,16 @@ export function App() {
) )
} }
return ( return (
<div>
<div className="flex justify-end">
<button className="mr-4 px-2 py-1 hover:bg-gray-300 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
</div>
<div className="p-4 flex flex-col align-between h-full gap-2"> <div className="p-4 flex flex-col align-between h-full gap-2">
{stations.map((s) => ( {stations.map((s) => (
<button onclick={_handleStationClick(s)} className="paper p-2 flex flex-row border gap-4"> <button onclick={_handleStationClick(s)} className="paper p-2 flex flex-row border gap-4">
@ -84,15 +94,20 @@ export function App() {
))} ))}
<button className="bg-white rounded-xl p-2" onclick={() => setNavitation(1)}>+</button> <button className="bg-white rounded-xl p-2" onclick={() => setNavitation(1)}>+</button>
</div> </div>
</div>
) )
} }
if (nav === Navs.ADD) { if (nav === Navs.ADD) {
return ( return (
<div >
<button onclick={() => setNavitation(0)} className="ml-2 px-2 py-1 hover:bg-gray-300 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg>
</button>
<div className="flex flex-col gap-3 p-2"> <div className="flex flex-col gap-3 p-2">
<button className="mr-auto px-2" onclick={() => setNavitation(0)}>Back</button>
<div className="flex flex-col gap-2">
<input ref={titleRef} className="rounded p-1" ariaLabel={"title"} placeholder="Title" /> <input ref={titleRef} className="rounded p-1" ariaLabel={"title"} placeholder="Title" />
<input ref={streamRef} className="rounded p-1" ariaLabel={"url"} placeholder="Stream URL" /> <input ref={streamRef} className="rounded p-1" ariaLabel={"url"} placeholder="Stream URL" />
<input ref={avatarRef} className="rounded p-1" ariaLabel={"avatar"} placeholder="Image URL" /> <input ref={avatarRef} className="rounded p-1" ariaLabel={"avatar"} placeholder="Image URL" />
@ -109,12 +124,16 @@ export function App() {
if (nav === Navs.PLAYER) { if (nav === Navs.PLAYER) {
return ( return (
<div className="bg-gray-100"> <div >
<button onclick={_handlePlayerBackClick} className="px-2">Back</button> <button onclick={_handlePlayerBackClick} className="ml-2 px-2 py-1 hover:bg-gray-300 rounded-full">
<div className="bg-gray-100 p-4 flex justify-center"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<div className="paper p-8 w-80"> <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg>
</button>
<div className="flex justify-center">
<div className="p-8 w-80">
{/*<!-- Album Cover -->*/} {/*<!-- Album Cover -->*/}
<img src={selectedStation?.avatar} alt={selectedStation?.title} className="w-64 h-64 mx-auto rounded-lg mb-4 shadow-lg shadow-teal-50" /> <img src={selectedStation?.avatar} alt={selectedStation?.title} className="w-64 h-64 mx-auto rounded-lg mb-4 shadow-md shadow-black-200" />
{/*<!-- Song Title -->*/} {/*<!-- Song Title -->*/}
<h2 className="text-xl font-semibold text-center">{selectedStation?.title}</h2> <h2 className="text-xl font-semibold text-center">{selectedStation?.title}</h2>
{/*<!-- Artist Name -->*/} {/*<!-- Artist Name -->*/}