- UI

- Created <StationPlayer>
  - Minor responsive styling tweaks

app/components/station-player.tsx

@@ -0,0 +1,20 @@
+import type { StationWithTags } from "~/models/station.server";
+import type { ConvertDatesToStrings } from "~/utils";
+
+export type StationPlayerProps = {
+    station: ConvertDatesToStrings<NonNullable<StationWithTags>>
+};
+
+export function StationPlayer({ station }: StationPlayerProps) {
+    return (
+        <div
+            className="fixed bottom-0 left-0 w-full h-[70px] px-4 py-2 z-50 flex justify-end content-center items-center gap-2"
+            data-theme="aqua">
+            <h3 className="text-xl">Now Playing: <strong>{station.name}</strong></h3>
+
+            <audio controls autoPlay src={station.streamUrl}>
+                Your browser does not support the audio element.
+            </audio>
+        </div>
+    );
+}

app/components/stations-gallery.tsx

@@ -23,10 +23,10 @@ export function StationsGallery({ stations, tag, channel }: StationsGalleryProps
     }
 
     return (
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
             {stations.map((station) => {
                 return (
-                    <div key={station.id} className="card card-compact bg-base-100 shadow-xl">
+                    <div key={station.id} className="card card-compact bg-base-100 shadow-xl mb-[70px]">
                         <figure><img src={station.imgUrl} alt="Radio Station" /></figure>
                         <div className="card-body">
                             <h2 className="card-title">

app/routes/listen.channel.$channel.$station.tsx

@@ -1,6 +1,7 @@
 import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
+import { StationPlayer } from "~/components/station-player";
 import { getStationById } from "~/models/station.server";
 import { notFound } from "~/utils";
 
@@ -19,15 +20,8 @@ export async function loader({ params }: LoaderArgs) {
 
 export default function ListenChanelStation() {
     const { station } = useLoaderData<typeof loader>();
-
     return (
-        <div className="fixed bottom-0 left-0 w-full h-[70px] px-4 py-2 z-50 flex justify-end"
-             data-theme="aqua">
-
-            <audio controls autoPlay src={station.streamUrl}>
-                Your browser does not support the audio element.
-            </audio>
-        </div>
+        <StationPlayer station={station} />
     );
 
 }