✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured

1 files changed, 83 insertions, 0 deletions

diff --git a/src/app/kdrama/components/episodesContainer.jsx b/src/app/kdrama/components/episodesContainer.jsx
new file mode 100644
index 0000000..984ece5
--- /dev/null
+++ b/src/app/kdrama/components/episodesContainer.jsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/default/theme.css";
+import "@vidstack/react/player/styles/default/layouts/video.css";
+import {
+	defaultLayoutIcons,
+	DefaultVideoLayout,
+} from "@vidstack/react/player/layouts/default";
+import { Select, SelectItem, Button, Skeleton } from "@nextui-org/react";
+import { useState, useEffect } from "react";
+
+import { lexend } from "../../../../config/fonts";
+import { videoLink } from "./requests";
+
+const EpisodesContainer = ({ data: data }) => {
+	const [videolink, setVideoLink] = useState("");
+	const [loading, setLoading] = useState(<></>);
+
+	async function handleSelectChange(episodeId) {
+		setVideoLink("");
+		setLoading(
+			<div className="w-full flex items-center gap-3">
+				<div className="w-full flex flex-col gap-2">
+					<Skeleton className="h-44 rounded-lg lg:h-96" />
+				</div>
+			</div>
+		);
+		const videoURL = await videoLink(episodeId, data.id);
+		setLoading(<></>);
+		setVideoLink(videoURL);
+	}
+
+	return (
+		<section>
+			<div className="flex w-full flex-wrap md:flex-nowrap gap-4 my-2">
+				<Select
+					label="Select Episode"
+					className={`${lexend.className} max-w-xs`}
+				>
+					{data.episodes && data.episodes.length > 0 ? (
+						data.episodes.map((item, index) => (
+							<SelectItem
+								key={index}
+								textValue={item.episode}
+								onClick={async () =>
+									await handleSelectChange(item.id)
+								}
+								className={lexend.className}
+							>
+								{item.episode}
+							</SelectItem>
+						))
+					) : (
+						<SelectItem disabled className={lexend.className}>
+							No episodes available right now
+						</SelectItem>
+					)}
+				</Select>
+			</div>
+
+			{loading}
+			{videolink && (
+				<div>
+					<MediaPlayer
+						title={data.title}
+						src={videolink}
+						aspectRatio="16/9"
+						load="eager"
+						playsInline
+						volume={0.8}
+						autoPlay
+					>
+						<MediaProvider />
+						<DefaultVideoLayout icons={defaultLayoutIcons} />
+					</MediaPlayer>
+				</div>
+			)}
+		</section>
+	);
+};
+
+export default EpisodesContainer;