aboutsummaryrefslogtreecommitdiff
path: root/src/app/anime/components/infoTabs.jsx
diff options
context:
space:
mode:
authorreal-zephex <[email protected]>2024-05-24 22:51:36 +0530
committerreal-zephex <[email protected]>2024-05-24 22:51:36 +0530
commit180c9577f8337991ca71470816333fe8430cd3ca (patch)
tree82caa5a920443bcf0db3746c7ecacd968d4fc148 /src/app/anime/components/infoTabs.jsx
parentstyle: minor improvements to the anime cards (diff)
downloaddramalama-180c9577f8337991ca71470816333fe8430cd3ca.tar.xz
dramalama-180c9577f8337991ca71470816333fe8430cd3ca.zip
✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured
Diffstat (limited to 'src/app/anime/components/infoTabs.jsx')
-rw-r--r--src/app/anime/components/infoTabs.jsx46
1 files changed, 46 insertions, 0 deletions
diff --git a/src/app/anime/components/infoTabs.jsx b/src/app/anime/components/infoTabs.jsx
new file mode 100644
index 0000000..68a1da1
--- /dev/null
+++ b/src/app/anime/components/infoTabs.jsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { Tabs, Tab, Card, CardBody } from "@nextui-org/react";
+
+import { lexend, atkinson } from "../../../../config/fonts";
+
+export default function DescriptionTabs({ 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.description || "No description found"}
+ </CardBody>
+ </Card>
+ </Tab>
+ <Tab key="episodes" title="Details">
+ <Card>
+ <CardBody className={atkinson.className}>
+ <h4>
+ <strong>Episodes</strong>:{" "}
+ <span>{data.totalEpisodes}</span>
+ </h4>
+ <h4>
+ <strong>Type</strong>: <span>{data.type}</span>
+ </h4>
+ <h4>
+ <strong>SUB/DUB</strong>:{" "}
+ <span>{data.subOrDub.toUpperCase()}</span>
+ </h4>
+ <h4>
+ <strong>Status</strong>:{" "}
+ <span>{data.status}</span>
+ </h4>
+ <h4>
+ <strong>Release Year</strong>:{" "}
+ <span>{data.releaseDate}</span>
+ </h4>
+ </CardBody>
+ </Card>
+ </Tab>
+ </Tabs>
+ </div>
+ );
+}