aboutsummaryrefslogtreecommitdiff
path: root/components/shared
diff options
context:
space:
mode:
Diffstat (limited to 'components/shared')
-rw-r--r--components/shared/MobileNav.tsx (renamed from components/shared/MobileNav.js)14
-rw-r--r--components/shared/NavBar.tsx (renamed from components/shared/NavBar.js)62
-rw-r--r--components/shared/bugReport.tsx (renamed from components/shared/bugReport.js)13
-rw-r--r--components/shared/changelogs.tsx265
-rw-r--r--components/shared/footer.tsx (renamed from components/shared/footer.js)10
-rw-r--r--components/shared/hamburgerMenu.js192
-rw-r--r--components/shared/loading.js20
-rw-r--r--components/shared/loading.tsx16
8 files changed, 343 insertions, 249 deletions
diff --git a/components/shared/MobileNav.js b/components/shared/MobileNav.tsx
index d0f29c2..7d6dfd6 100644
--- a/components/shared/MobileNav.js
+++ b/components/shared/MobileNav.tsx
@@ -5,8 +5,12 @@ import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
-export default function MobileNav({ hideProfile = false }) {
- const { data: sessions } = useSession();
+type MobileNavProps = {
+ hideProfile?: boolean;
+};
+
+export default function MobileNav({ hideProfile = false }: MobileNavProps) {
+ const { data: sessions }: { data: any } = useSession();
const [isVisible, setIsVisible] = useState(false);
const handleShowClick = () => {
@@ -48,11 +52,11 @@ export default function MobileNav({ hideProfile = false }) {
>
{isVisible && sessions && !hideProfile && (
<Link
- href={`/en/profile/${sessions?.user.name}`}
+ href={`/en/profile/${sessions?.user?.name}`}
className="fixed lg:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]"
>
<Image
- src={sessions?.user.image.large}
+ src={sessions?.user?.image?.large}
alt="user avatar"
width={60}
height={60}
@@ -99,7 +103,7 @@ export default function MobileNav({ hideProfile = false }) {
</button>
{sessions ? (
<button
- onClick={() => signOut("AniListProvider")}
+ onClick={() => signOut({ redirect: true })}
className="group flex gap-[1.5px] flex-col items-center "
>
<div>
diff --git a/components/shared/NavBar.js b/components/shared/NavBar.tsx
index 8cfdfc1..6e8812e 100644
--- a/components/shared/NavBar.js
+++ b/components/shared/NavBar.tsx
@@ -7,14 +7,31 @@ import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
+import { AniListInfoTypes } from "types/info/AnilistInfoTypes";
-const getScrollPosition = (el = window) => ({
- x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
- y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
-});
+const getScrollPosition = (el: Window | Element = window) => {
+ if (el instanceof Window) {
+ return { x: el.pageXOffset, y: el.pageYOffset };
+ } else {
+ return { x: el.scrollLeft, y: el.scrollTop };
+ }
+};
-export function NewNavbar({
- info,
+type NavbarProps = {
+ info?: AniListInfoTypes | null;
+ scrollP?: number;
+ toTop?: boolean;
+ withNav?: boolean;
+ paddingY?: string;
+ home?: boolean;
+ back?: boolean;
+ manga?: boolean;
+ shrink?: boolean;
+ bgHover?: boolean;
+};
+
+export function Navbar({
+ info = null,
scrollP = 200,
toTop = false,
withNav = false,
@@ -23,10 +40,13 @@ export function NewNavbar({
back = false,
manga = false,
shrink = false,
-}) {
- const { data: session } = useSession();
+ bgHover = false,
+}: NavbarProps) {
+ const { data: session }: { data: any } = useSession();
const router = useRouter();
- const [scrollPosition, setScrollPosition] = useState();
+ const [scrollPosition, setScrollPosition] = useState<
+ { x: number; y: number } | undefined
+ >();
const { setIsOpen } = useSearch();
const year = new Date().getFullYear();
@@ -48,8 +68,10 @@ export function NewNavbar({
return (
<>
<nav
- className={`${home ? "" : "fixed"} z-[200] top-0 px-5 w-full ${
- scrollPosition?.y >= scrollP
+ className={`${home ? "" : "fixed"} ${
+ bgHover ? "hover:bg-tersier" : ""
+ } z-[200] top-0 px-5 w-full ${
+ scrollPosition?.y ?? 0 >= scrollP
? home
? ""
: `bg-tersier shadow-tersier shadow-sm ${
@@ -86,7 +108,7 @@ export function NewNavbar({
<span
className={`font-inter font-semibold w-[50%] line-clamp-1 select-none ${
- scrollPosition?.y >= scrollP + 80
+ scrollPosition?.y ?? 0 >= scrollP + 80
? "opacity-100"
: "opacity-0"
} transition-all duration-200 ease-linear`}
@@ -160,7 +182,7 @@ export function NewNavbar({
{session && (
<li className="text-center">
<Link
- href={`/en/profile/${session?.user.name}`}
+ href={`/en/profile/${session?.user?.name}`}
className="hover:text-action/80 transition-all duration-150 ease-linear"
>
My List
@@ -202,28 +224,28 @@ export function NewNavbar({
<button
type="button"
onClick={() =>
- router.push(`/en/profile/${session?.user.name}`)
+ router.push(`/en/profile/${session?.user?.name}`)
}
- className="rounded-full bg-white/30 overflow-hidden"
+ className="rounded-full w-7 h-7 bg-white/30 overflow-hidden"
>
<Image
- src={session?.user.image.large}
+ src={session?.user?.image?.large}
alt="avatar"
width={50}
height={50}
- className="w-full h-full object-cover"
+ className="w-7 h-7 object-cover"
/>
</button>
<div className="hidden absolute z-50 w-28 text-center -bottom-20 text-white shadow-2xl opacity-0 bg-secondary p-1 py-2 rounded-md font-karla font-light invisible group-hover:visible group-hover:opacity-100 duration-300 transition-all md:grid place-items-center gap-1">
<Link
- href={`/en/profile/${session?.user.name}`}
+ href={`/en/profile/${session?.user?.name}`}
className="hover:text-action"
>
Profile
</Link>
<button
type="button"
- onClick={() => signOut("AniListProvider")}
+ onClick={() => signOut({ redirect: true })}
className="hover:text-action"
>
Log out
@@ -254,7 +276,7 @@ export function NewNavbar({
});
}}
className={`${
- scrollPosition?.y >= 180
+ scrollPosition?.y ?? 0 >= 180
? "-translate-x-6 opacity-100"
: "translate-x-[100%] opacity-0"
} transform transition-all duration-300 ease-in-out fixed bottom-24 lg:bottom-14 right-0 z-[500]`}
diff --git a/components/shared/bugReport.js b/components/shared/bugReport.tsx
index f6bd9f1..5c1e3f4 100644
--- a/components/shared/bugReport.js
+++ b/components/shared/bugReport.tsx
@@ -10,7 +10,12 @@ const severityOptions = [
{ id: 4, name: "Critical" },
];
-const BugReportForm = ({ isOpen, setIsOpen }) => {
+interface BugReportFormProps {
+ isOpen: boolean;
+ setIsOpen: (isOpen: boolean) => void;
+}
+
+const BugReportForm: React.FC<BugReportFormProps> = ({ isOpen, setIsOpen }) => {
const [bugDescription, setBugDescription] = useState("");
const [severity, setSeverity] = useState(severityOptions[0]);
@@ -20,7 +25,7 @@ const BugReportForm = ({ isOpen, setIsOpen }) => {
setSeverity(severityOptions[0]);
}
- const handleSubmit = async (e) => {
+ const handleSubmit = async (e: any) => {
e.preventDefault();
const bugReport = {
@@ -44,7 +49,7 @@ const BugReportForm = ({ isOpen, setIsOpen }) => {
const json = await res.json();
toast.success(json.message);
closeModal();
- } catch (err) {
+ } catch (err: any) {
console.log(err);
toast.error("Something went wrong: " + err.message);
}
@@ -94,7 +99,7 @@ const BugReportForm = ({ isOpen, setIsOpen }) => {
<textarea
id="bugDescription"
name="bugDescription"
- rows="4"
+ rows={4}
className={`w-full bg-image text-txt rounded-md border border-txt focus:ring-action focus:border-action transition duration-300 focus:outline-none py-2 px-3`}
placeholder="Describe the bug you encountered..."
value={bugDescription}
diff --git a/components/shared/changelogs.tsx b/components/shared/changelogs.tsx
new file mode 100644
index 0000000..a7b0436
--- /dev/null
+++ b/components/shared/changelogs.tsx
@@ -0,0 +1,265 @@
+import { Dialog, Transition } from "@headlessui/react";
+import Link from "next/link";
+import { Fragment, useEffect, useRef, useState } from "react";
+
+const web = {
+ version: "v4.3.1",
+};
+
+const logs = [
+ {
+ version: "v4.3.1",
+ pre: true,
+ notes: null,
+ highlights: true,
+ changes: [
+ "Fix: Auto Next Episode forcing to play sub even if dub is selected",
+ "Fix: Episode metadata not showing after switching to dub",
+ "Fix: Profile picture weirdly cropped",
+ "Fix: Weird padding on the navbar in profile page",
+ ],
+ },
+ {
+ version: "v4.3.0",
+ pre: true,
+ notes: null,
+ highlights: false,
+ changes: [
+ "Added changelogs section",
+ "Added recommendations based on user lists",
+ "New Player!",
+ "And other minor bug fixes!",
+ ],
+ },
+];
+
+export default function ChangeLogs() {
+ let [isOpen, setIsOpen] = useState(false);
+ let completeButtonRef = useRef(null);
+
+ function closeModal() {
+ localStorage.setItem("version", web.version);
+ setIsOpen(false);
+ }
+
+ function getVersion() {
+ let version = localStorage.getItem("version");
+ if (version !== web.version) {
+ setIsOpen(true);
+ }
+ }
+
+ useEffect(() => {
+ getVersion();
+ }, []);
+
+ return (
+ <>
+ <Transition appear show={isOpen} as={Fragment}>
+ <Dialog
+ as="div"
+ className="relative z-50"
+ onClose={closeModal}
+ initialFocus={completeButtonRef}
+ >
+ <Transition.Child
+ as={Fragment}
+ enter="ease-out duration-300"
+ enterFrom="opacity-0"
+ enterTo="opacity-100"
+ leave="ease-in duration-200"
+ leaveFrom="opacity-100"
+ leaveTo="opacity-0"
+ >
+ <div className="fixed inset-0 bg-black/25" />
+ </Transition.Child>
+
+ <div className="fixed inset-0 overflow-y-auto">
+ <div className="flex min-h-full items-center justify-center p-4 text-center">
+ <Transition.Child
+ as={Fragment}
+ enter="ease-out duration-300"
+ enterFrom="opacity-0 scale-95"
+ enterTo="opacity-100 scale-100"
+ leave="ease-in duration-200"
+ leaveFrom="opacity-100 scale-100"
+ leaveTo="opacity-0 scale-95"
+ >
+ <Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded bg-secondary p-6 text-left align-middle shadow-xl transition-all">
+ <Dialog.Title
+ as="h3"
+ className="text-lg font-medium leading-6 text-gray-100"
+ >
+ <div className="flex justify-between items-center gap-2">
+ <p className="text-xl">Changelogs</p>
+ <div className="flex gap-2 items-center">
+ {/* Github Icon */}
+ <Link
+ href="/github"
+ className="w-5 h-5 hover:opacity-75"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="#fff"
+ viewBox="0 0 20 20"
+ >
+ <g>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ stroke="none"
+ strokeWidth="1"
+ >
+ <g
+ fill="#fff"
+ transform="translate(-140 -7559)"
+ >
+ <g transform="translate(56 160)">
+ <path d="M94 7399c5.523 0 10 4.59 10 10.253 0 4.529-2.862 8.371-6.833 9.728-.507.101-.687-.219-.687-.492 0-.338.012-1.442.012-2.814 0-.956-.32-1.58-.679-1.898 2.227-.254 4.567-1.121 4.567-5.059 0-1.12-.388-2.034-1.03-2.752.104-.259.447-1.302-.098-2.714 0 0-.838-.275-2.747 1.051a9.396 9.396 0 00-2.505-.345 9.375 9.375 0 00-2.503.345c-1.911-1.326-2.751-1.051-2.751-1.051-.543 1.412-.2 2.455-.097 2.714-.639.718-1.03 1.632-1.03 2.752 0 3.928 2.335 4.808 4.556 5.067-.286.256-.545.708-.635 1.371-.57.262-2.018.715-2.91-.852 0 0-.529-.985-1.533-1.057 0 0-.975-.013-.068.623 0 0 .655.315 1.11 1.5 0 0 .587 1.83 3.369 1.21.005.857.014 1.665.014 1.909 0 .271-.184.588-.683.493-3.974-1.355-6.839-5.199-6.839-9.729 0-5.663 4.478-10.253 10-10.253"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </Link>
+ {/* Discord Icon */}
+ <Link
+ href="/discord"
+ className="w-6 h-6 hover:opacity-75"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -28.5 256 256"
+ >
+ <path
+ fill="#fff"
+ d="M216.856 16.597A208.502 208.502 0 00164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0079.735 175.3a136.413 136.413 0 01-21.846-10.632 108.636 108.636 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 005.355 4.237 136.07 136.07 0 01-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"
+ ></path>
+ </svg>
+ </Link>
+ </div>
+ </div>
+ </Dialog.Title>
+ <div className="mt-4">
+ <p className="text-sm text-gray-400">
+ Hi! Welcome to the new changelogs section. Here you can
+ see a lists of the latest changes and updates to the site.
+ </p>
+ <p className="inline-block text-sm italic my-2 text-gray-400">
+ *This update is still in it's pre-release state, please
+ expect to see some bugs. If you find any, please report
+ them.
+ </p>
+ </div>
+
+ {logs.map((x) => (
+ <ChangelogsVersions
+ notes={x.notes}
+ version={x.version}
+ pre={x.pre}
+ key={x.version}
+ >
+ {x.changes.map((i, index) => (
+ <p key={index}>- {i}</p>
+ ))}
+ </ChangelogsVersions>
+ ))}
+
+ {/* <div className="my-2 flex items-center justify-evenly">
+ <div className="w-full h-[1px] bg-gradient-to-r from-white/5 to-white/40" />
+ <p className="relative flex flex-1 whitespace-nowrap font-bold mx-2 font-inter">
+ v4.3.0
+ <span className="flex text-xs font-light font-roboto ml-1 italic">
+ pre
+ </span>
+ </p>
+ <div className="w-full h-[1px] bg-gradient-to-l from-white/5 to-white/40" />
+ </div>
+
+ <div className="flex flex-col gap-2 text-sm text-gray-200">
+ <div>
+ <p className="inline-block italic mb-2 text-gray-400">
+ *This update is still in it's pre-release state, please
+ expect to see some bugs. If you find any, please report
+ them.
+ </p>
+
+ <p>- Added changelogs section</p>
+ <p>- Added recommendations based on user lists</p>
+ <p>- New Player!</p>
+ <p>- And other minor bug fixes!</p>
+ </div>
+ </div> */}
+
+ <div className="mt-2 text-gray-400 text-sm">
+ <p>
+ see more changelogs{" "}
+ <Link href="/changelogs" className="text-blue-500">
+ here
+ </Link>
+ </p>
+ </div>
+
+ <div className="flex items-center gap-2 mt-4">
+ <div className="flex-1" />
+ <button
+ type="button"
+ className="inline-flex justify-center rounded-md border border-transparent bg-action/10 px-4 py-2 text-sm font-medium text-action/90 hover:bg-action/20 focus:outline-none"
+ onClick={closeModal}
+ ref={completeButtonRef}
+ >
+ Got it, thanks!
+ </button>
+ </div>
+ </Dialog.Panel>
+ </Transition.Child>
+ </div>
+ </div>
+ </Dialog>
+ </Transition>
+ </>
+ );
+}
+
+type ChangelogsVersionsProps = {
+ version?: string;
+ pre: boolean;
+ notes?: string | null;
+ highlights?: boolean;
+ children: React.ReactNode;
+};
+
+export function ChangelogsVersions({
+ version,
+ pre,
+ notes,
+ highlights,
+ children,
+}: ChangelogsVersionsProps) {
+ return (
+ <>
+ <div className="my-2 flex items-center justify-evenly">
+ <div className="w-full h-[1px] bg-gradient-to-r from-white/5 to-white/40" />
+ <p className="relative flex flex-1 whitespace-nowrap font-bold mx-2 font-inter">
+ {version}
+ {pre && (
+ <span className="flex text-xs font-light font-roboto ml-1 italic">
+ pre
+ </span>
+ )}
+ </p>
+ <div className="w-full h-[1px] bg-gradient-to-l from-white/5 to-white/40" />
+ </div>
+
+ <div className="flex flex-col gap-2 text-sm py-2 text-gray-200">
+ <div>
+ {notes && (
+ <p className="inline-block italic mb-2 text-gray-400">*{notes}</p>
+ )}
+ {children}
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/components/shared/footer.js b/components/shared/footer.tsx
index a29a3d3..2a513a3 100644
--- a/components/shared/footer.js
+++ b/components/shared/footer.tsx
@@ -76,10 +76,7 @@ function Footer() {
</p>
<div className="flex items-center gap-5">
{/* Github Icon */}
- <Link
- href="https://github.com/Ani-Moopa/Moopa"
- className="w-5 h-5 hover:opacity-75"
- >
+ <Link href="/github" className="w-5 h-5 hover:opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="#fff"
@@ -102,10 +99,7 @@ function Footer() {
</svg>
</Link>
{/* Discord Icon */}
- <Link
- href="https://discord.gg/v5fjSdKwr2"
- className="w-6 h-6 hover:opacity-75"
- >
+ <Link href="/discord" className="w-6 h-6 hover:opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
diff --git a/components/shared/hamburgerMenu.js b/components/shared/hamburgerMenu.js
deleted file mode 100644
index 7e4bdf1..0000000
--- a/components/shared/hamburgerMenu.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import { signIn, signOut, useSession } from "next-auth/react";
-import Image from "next/image";
-import Link from "next/link";
-import React, { useState } from "react";
-
-export default function HamburgerMenu() {
- const { data: session } = useSession();
- const [isVisible, setIsVisible] = useState(false);
- const [fade, setFade] = useState(false);
-
- const handleShowClick = () => {
- setIsVisible(true);
- setFade(true);
- };
-
- const handleHideClick = () => {
- setIsVisible(false);
- setFade(false);
- };
-
- return (
- <React.Fragment>
- {/* Mobile Hamburger */}
- {!isVisible && (
- <button
- onClick={handleShowClick}
- className="fixed bottom-[30px] right-[20px] z-[100] flex h-[51px] w-[50px] cursor-pointer items-center justify-center rounded-[8px] bg-[#17171f] shadow-lg lg:hidden"
- id="bars"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- className="h-[42px] w-[61.5px] text-[#8BA0B2] fill-orange-500"
- viewBox="0 0 20 20"
- fill="currentColor"
- >
- <path
- fillRule="evenodd"
- d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
- clipRule="evenodd"
- />
- </svg>
- </button>
- )}
- <div className={`z-50`}>
- {isVisible && (
- <div className="fixed bottom-[30px] right-[20px] z-50 flex h-[51px] w-[300px] items-center justify-center gap-8 rounded-[8px] text-[11px] bg-[#17171f] shadow-lg lg:hidden">
- <div className="grid grid-cols-4 place-items-center gap-6">
- <button className="group flex flex-col items-center">
- <Link href={`/en/`} className="">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- strokeWidth={1.5}
- stroke="currentColor"
- className="w-6 h-6 group-hover:stroke-action"
- >
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
- />
- </svg>
- </Link>
- <Link
- href={`/en/`}
- className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
- >
- home
- </Link>
- </button>
- <button className="group flex flex-col items-center">
- <Link href={`/en/about`}>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- strokeWidth={1.5}
- stroke="currentColor"
- className="w-6 h-6 group-hover:stroke-action"
- >
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
- />
- </svg>
- </Link>
- <Link
- href={`/en/about`}
- className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
- >
- about
- </Link>
- </button>
- <button className="group flex gap-[1.5px] flex-col items-center ">
- <div>
- <Link href={`/en/search/anime`}>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- strokeWidth={1.5}
- stroke="currentColor"
- className="w-6 h-6 group-hover:stroke-action"
- >
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
- />
- </svg>
- </Link>
- </div>
- <Link
- href={`/en/search/anime`}
- className="font-karla font-bold text-[#8BA0B2] group-hover:text-action"
- >
- search
- </Link>
- </button>
- {session ? (
- <button
- onClick={() => signOut("AniListProvider")}
- className="group flex gap-[1.5px] flex-col items-center "
- >
- <div>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 96 960 960"
- className="group-hover:fill-action w-6 h-6 fill-txt"
- >
- <path d="M186.666 936q-27 0-46.833-19.833T120 869.334V282.666q0-27 19.833-46.833T186.666 216H474v66.666H186.666v586.668H474V936H186.666zm470.668-176.667l-47-48 102-102H370v-66.666h341.001l-102-102 46.999-48 184 184-182.666 182.666z"></path>
- </svg>
- </div>
- <h1 className="font-karla font-bold text-[#8BA0B2] group-hover:text-action">
- logout
- </h1>
- </button>
- ) : (
- <button
- onClick={() => signIn("AniListProvider")}
- className="group flex gap-[1.5px] flex-col items-center "
- >
- <div>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 96 960 960"
- className="group-hover:fill-action w-6 h-6 fill-txt mr-2"
- >
- <path d="M486 936v-66.666h287.334V282.666H486V216h287.334q27 0 46.833 19.833T840 282.666v586.668q0 27-19.833 46.833T773.334 936H486zm-78.666-176.667l-47-48 102-102H120v-66.666h341l-102-102 47-48 184 184-182.666 182.666z"></path>
- </svg>
- </div>
- <h1 className="font-karla font-bold text-[#8BA0B2] group-hover:text-action">
- login
- </h1>
- </button>
- )}
- </div>
- <button onClick={handleHideClick}>
- <svg
- width="20"
- height="21"
- className="fill-orange-500"
- viewBox="0 0 20 21"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <rect
- x="2.44043"
- y="0.941467"
- width="23.5842"
- height="3.45134"
- rx="1.72567"
- transform="rotate(45 2.44043 0.941467)"
- />
- <rect
- x="19.1172"
- y="3.38196"
- width="23.5842"
- height="3.45134"
- rx="1.72567"
- transform="rotate(135 19.1172 3.38196)"
- />
- </svg>
- </button>
- </div>
- )}
- </div>
- </React.Fragment>
- );
-}
diff --git a/components/shared/loading.js b/components/shared/loading.js
deleted file mode 100644
index 4620645..0000000
--- a/components/shared/loading.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Image from "next/image";
-
-export default function Loading() {
- return (
- <>
- <div className="flex flex-col gap-5 items-center justify-center w-full z-[800]">
- {/* <Image
- src="/wait-animation.gif"
- width="0"
- height="0"
- className="w-[30%] h-[30%]"
- /> */}
- <div className="flex flex-col items-center font-karla gap-2">
- <p>Please Wait...</p>
- <div className="loader"></div>
- </div>
- </div>
- </>
- );
-}
diff --git a/components/shared/loading.tsx b/components/shared/loading.tsx
new file mode 100644
index 0000000..902b6f9
--- /dev/null
+++ b/components/shared/loading.tsx
@@ -0,0 +1,16 @@
+export default function Loading() {
+ return (
+ <div className="flex-center flex-col font-karla z-40 gap-2">
+ {/* <div className="flex flex-col gap-5 items-center justify-center w-full z-50"> */}
+ {/* <Image
+ src="/wait-animation.gif"
+ width="0"
+ height="0"
+ className="w-[30%] h-[30%]"
+ /> */}
+ <p>Please Wait...</p>
+ <div className="loader"></div>
+ {/* </div> */}
+ </div>
+ );
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-13 16:48:34 +0000