1 files changed, 129 insertions, 0 deletions
diff --git a/src/app/web-series/components/descriptionTabs.jsx b/src/app/web-series/components/descriptionTabs.jsx
new file mode 100644
index 0000000..ec6a78b
--- /dev/null
+++ b/src/app/web-series/components/descriptionTabs.jsx
@@ -0,0 +1,129 @@
+"use client";
+
+import {
+	Tabs,
+	Tab,
+	Card,
+	CardBody,
+	Link,
+	Image,
+	Chip,
+} from "@nextui-org/react";
+import { FiThumbsUp } from "react-icons/fi";
+import { TiStarFullOutline } from "react-icons/ti";
+
+import { lexend, atkinson } from "../../../../config/fonts";
+
+export default function SeriesDescriptionTabs({ data: data }) {
+	return (
+		<div className="flex w-full flex-col">
+			<Tabs aria-label="Options" className={lexend.className}>
+				<Tab key="description" title="Description">
+					<Card>
+						<CardBody className={atkinson.className}>
+							{data.overview || "No description found"}
+						</CardBody>
+					</Card>
+				</Tab>
+				<Tab key="episodes" title="Details">
+					<Card>
+						<CardBody className={lexend.className}>
+							<h4>
+								<strong>Tagline</strong>:{" "}
+								<span>{data.tagline || "not sure"}</span>
+							</h4>
+							<h4>
+								<strong>Homepage</strong>:{" "}
+								<span>
+									<Link
+										color="warning"
+										isExternal
+										href={data.homepage || ""}
+									>
+										{data.homepage || "not sure"}
+									</Link>
+								</span>
+							</h4>
+							<h4>
+								<strong className="text-success">
+									Episodes:
+								</strong>{" "}
+								<span>
+									{data.number_of_episodes || "not sure"}
+								</span>
+							</h4>
+							<h4>
+								<strong className="text-secondary">
+									Seasons:
+								</strong>{" "}
+								<span>
+									{data.number_of_seasons || "not sure"}
+								</span>
+							</h4>
+							<h4>
+								<strong>Status</strong>:{" "}
+								<span>{data.status || "not sure"}</span>
+							</h4>
+							<h4>
+								<strong>Released on</strong>:{" "}
+								<span>{data.first_air_date || "not sure"}</span>
+							</h4>
+							<h4 className="flex items-center">
+								<strong>
+									<FiThumbsUp />
+								</strong>
+								<span className="ml-2">
+									{data.vote_count || "not sure"}
+								</span>
+								<strong className="ml-3">
+									<TiStarFullOutline />
+								</strong>
+								<span className="ml-2">
+									{data.vote_average || "not sure"}
+								</span>
+							</h4>
+						</CardBody>
+					</Card>
+				</Tab>
+				<Tab key="seasons" title="Seasons">
+					<Card>
+						<CardBody>
+							{data.seasons &&
+								data.seasons.map((item, index) => (
+									<Card
+										key={index}
+										className="flex flex-row items-center mb-1"
+										isPressable
+										shadow="lg"
+									>
+										<Image
+											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
+											width={100}
+											isBlurred
+											shadow="lg"
+											className="p-1"
+										></Image>
+										<CardBody className="ml-1">
+											<p className="text-sky-400">
+												{item.name}
+											</p>
+											<Chip
+												color="warning"
+												size="sm"
+												variant="faded"
+												className="mt-1"
+											>
+												{item.air_date
+													? item.air_date
+													: "TBD	"}
+											</Chip>
+										</CardBody>
+									</Card>
+								))}
+						</CardBody>
+					</Card>
+				</Tab>
+			</Tabs>
+		</div>
+	);
+}