blob: d0a494592c51879b46b6e29435a3dd4b39d40f28 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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 shadow="sm">
<CardBody className={atkinson.className}>
{data.overview || "No description found"}
</CardBody>
</Card>
</Tab>
<Tab key="episodes" title="Details">
<Card shadow="sm">
<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 shadow="sm">
<CardBody>
{data.seasons &&
data.seasons.map((item, index) => (
<Card
key={index}
className="flex flex-row items-center mb-1"
isPressable
shadow="sm"
>
<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>
);
}
|