“use client”;
import React from “react”;
function MainComponent() {
const [currentTime, setCurrentTime] = useState(new Date());
const [shows] = useState([
{
id: 1,
name: “Morning Jazz”,
host: “DJ Sarah”,
startTime: “06:00”,
endTime: “09:00”,
image: “/show1.jpg”,
},
{
id: 2,
name: “News Hour”,
host: “John Smith”,
startTime: “09:00”,
endTime: “10:00”,
image: “/show2.jpg”,
},
{
id: 3,
name: “Rock Block”,
host: “Mike Thunder”,
startTime: “10:00”,
endTime: “13:00”,
image: “/show3.jpg”,
},
{
id: 4,
name: “Afternoon Mix”,
host: “Lisa Ray”,
startTime: “13:00”,
endTime: “16:00”,
image: “/show4.jpg”,
},
{
id: 5,
name: “Evening Drive”,
host: “Pete Jones”,
startTime: “16:00”,
endTime: “19:00”,
image: “/show5.jpg”,
},
{
id: 6,
name: “Night Vibes”,
host: “DJ Luna”,
startTime: “19:00”,
endTime: “22:00”,
image: “/show6.jpg”,
},
]);
useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
const getCurrentShow = () => {
const currentHour = currentTime.getHours();
const currentMinutes = currentTime.getMinutes();
const currentTimeString = `${currentHour
.toString()
.padStart(2, “0”)}:${currentMinutes.toString().padStart(2, “0”)}`;
return shows.find((show) => {
const [startHour] = show.startTime.split(“:”);
const [endHour] = show.endTime.split(“:”);
return (
currentHour >= parseInt(startHour) && currentHour < parseInt(endHour)
);
});
};
const getUpcomingShows = () => {
const currentHour = currentTime.getHours();
return shows.filter((show) => {
const [startHour] = show.startTime.split(“:”);
return parseInt(startHour) > currentHour;
});
};
const currentShow = getCurrentShow();
const upcomingShows = getUpcomingShows();
return (
Radio Schedule
{/* Now Playing */}
Now Playing
{currentShow ? (
{currentShow.name}
with {currentShow.host}
{currentShow.startTime} – {currentShow.endTime}
On Air
) : (
No show currently playing
)}
{/* Ad Banner */}
Special Offer!
Get 20% off on your first purchase
{/* Upcoming Shows */}
Coming Up Next
{upcomingShows.map((show) => (
{show.name}
with {show.host}
{show.startTime} – {show.endTime}
))}
{/* Mid-page Ad */}
Sponsored
Support your local businesses
{/* All Shows Today */}
Today’s Schedule
{shows.map((show) => (
{show.startTime}
{show.name}
with {show.host}
))}
{/* Bottom Ad Banner */}
);
}
export default MainComponent;
