blob: 93f7b266193680d442510729a2570d6f075d6d15 (
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
|
import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { getCurrentSeason } from "../../utils/getTimes";
import Link from "next/link";
import { parseCookies } from "nookies";
export default function Navigasi() {
const { data: sessions, status } = useSession();
const [year, setYear] = useState(new Date().getFullYear());
const [season, setSeason] = useState(getCurrentSeason());
const [lang, setLang] = useState("en");
const [cookie, setCookies] = useState(null);
const router = useRouter();
useEffect(() => {
let lang = null;
if (!cookie) {
const cookie = parseCookies();
lang = cookie.lang || null;
setCookies(cookie);
}
if (lang === "en" || lang === null) {
setLang("en");
} else if (lang === "id") {
setLang("id");
}
}, []);
const handleFormSubmission = (inputValue) => {
router.push(`/${lang}/search/${encodeURIComponent(inputValue)}`);
};
const handleKeyDown = async (event) => {
if (event.key === "Enter") {
event.preventDefault();
const inputValue = event.target.value;
handleFormSubmission(inputValue);
}
};
return (
<>
{/* NAVBAR PC */}
<div className="flex items-center justify-center">
<div className="flex w-full items-center justify-between px-5 lg:mx-[94px]">
<div className="flex items-center lg:gap-16 lg:pt-7">
<Link
href="/en/"
className=" font-outfit lg:text-[40px] text-[30px] font-bold text-[#FF7F57]"
>
moopa
</Link>
<ul className="hidden items-center gap-10 pt-2 font-outfit text-[14px] lg:flex">
<li>
<Link
href={`/en/search/anime?season=${season}&seasonYear=${year}`}
>
This Season
</Link>
</li>
<li>
<Link href="/en/search/manga">Manga</Link>
</li>
<li>
<Link href="/en/search/anime">Anime</Link>
</li>
{status === "loading" ? (
<li>Loading...</li>
) : (
<>
{!sessions && (
<li>
<button
onClick={() => signIn("AniListProvider")}
className="ring-1 ring-action font-karla font-bold px-2 py-1 rounded-md"
>
Sign in
</button>
</li>
)}
{sessions && (
<li className="text-center">
<Link href={`/en/profile/${sessions?.user.name}`}>
My List
</Link>
</li>
)}
</>
)}
</ul>
</div>
<div className="relative flex lg:scale-75 scale-[65%] items-center mb-7 lg:mb-1">
<div className="search-box ">
<input
className="search-text"
type="text"
placeholder="Search Anime"
onKeyDown={handleKeyDown}
/>
<div className="search-btn">
<i className="fas fa-search"></i>
</div>
</div>
</div>
</div>
</div>
</>
);
}
|