blob: e9c9c7dbeda16cc455375b271a824b92b02279b5 (
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
|
import { HeartIcon } from "@heroicons/react/20/solid";
import {
TvIcon,
ArrowTrendingUpIcon,
RectangleStackIcon,
} from "@heroicons/react/24/outline";
export default function DetailTop({ info, statuses, handleOpen, loading }) {
return (
<div className="lg:hidden pt-5 w-screen px-5 flex flex-col">
<div className="h-[250px] flex flex-col gap-1 justify-center">
<h1 className="font-karla font-extrabold text-lg line-clamp-1 w-[70%]">
{info?.title?.romaji || info?.title?.english}
</h1>
<p
className="line-clamp-2 text-sm font-light antialiased w-[56%]"
dangerouslySetInnerHTML={{ __html: info?.description }}
/>
<div className="font-light flex gap-1 py-1 flex-wrap font-outfit text-[10px] text-[#ffffff] w-[70%]">
{info?.genres
?.slice(0, info?.genres?.length > 3 ? info?.genres?.length : 3)
.map((item, index) => (
<span
key={index}
className="px-2 py-1 bg-secondary shadow-lg font-outfit font-light rounded-full"
>
<span>{item}</span>
</span>
))}
</div>
{info && (
<div className="flex items-center gap-5 pt-3 text-center">
<div className="flex items-center gap-2 text-center">
<button
type="button"
className="bg-action px-10 rounded-sm font-karla font-bold"
onClick={() => handleOpen()}
>
{!loading
? statuses
? statuses.name
: "Add to List"
: "Loading..."}
</button>
<div className="h-6 w-6">
<HeartIcon />
</div>
</div>
</div>
)}
</div>
<div className="bg-secondary rounded-sm xs:h-[30px]">
<div className="grid grid-cols-3 place-content-center xxs:flex items-center justify-center h-full xxs:gap-10 p-2 text-sm">
{info && info.status !== "NOT_YET_RELEASED" ? (
<>
<div className="flex-center flex-col xxs:flex-row gap-2">
<TvIcon className="w-5 h-5 text-action" />
<h4 className="font-karla">{info?.type}</h4>
</div>
<div className="flex-center flex-col xxs:flex-row gap-2">
<ArrowTrendingUpIcon className="w-5 h-5 text-action" />
<h4>{info?.averageScore ? `${info?.averageScore}%` : "N/A"}</h4>
</div>
<div className="flex-center flex-col xxs:flex-row gap-2">
<RectangleStackIcon className="w-5 h-5 text-action" />
{info?.episodes ? (
<h1>{info?.episodes} Episodes</h1>
) : (
<h1>N/A</h1>
)}
</div>
</>
) : (
<div>{info && "Not Yet Released"}</div>
)}
</div>
</div>
</div>
);
}
|