aboutsummaryrefslogtreecommitdiff
path: root/components/manga/info/mobile/mobileButton.js
blob: 0016b595e72186b2f9cf8ecd0072708009be712d (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
import Link from "next/link";
import AniList from "../../../media/aniList";
import { BookOpenIcon } from "@heroicons/react/24/outline";

export default function MobileButton({ info, firstEp, saveManga }) {
  return (
    <div className="md:hidden flex items-center gap-4 w-full pb-3">
      <button
        disabled={!firstEp}
        onClick={saveManga}
        className={`${
          !firstEp
            ? "pointer-events-none text-white/50 bg-secondary/50"
            : "bg-secondary text-white"
        } lg:w-full font-bold shadow-md shadow-secondary hover:bg-secondary/90 hover:text-white/50 rounded`}
      >
        <Link
          href={`/en/manga/read/${firstEp?.providerId}?id=${
            info.id
          }&chapterId=${encodeURIComponent(
            firstEp?.chapters[firstEp.chapters.length - 1].id
          )}`}
          className="flex items-center text-xs font-karla gap-2 h-[30px] px-2"
        >
          <h1>Read Now</h1>
          <BookOpenIcon className="w-4 h-4" />
        </Link>
      </button>
      <Link
        href={`https://anilist.co/manga/${info.id}`}
        className="flex-center rounded bg-secondary shadow-md shadow-secondary h-[30px] lg:px-4 px-2"
      >
        <div className="flex-center w-5 h-5">
          <AniList />
        </div>
      </Link>
    </div>
  );
}