diff options
| author | zephex <[email protected]> | 2024-04-20 13:34:53 +0530 |
|---|---|---|
| committer | zephex <[email protected]> | 2024-04-20 13:34:53 +0530 |
| commit | d6780cf3dad729c69a102ba2940188cf1e6bcbf4 (patch) | |
| tree | d10a2aefef6664c42439f165c73722c514b032bc /src/app/manga | |
| parent | feature added: tracker for mangas (diff) | |
| download | dramalama-d6780cf3dad729c69a102ba2940188cf1e6bcbf4.tar.xz dramalama-d6780cf3dad729c69a102ba2940188cf1e6bcbf4.zip | |
idk whats happening
Diffstat (limited to 'src/app/manga')
| -rw-r--r-- | src/app/manga/[title]/[id]/[read]/currentReading.jsx | 68 | ||||
| -rw-r--r-- | src/app/manga/[title]/[id]/[read]/download.jsx | 42 | ||||
| -rw-r--r-- | src/app/manga/[title]/[id]/[read]/page.jsx | 112 | ||||
| -rw-r--r-- | src/app/manga/[title]/[id]/[read]/read.module.css | 128 | ||||
| -rw-r--r-- | src/app/manga/[title]/[id]/buttons.jsx | 108 | ||||
| -rw-r--r-- | src/app/manga/[title]/[id]/info.module.css | 446 | ||||
| -rw-r--r-- | src/app/manga/[title]/[id]/page.jsx | 272 | ||||
| -rw-r--r-- | src/app/manga/[title]/page.jsx | 156 | ||||
| -rw-r--r-- | src/app/manga/[title]/title.module.css | 148 | ||||
| -rw-r--r-- | src/app/manga/cacher.js | 64 | ||||
| -rw-r--r-- | src/app/manga/history/continueWatching/cw.module.css | 148 | ||||
| -rw-r--r-- | src/app/manga/history/continueWatching/page.jsx | 140 | ||||
| -rw-r--r-- | src/app/manga/history/storeData.js | 56 | ||||
| -rw-r--r-- | src/app/manga/loading.jsx | 18 | ||||
| -rw-r--r-- | src/app/manga/loading.module.css | 42 | ||||
| -rw-r--r-- | src/app/manga/manga.module.css | 124 | ||||
| -rw-r--r-- | src/app/manga/page.jsx | 40 | ||||
| -rw-r--r-- | src/app/manga/searchBar.jsx | 90 |
18 files changed, 1101 insertions, 1101 deletions
diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx index 0050d61..5205ea9 100644 --- a/src/app/manga/[title]/[id]/[read]/currentReading.jsx +++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx @@ -1,34 +1,34 @@ -"use client"; - -import styles from "./read.module.css"; -import { useEffect } from "react"; - -function get_current_info(title) { - let req = {}; - - useEffect(() => { - const data = JSON.parse(localStorage.getItem("mangaData")); - data.watchHis.forEach((element) => { - if (element.title === title) { - req.chapter = element.chapter; - req.volume = element.volume; - } - }); - }, []); - - return req || false; -} - -export default function Current({ name: title }) { - let data = get_current_info(title); - if (!data) { - return; - } - - return ( - <section className={styles.CurrentMain}> - <p className={styles.CurrentChapter}>{data.chapter}</p> - <p className={styles.CurrentVolume}>{data.volume}</p> - </section> - ); -} +"use client";
+
+import styles from "./read.module.css";
+import { useEffect } from "react";
+
+function get_current_info(title) {
+ let req = {};
+
+ useEffect(() => {
+ const data = JSON.parse(localStorage.getItem("mangaData"));
+ data.watchHis.forEach((element) => {
+ if (element.title === title) {
+ req.chapter = element.chapter;
+ req.volume = element.volume;
+ }
+ });
+ }, []);
+
+ return req || false;
+}
+
+export default function Current({ name: title }) {
+ let data = get_current_info(title);
+ if (!data) {
+ return;
+ }
+
+ return (
+ <section className={styles.CurrentMain}>
+ <p className={styles.CurrentChapter}>{data.chapter}</p>
+ <p className={styles.CurrentVolume}>{data.volume}</p>
+ </section>
+ );
+}
diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx index e7a20ee..bddf6d3 100644 --- a/src/app/manga/[title]/[id]/[read]/download.jsx +++ b/src/app/manga/[title]/[id]/[read]/download.jsx @@ -1,21 +1,21 @@ -"use client"; - -import styles from "./read.module.css"; - -export default function DownloadManga({ chapterId: id }) { - return ( - <div className={styles.DownloadMain}> - <a - href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`} - style={{ textDecoration: "none" }} - onClick={() => - alert( - "Downloads are not instant. It might take some time to prepare your file. Thank you for your patience" - ) - } - > - <button title="should work just fine">Download - Beta</button> - </a> - </div> - ); -} +"use client";
+
+import styles from "./read.module.css";
+
+export default function DownloadManga({ chapterId: id }) {
+ return (
+ <div className={styles.DownloadMain}>
+ <a
+ href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`}
+ style={{ textDecoration: "none" }}
+ onClick={() =>
+ alert(
+ "Downloads are not instant. It might take some time to prepare your file. Thank you for your patience"
+ )
+ }
+ >
+ <button title="should work just fine">Download - Beta</button>
+ </a>
+ </div>
+ );
+}
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx index dbba6e0..a4181d7 100644 --- a/src/app/manga/[title]/[id]/[read]/page.jsx +++ b/src/app/manga/[title]/[id]/[read]/page.jsx @@ -1,56 +1,56 @@ -import styles from "./read.module.css"; -import Image from "next/image"; -import DownloadManga from "./download"; - -export default async function Read({ params }) { - const chapterId = params.read; - const results = await getPages(chapterId); - const image_base_url = results.baseUrl + "/data/" + results.chapter.hash; - - if (results.length === 0) { - return ( - <div className={styles.NotFound}> - <p> - This chapter has no content. Please check the next chapter. - </p> - </div> - ); - } - - let images = []; - for (var i = 0; i < results.chapter.data.length; i++) { - var imgUrl = image_base_url + "/" + results.chapter.data[i]; - images.push(imgUrl); - } - - return ( - <div className={styles.Main}> - <div className={styles.ImageContainer}> - <DownloadManga chapterId={chapterId} /> - <p>Total pages: {images.length}</p> - {images && - images.map((item, index) => ( - <div className={styles.Image} key={index}> - <Image - src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item}`} - key={index} - alt="Pages" - width={800} - height={1000} - priority - quality={100} - unoptimized - /> - <p>{index + 1}</p> - </div> - ))} - </div> - </div> - ); -} - -async function getPages(id) { - const res = await fetch(`https://api.mangadex.org/at-home/server/${id}`); - const data = await res.json(); - return data; -} +import styles from "./read.module.css";
+import Image from "next/image";
+import DownloadManga from "./download";
+
+export default async function Read({ params }) {
+ const chapterId = params.read;
+ const results = await getPages(chapterId);
+ const image_base_url = results.baseUrl + "/data/" + results.chapter.hash;
+
+ if (results.length === 0) {
+ return (
+ <div className={styles.NotFound}>
+ <p>
+ This chapter has no content. Please check the next chapter.
+ </p>
+ </div>
+ );
+ }
+
+ let images = [];
+ for (var i = 0; i < results.chapter.data.length; i++) {
+ var imgUrl = image_base_url + "/" + results.chapter.data[i];
+ images.push(imgUrl);
+ }
+
+ return (
+ <div className={styles.Main}>
+ <div className={styles.ImageContainer}>
+ <DownloadManga chapterId={chapterId} />
+ <p>Total pages: {images.length}</p>
+ {images &&
+ images.map((item, index) => (
+ <div className={styles.Image} key={index}>
+ <Image
+ src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item}`}
+ key={index}
+ alt="Pages"
+ width={800}
+ height={1000}
+ priority
+ quality={100}
+ unoptimized
+ />
+ <p>{index + 1}</p>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+async function getPages(id) {
+ const res = await fetch(`https://api.mangadex.org/at-home/server/${id}`);
+ const data = await res.json();
+ return data;
+}
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css index 420fff8..0133232 100644 --- a/src/app/manga/[title]/[id]/[read]/read.module.css +++ b/src/app/manga/[title]/[id]/[read]/read.module.css @@ -1,65 +1,65 @@ -.Main { - margin: 80px auto; -} - -.Image { - display: flex; - flex-direction: column; - align-items: center; - background-color: #1b1b1b; - border-radius: 10px; - width: 50%; - margin: 10px auto; -} - -.ImageContainer img { - max-width: auto; - height: auto; - border-radius: 5px; - margin-top: 10px; -} - -.ImageContainer p { - text-align: center; - color: white; - font-family: "Atkinson Hyperlegible", serif; - font-size: 16px; - margin: 5px; -} - -.NotFound { - text-align: center; - color: white; - font-family: "Atkinson Hyperlegible", serif; - font-size: 20px; -} - -.DownloadMain { - text-align: center; -} - -.DownloadMain button { - border: none; - outline: none; - border-radius: 5px; - padding: 5px; - font-family: "Atkinson Hyperlegible", serif; - font-size: 16px; - background-color: var(--light-green); - cursor: pointer; -} - -.DownloadMain button:hover { - background-color: var(--pastel-red); -} - -@media screen and (max-width: 768px) { - .ImageContainer img { - width: 95%; - align-items: center; - } - - .Image { - width: 100%; - } +.Main {
+ margin: 80px auto;
+}
+
+.Image {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #1b1b1b;
+ border-radius: 10px;
+ width: 50%;
+ margin: 10px auto;
+}
+
+.ImageContainer img {
+ max-width: auto;
+ height: auto;
+ border-radius: 5px;
+ margin-top: 10px;
+}
+
+.ImageContainer p {
+ text-align: center;
+ color: white;
+ font-family: "Atkinson Hyperlegible", serif;
+ font-size: 16px;
+ margin: 5px;
+}
+
+.NotFound {
+ text-align: center;
+ color: white;
+ font-family: "Atkinson Hyperlegible", serif;
+ font-size: 20px;
+}
+
+.DownloadMain {
+ text-align: center;
+}
+
+.DownloadMain button {
+ border: none;
+ outline: none;
+ border-radius: 5px;
+ padding: 5px;
+ font-family: "Atkinson Hyperlegible", serif;
+ font-size: 16px;
+ background-color: var(--light-green);
+ cursor: pointer;
+}
+
+.DownloadMain button:hover {
+ background-color: var(--pastel-red);
+}
+
+@media screen and (max-width: 768px) {
+ .ImageContainer img {
+ width: 95%;
+ align-items: center;
+ }
+
+ .Image {
+ width: 100%;
+ }
}
\ No newline at end of file diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx index 4c11705..a6c8d75 100644 --- a/src/app/manga/[title]/[id]/buttons.jsx +++ b/src/app/manga/[title]/[id]/buttons.jsx @@ -1,54 +1,54 @@ -"use client"; - -import styles from "./info.module.css"; -import Link from "next/link"; -import { storeLocal } from "../../history/storeData"; - -export default function Buttons({ content: data }) { - function store_to_local(title, chapter, volume, image, id, id2) { - let data = { - title: title, - chapter: chapter, - volume: volume, - image: image, - id: id, - mangaId: id2, - }; - storeLocal(data); - } - - return ( - <div className={styles.ChapterContainer}> - {data.chapters && - data.chapters.map((item, index) => { - if (item.pages !== 0) { - return ( - <Link - key={index} - href={{ - pathname: `/manga/info/read/${item.id}`, - }} - onClick={() => { - store_to_local( - data.title.english || data.title.romaji, - parseInt(item.chapterNumber), - parseInt(item.volumeNumber), - data.image, - item.id, - data.id - ); - }} - > - <button key={index}> - <div> - <p>Chapter: {item.chapterNumber}</p> - <p>Volume: {item.volumeNumber}</p> - </div> - </button> - </Link> - ); - } - })} - </div> - ); -} +"use client";
+
+import styles from "./info.module.css";
+import Link from "next/link";
+import { storeLocal } from "../../history/storeData";
+
+export default function Buttons({ content: data }) {
+ function store_to_local(title, chapter, volume, image, id, id2) {
+ let data = {
+ title: title,
+ chapter: chapter,
+ volume: volume,
+ image: image,
+ id: id,
+ mangaId: id2,
+ };
+ storeLocal(data);
+ }
+
+ return (
+ <div className={styles.ChapterContainer}>
+ {data.chapters &&
+ data.chapters.map((item, index) => {
+ if (item.pages !== 0) {
+ return (
+ <Link
+ key={index}
+ href={{
+ pathname: `/manga/info/read/${item.id}`,
+ }}
+ onClick={() => {
+ store_to_local(
+ data.title.english || data.title.romaji,
+ parseInt(item.chapterNumber),
+ parseInt(item.volumeNumber),
+ data.image,
+ item.id,
+ data.id
+ );
+ }}
+ >
+ <button key={index}>
+ <div>
+ <p>Chapter: {item.chapterNumber}</p>
+ <p>Volume: {item.volumeNumber}</p>
+ </div>
+ </button>
+ </Link>
+ );
+ }
+ })}
+ </div>
+ );
+}
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css index b1b76f4..bc22f49 100644 --- a/src/app/manga/[title]/[id]/info.module.css +++ b/src/app/manga/[title]/[id]/info.module.css @@ -1,224 +1,224 @@ -.MangaInfoContainer { - margin: 68px auto; -} - -.MangaHero { - display: flex; - flex-direction: column; - justify-content: center; -} - -.TitleContainer { - display: flex; - justify-content: space-between; - align-items: center; - padding: 5px; - background-color: #2c2c2c9c; - backdrop-filter: blur(5px); - -} - -.TitleContainer p { - font-family: "Lexend Deca", serif; - font-size: 40px; - font-weight: 1000; -} - -.TitleContainer img { - border-radius: 10px; - margin-left: 5px; -} - -.MangaDescription { - color: white; - font-family: "Atkinson Hyperlegible", serif; - max-width: 98%; - margin: -10px auto; -} - -.Description h2 { - font-family: "Lexend Deca", serif; - color: gray; -} - -.Description p { - margin-top: -10px; -} - -.MangaReleaseYear { - margin-top: 10px; - font-family: "Poppins", serif; -} - -.GenreContainer { - margin-top: 5px; - display: flex; - align-items: center; - font-family: "Poppins", serif; -} - -.GenreText { - color: var(--neon-green); -} - -.GenreContainer { - margin-top: 10px; -} - -.genres { - display: flex; - align-items: center; - overflow-x: auto; -} - -.MangaGenre { - background-color: #5f5f5f5d; - border-radius: 5px; - padding: 2px 5px; - cursor: pointer; - margin: 2px; -} - -.MangaRatings { - display: flex; - margin-top: 10px; - font-family: "Poppins", serif; - /* justify-content: center; */ -} - -.MangaRatings span { - margin-right: 2px; - margin-left: 2px; - color: var(--light-green); -} - -.CharactersContainer { - max-width: 98%; - margin: 20px auto; -} - -.CharactersContainer h2 { - color: gray; - font-family: "Lexend Deca", serif; -} - -.Character { - display: flex; - flex-direction: row; - overflow-x: auto; - margin-top: -10px; -} - -.Character::-webkit-scrollbar { - height: 5px; -} - -.Character::-webkit-scrollbar-thumb { - background-color: #31363F; - border-radius: 5px; -} - -.CharacterEntry { - display: flex; - flex-direction: column; - align-items: center; - width: auto; - margin: 5px; -} - -.CharacterEntry p { - margin: 10px auto; - text-align: center; - width: 110px; - color: white; - font-family: "Atkinson Hyperlegible", serif; -} - -.CharacterEntry img { - border-radius: 10px; -} - -/* Chapters Buttons */ - -.Chapters { - display: flex; - align-items: center; - justify-content: space-between; - max-width: 90%; - margin: 20px auto; -} - -.ChapterTitle { - color: white; - font-family: "Lexend Deca", serif; - font-size: 32px; -} - -.ChapterContainer { - width: 50dvw; - text-align: center; - height: 300px; - overflow-y: auto; -} - -.ChapterContainer::-webkit-scrollbar { - width: 5px; - height: 0px; -} - -.ChapterContainer::-webkit-scrollbar-thumb { - background-color: #31363F; - border-radius: 5px; -} - -.ChapterContainer button { - width: 130px; - height: auto; - padding: 10px; - margin: 5px; - border-radius: 5px; - font-size: 16px; - border: none; - outline: none; - color: white; - background-color: #3d3d3d; - cursor: pointer; - transition: background-color 100ms ease-in-out; -} - -.ChapterContainer button p { - font-family: "Atkinson Hyperlegible", serif; - margin: 2px; -} - -.ChapterContainer button:hover { - background-color: #1f1f1f; - transition: background-color 50ms ease-in -} - -.ChapterContainer button:focus { - opacity: 0.7; - transition: transform 0.2s linear; - background-color: var(--pastel-red); - transform: scale(0.9); -} - -@media screen and (max-width: 768px) { - .MangaInfoContainer { - max-width: 100%; - } - - .TitleContainer p { - font-size: 28px; - } - - .ChapterContainer button { - width: 120px; - - } - - .ChapterContainer button p { - font-size: 14px; - } - +.MangaInfoContainer {
+ margin: 68px auto;
+}
+
+.MangaHero {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.TitleContainer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px;
+ background-color: #2c2c2c9c;
+ backdrop-filter: blur(5px);
+
+}
+
+.TitleContainer p {
+ font-family: "Lexend Deca", serif;
+ font-size: 40px;
+ font-weight: 1000;
+}
+
+.TitleContainer img {
+ border-radius: 10px;
+ margin-left: 5px;
+}
+
+.MangaDescription {
+ color: white;
+ font-family: "Atkinson Hyperlegible", serif;
+ max-width: 98%;
+ margin: -10px auto;
+}
+
+.Description h2 {
+ font-family: "Lexend Deca", serif;
+ color: gray;
+}
+
+.Description p {
+ margin-top: -10px;
+}
+
+.MangaReleaseYear {
+ margin-top: 10px;
+ font-family: "Poppins", serif;
+}
+
+.GenreContainer {
+ margin-top: 5px;
+ display: flex;
+ align-items: center;
+ font-family: "Poppins", serif;
+}
+
+.GenreText {
+ color: var(--neon-green);
+}
+
+.GenreContainer {
+ margin-top: 10px;
+}
+
+.genres {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+}
+
+.MangaGenre {
+ background-color: #5f5f5f5d;
+ border-radius: 5px;
+ padding: 2px 5px;
+ cursor: pointer;
+ margin: 2px;
+}
+
+.MangaRatings {
+ display: flex;
+ margin-top: 10px;
+ font-family: "Poppins", serif;
+ /* justify-content: center; */
+}
+
+.MangaRatings span {
+ margin-right: 2px;
+ margin-left: 2px;
+ color: var(--light-green);
+}
+
+.CharactersContainer {
+ max-width: 98%;
+ margin: 20px auto;
+}
+
+.CharactersContainer h2 {
+ color: gray;
+ font-family: "Lexend Deca", serif;
+}
+
+.Character {
+ display: flex;
+ flex-direction: row;
+ overflow-x: auto;
+ margin-top: -10px;
+}
+
+.Character::-webkit-scrollbar {
+ height: 5px;
+}
+
+.Character::-webkit-scrollbar-thumb {
+ background-color: #31363F;
+ border-radius: 5px;
+}
+
+.CharacterEntry {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: auto;
+ margin: 5px;
+}
+
+.CharacterEntry p {
+ margin: 10px auto;
+ text-align: center;
+ width: 110px;
+ color: white;
+ font-family: "Atkinson Hyperlegible", serif;
+}
+
+.CharacterEntry img {
+ border-radius: 10px;
+}
+
+/* Chapters Buttons */
+
+.Chapters {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 90%;
+ margin: 20px auto;
+}
+
+.ChapterTitle {
+ color: white;
+ font-family: "Lexend Deca", serif;
+ font-size: 32px;
+}
+
+.ChapterContainer {
+ width: 50dvw;
+ text-align: center;
+ height: 300px;
+ overflow-y: auto;
+}
+
+.ChapterContainer::-webkit-scrollbar {
+ width: 5px;
+ height: 0px;
+}
+
+.ChapterContainer::-webkit-scrollbar-thumb {
+ background-color: #31363F;
+ border-radius: 5px;
+}
+
+.ChapterContainer button {
+ width: 130px;
+ height: auto;
+ padding: 10px;
+ margin: 5px;
+ border-radius: 5px;
+ font-size: 16px;
+ border: none;
+ outline: none;
+ color: white;
+ background-color: #3d3d3d;
+ cursor: pointer;
+ transition: background-color 100ms ease-in-out;
+}
+
+.ChapterContainer button p {
+ font-family: "Atkinson Hyperlegible", serif;
+ margin: 2px;
+}
+
+.ChapterContainer button:hover {
+ background-color: #1f1f1f;
+ transition: background-color 50ms ease-in
+}
+
+.ChapterContainer button:focus {
+ opacity: 0.7;
+ transition: transform 0.2s linear;
+ background-color: var(--pastel-red);
+ transform: scale(0.9);
+}
+
+@media screen and (max-width: 768px) {
+ .MangaInfoContainer {
+ max-width: 100%;
+ }
+
+ .TitleContainer p {
+ font-size: 28px;
+ }
+
+ .ChapterContainer button {
+ width: 120px;
+
+ }
+
+ .ChapterContainer button p {
+ font-size: 14px;
+ }
+
}
\ No newline at end of file diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx index d743f4d..ffd962d 100644 --- a/src/app/manga/[title]/[id]/page.jsx +++ b/src/app/manga/[title]/[id]/page.jsx @@ -1,136 +1,136 @@ -import styles from "./info.module.css"; -import Image from "next/image"; -import Buttons from "./buttons"; -import { redirect } from "next/navigation"; -import { FaStar } from "react-icons/fa"; -import { PreFetchChaterLinks } from "../../cacher"; - -export default async function MangaInfo({ params }) { - const id = params.id; - const data = await getMangaInfo(id); - - if (data.message) { - redirect("/404"); - } - - PreFetchChaterLinks(data.chapters); - - return ( - <div className={styles.MangaInfoContainer}> - {data && ( - <div className={styles.MangaInfo}> - <div - className={styles.MangaHero} - style={{ - backgroundImage: `url(${data.cover})`, - backgroundSize: "cover", - backgroundRepeat: "no-repeat", - borderRadius: 10, - }} - > - <div className={styles.TitleContainer}> - <p - style={{ - color: data.color, - borderRadius: 10, - padding: 5, - }} - > - {data.title["english"] || data.title["romaji"]} - </p> - <Image - src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${data.image}`} - width={200} - height={310} - alt="Manga Poster" - priority - /> - </div> - </div> - - <div className={styles.MangaDescription}> - <div className={styles.Description}> - <h2>Description</h2> - <p>{data.description.split("<br")[0]}</p> - </div> - - <div className={styles.MangaReleaseYear}> - <span style={{ color: "#A3FFD6" }}> - Started on: {data.startDate["day"]}- - {data.startDate["month"]}- - {data.startDate["year"]} - </span> - <span style={{ color: "white", margin: 10 }}> - | - </span> - <span style={{ color: "var(--pastel-red)" }}> - Ended on: {data.endDate["day"]}- - {data.endDate["month"]}-{data.endDate["year"]} - </span> - </div> - - <div className={styles.GenreContainer}> - <span className={styles.GenreText}>Genres: </span> - <div className={styles.genres}> - {data.genres && - data.genres.map((item, index) => ( - <span - key={index} - className={styles.MangaGenre} - > - {item} - </span> - ))} - </div> - </div> - - <div className={styles.MangaRatings}> - <span>Ratings: {data.rating / 10}</span> - <span> - <FaStar /> - </span> - </div> - </div> - - <div className={styles.CharactersContainer}> - <h2>Characters</h2> - <div className={styles.Character}> - {data.characters && - data.characters.map((item, index) => ( - <div - key={index} - className={styles.CharacterEntry} - > - <Image - src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`} - width={140} - height={200} - alt="Character Poster" - /> - <p> - {item.name.full} ({item.role}) - </p> - </div> - ))} - </div> - </div> - <div className={styles.Chapters}> - <p className={styles.ChapterTitle}> - Chapters & Volumes - </p> - <Buttons content={data} /> - </div> - </div> - )} - </div> - ); -} - -async function getMangaInfo(id) { - const res = await fetch( - `https://consumet-jade.vercel.app/meta/anilist-manga/info/${id}?provider=mangadex`, - { next: { revalidate: 86400 } } - ); - const data = await res.json(); - return data; -} +import styles from "./info.module.css";
+import Image from "next/image";
+import Buttons from "./buttons";
+import { redirect } from "next/navigation";
+import { FaStar } from "react-icons/fa";
+import { PreFetchChaterLinks } from "../../cacher";
+
+export default async function MangaInfo({ params }) {
+ const id = params.id;
+ const data = await getMangaInfo(id);
+
+ if (data.message) {
+ redirect("/404");
+ }
+
+ PreFetchChaterLinks(data.chapters);
+
+ return (
+ <div className={styles.MangaInfoContainer}>
+ {data && (
+ <div className={styles.MangaInfo}>
+ <div
+ className={styles.MangaHero}
+ style={{
+ backgroundImage: `url(${data.cover})`,
+ backgroundSize: "cover",
+ backgroundRepeat: "no-repeat",
+ borderRadius: 10,
+ }}
+ >
+ <div className={styles.TitleContainer}>
+ <p
+ style={{
+ color: data.color,
+ borderRadius: 10,
+ padding: 5,
+ }}
+ >
+ {data.title["english"] || data.title["romaji"]}
+ </p>
+ <Image
+ src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${data.image}`}
+ width={200}
+ height={310}
+ alt="Manga Poster"
+ priority
+ />
+ </div>
+ </div>
+
+ <div className={styles.MangaDescription}>
+ <div className={styles.Description}>
+ <h2>Description</h2>
+ <p>{data.description.split("<br")[0]}</p>
+ </div>
+
+ <div className={styles.MangaReleaseYear}>
+ <span style={{ color: "#A3FFD6" }}>
+ Started on: {data.startDate["day"]}-
+ {data.startDate["month"]}-
+ {data.startDate["year"]}
+ </span>
+ <span style={{ color: "white", margin: 10 }}>
+ |
+ </span>
+ <span style={{ color: "var(--pastel-red)" }}>
+ Ended on: {data.endDate["day"]}-
+ {data.endDate["month"]}-{data.endDate["year"]}
+ </span>
+ </div>
+
+ <div className={styles.GenreContainer}>
+ <span className={styles.GenreText}>Genres: </span>
+ <div className={styles.genres}>
+ {data.genres &&
+ data.genres.map((item, index) => (
+ <span
+ key={index}
+ className={styles.MangaGenre}
+ >
+ {item}
+ </span>
+ ))}
+ </div>
+ </div>
+
+ <div className={styles.MangaRatings}>
+ <span>Ratings: {data.rating / 10}</span>
+ <span>
+ <FaStar />
+ </span>
+ </div>
+ </div>
+
+ <div className={styles.CharactersContainer}>
+ <h2>Characters</h2>
+ <div className={styles.Character}>
+ {data.characters &&
+ data.characters.map((item, index) => (
+ <div
+ key={index}
+ className={styles.CharacterEntry}
+ >
+ <Image
+ src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
+ width={140}
+ height={200}
+ alt="Character Poster"
+ />
+ <p>
+ {item.name.full} ({item.role})
+ </p>
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className={styles.Chapters}>
+ <p className={styles.ChapterTitle}>
+ Chapters & Volumes
+ </p>
+ <Buttons content={data} />
+ </div>
+ </div>
+ )}
+ </div>
+ );
+}
+
+async function getMangaInfo(id) {
+ const res = await fetch(
+ `https://consumet-jade.vercel.app/meta/anilist-manga/info/${id}?provider=mangadex`,
+ { next: { revalidate: 86400 } }
+ );
+ const data = await res.json();
+ return data;
+}
diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx index 589ff53..4446d05 100644 --- a/src/app/manga/[title]/page.jsx +++ b/src/app/manga/[title]/page.jsx @@ -1,78 +1,78 @@ -import styles from "./title.module.css"; -import Image from "next/image"; -import Link from "next/link"; -import { PreFetchMangaInfo } from "../cacher"; - -// This page displays all the available mangas or manhwas when the user searches for one/ - -export default async function MangaInfo({ params }) { - const title = params.title; - const data = await GetSearchedAnime(title); - - PreFetchMangaInfo(data); - - return ( - <div className={styles.Main}> - <div className={styles.MangaContainer}> - {title && ( - <div className={styles.SearchedFor}> - <p>Searched for: {decodeURIComponent(title)}</p> - </div> - )} - {data && - data.results.map(async (item, index) => { - let desc = item.description || ""; // Ensure desc is not null - if (desc === "") { - desc = "Not found"; // If desc is empty, set it to "Not found" - } - return ( - <Link - href={`./info/${item.id}`} - style={{ textDecoration: "none" }} - key={index} - > - <div className={styles.MangaEntries}> - <Image - src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`} - width={160} - height={250} - alt="Manga Poster" - style={{ borderRadius: 10 }} - /> - <div className={styles.MangaInfo}> - <p className={styles.MangaTitle}> - {item.title["english"] || - item.title["romaji"]} - </p> - <p className={styles.MangaDescription}> - {desc.includes && - desc.includes("<br") - ? desc.split("<b")[0] - : desc} - </p> - <p className={styles.MangaStatus}> - {item.status} - </p> - <p className={styles.MangaChapters}> - Chapters: {item.totalChapters} - </p> - <p className={styles.MangaVolume}> - Volumes: {item.volumes} - </p> - </div> - </div> - </Link> - ); - })} - </div> - </div> - ); -} - -async function GetSearchedAnime(title) { - const res = await fetch( - "https://consumet-jade.vercel.app/meta/anilist-manga/" + title - ); - const data = await res.json(); - return data; -} +import styles from "./title.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import { PreFetchMangaInfo } from "../cacher";
+
+// This page displays all the available mangas or manhwas when the user searches for one/
+
+export default async function MangaInfo({ params }) {
+ const title = params.title;
+ const data = await GetSearchedAnime(title);
+
+ PreFetchMangaInfo(data);
+
+ return (
+ <div className={styles.Main}>
+ <div className={styles.MangaContainer}>
+ {title && (
+ <div className={styles.SearchedFor}>
+ <p>Searched for: {decodeURIComponent(title)}</p>
+ </div>
+ )}
+ {data &&
+ data.results.map(async (item, index) => {
+ let desc = item.description || ""; // Ensure desc is not null
+ if (desc === "") {
+ desc = "Not found"; // If desc is empty, set it to "Not found"
+ }
+ return (
+ <Link
+ href={`./info/${item.id}`}
+ style={{ textDecoration: "none" }}
+ key={index}
+ >
+ <div className={styles.MangaEntries}>
+ <Image
+ src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
+ width={160}
+ height={250}
+ alt="Manga Poster"
+ style={{ borderRadius: 10 }}
+ />
+ <div className={styles.MangaInfo}>
+ <p className={styles.MangaTitle}>
+ {item.title["english"] ||
+ item.title["romaji"]}
+ </p>
+ <p className={styles.MangaDescription}>
+ {desc.includes &&
+ desc.includes("<br")
+ ? desc.split("<b")[0]
+ : desc}
+ </p>
+ <p className={styles.MangaStatus}>
+ {item.status}
+ </p>
+ <p className={styles.MangaChapters}>
+ Chapters: {item.totalChapters}
+ </p>
+ <p className={styles.MangaVolume}>
+ Volumes: {item.volumes}
+ </p>
+ </div>
+ </div>
+ </Link>
+ );
+ })}
+ </div>
+ </div>
+ );
+}
+
+async function GetSearchedAnime(title) {
+ const res = await fetch(
+ "https://consumet-jade.vercel.app/meta/anilist-manga/" + title
+ );
+ const data = await res.json();
+ return data;
+}
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css index e7842d5..737fd92 100644 --- a/src/app/manga/[title]/title.module.css +++ b/src/app/manga/[title]/title.module.css @@ -1,75 +1,75 @@ -.Main { - max-width: 95%; - margin: 60px auto; -} - -.MangaContainer { - display: flex; - flex-direction: column; -} - -.SearchedFor { - color: white; - text-align: center; - font-family: "Lexend Deca", serif; - font-size: 26px; -} - -.MangaEntries { - display: flex; - flex-direction: row; - margin: 0px 10px 10px 10px; - padding: 10px; - border-style: dotted; - border-color: #363636 #474747; - border-radius: 10px; - border-width: 4px; - align-items: center; - cursor: pointer; - transition: opacity 200ms linear, transform 200ms linear; -} - -/* THIS WORKS*/ -.MangaContainer:hover .MangaEntries { - opacity: 0.5; -} - -.MangaContainer:hover .MangaEntries:hover { - opacity: 1; - transform: scale(1.01); -} - -.MangaInfo { - color: white; - margin-left: 20px; - font-family: "Atkinson Hyperlegible"; -} - -.MangaTitle { - font-family: "Lexend Deca", serif; - margin: 0px; - font-size: 22px; - color: var(--neon-green); -} - -.MangaStatus { - color: var(--soft-purple); - font-family: "Poppins", serif; - -} - -.MangaVolume { - color: #FFACAC; - font-family: "Poppins", serif; -} - -.MangaChapters { - color: #FFEBB4; - font-family: "Poppins", serif; -} - -@media screen and (max-width: 768px) { - .Main { - max-width: 100%; - } +.Main {
+ max-width: 95%;
+ margin: 60px auto;
+}
+
+.MangaContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.SearchedFor {
+ color: white;
+ text-align: center;
+ font-family: "Lexend Deca", serif;
+ font-size: 26px;
+}
+
+.MangaEntries {
+ display: flex;
+ flex-direction: row;
+ margin: 0px 10px 10px 10px;
+ padding: 10px;
+ border-style: dotted;
+ border-color: #363636 #474747;
+ border-radius: 10px;
+ border-width: 4px;
+ align-items: center;
+ cursor: pointer;
+ transition: opacity 200ms linear, transform 200ms linear;
+}
+
+/* THIS WORKS*/
+.MangaContainer:hover .MangaEntries {
+ opacity: 0.5;
+}
+
+.MangaContainer:hover .MangaEntries:hover {
+ opacity: 1;
+ transform: scale(1.01);
+}
+
+.MangaInfo {
+ color: white;
+ margin-left: 20px;
+ font-family: "Atkinson Hyperlegible";
+}
+
+.MangaTitle {
+ font-family: "Lexend Deca", serif;
+ margin: 0px;
+ font-size: 22px;
+ color: var(--neon-green);
+}
+
+.MangaStatus {
+ color: var(--soft-purple);
+ font-family: "Poppins", serif;
+
+}
+
+.MangaVolume {
+ color: #FFACAC;
+ font-family: "Poppins", serif;
+}
+
+.MangaChapters {
+ color: #FFEBB4;
+ font-family: "Poppins", serif;
+}
+
+@media screen and (max-width: 768px) {
+ .Main {
+ max-width: 100%;
+ }
}
\ No newline at end of file diff --git a/src/app/manga/cacher.js b/src/app/manga/cacher.js index 7f047ab..6059674 100644 --- a/src/app/manga/cacher.js +++ b/src/app/manga/cacher.js @@ -1,32 +1,32 @@ -// This function pre-fetches all the chapter pages links for a manga in the background -"use server"; - -export async function PreFetchChaterLinks(data) { - try { - const fetchPromises = data.map(async (element) => { - const link = `https://consumet-jade.vercel.app/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`; - await fetch(link, { cache: "force-cache" }); - }); - - await Promise.all(fetchPromises); - console.log("Chapter links pre-fetched successfully!"); - } catch (error) { - console.error( - "Error occurred while pre-fetching chapter links:", - error - ); - } -} - -export async function PreFetchMangaInfo(data) { - try { - const fetchPromises = data.results.map(async (element) => { - const link = `https://consumet-jade.vercel.app/meta/anilist-manga/${element.id}?provider=mangadex`; - await fetch(link, { next: { revalidate: 86400 } }); - }); - await Promise.all(fetchPromises); - console.log("Manga info pre-fetched successfully!"); - } catch (error) { - console.error("error", error); - } -} +// This function pre-fetches all the chapter pages links for a manga in the background
+"use server";
+
+export async function PreFetchChaterLinks(data) {
+ try {
+ const fetchPromises = data.map(async (element) => {
+ const link = `https://consumet-jade.vercel.app/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`;
+ await fetch(link, { cache: "force-cache" });
+ });
+
+ await Promise.all(fetchPromises);
+ console.log("Chapter links pre-fetched successfully!");
+ } catch (error) {
+ console.error(
+ "Error occurred while pre-fetching chapter links:",
+ error
+ );
+ }
+}
+
+export async function PreFetchMangaInfo(data) {
+ try {
+ const fetchPromises = data.results.map(async (element) => {
+ const link = `https://consumet-jade.vercel.app/meta/anilist-manga/${element.id}?provider=mangadex`;
+ await fetch(link, { next: { revalidate: 86400 } });
+ });
+ await Promise.all(fetchPromises);
+ console.log("Manga info pre-fetched successfully!");
+ } catch (error) {
+ console.error("error", error);
+ }
+}
diff --git a/src/app/manga/history/continueWatching/cw.module.css b/src/app/manga/history/continueWatching/cw.module.css index 3641e84..645f45a 100644 --- a/src/app/manga/history/continueWatching/cw.module.css +++ b/src/app/manga/history/continueWatching/cw.module.css @@ -1,75 +1,75 @@ -.main { - width: 99%; - margin: 80px auto; -} - -.mainText { - color: var(--light-green); - font-family: "Poppins", serif; - font-size: 24px; -} - -.animeContainer { - font-family: "Poppins", serif; - font-size: 18px; - margin: 0px; -} - -.animeEntry { - display: flex; - align-items: center; - justify-content: space-between; - padding: 5px; - margin-bottom: 0.5rem; - border-radius: 1rem; - background-color: #1f1f1f; -} - -.animeEntry img { - width: auto; - height: auto; - max-height: 40dvh; - border-radius: 0.8rem; -} - -.titleContainer { - color: white; - margin-left: 0.2rem; -} - -.titleContainer h3 { - margin: 0px; -} - -.EpisodeCount { - color: var(--soft-purple); - margin: 0px; -} - -.date { - color: var(--neon-yellow); - margin: 0px; -} - -.redirects { - margin: 5px 0 0 0; -} - -.redirects button { - outline: none; - border: none; - margin-right: 0.4rem; - border-radius: 0.2rem; - padding: 0.2rem; - font-family: "Atkinson Hyperlegible", serif; - background-color: #303030; - color: white; - cursor: pointer; -} - -@media screen and (max-width: 768px) { - .animeContainer { - font-size: 14px; - - } +.main {
+ width: 99%;
+ margin: 80px auto;
+}
+
+.mainText {
+ color: var(--light-green);
+ font-family: "Poppins", serif;
+ font-size: 24px;
+}
+
+.animeContainer {
+ font-family: "Poppins", serif;
+ font-size: 18px;
+ margin: 0px;
+}
+
+.animeEntry {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 5px;
+ margin-bottom: 0.5rem;
+ border-radius: 1rem;
+ background-color: #1f1f1f;
+}
+
+.animeEntry img {
+ width: auto;
+ height: auto;
+ max-height: 40dvh;
+ border-radius: 0.8rem;
+}
+
+.titleContainer {
+ color: white;
+ margin-left: 0.2rem;
+}
+
+.titleContainer h3 {
+ margin: 0px;
+}
+
+.EpisodeCount {
+ color: var(--soft-purple);
+ margin: 0px;
+}
+
+.date {
+ color: var(--neon-yellow);
+ margin: 0px;
+}
+
+.redirects {
+ margin: 5px 0 0 0;
+}
+
+.redirects button {
+ outline: none;
+ border: none;
+ margin-right: 0.4rem;
+ border-radius: 0.2rem;
+ padding: 0.2rem;
+ font-family: "Atkinson Hyperlegible", serif;
+ background-color: #303030;
+ color: white;
+ cursor: pointer;
+}
+
+@media screen and (max-width: 768px) {
+ .animeContainer {
+ font-size: 14px;
+
+ }
}
\ No newline at end of file diff --git a/src/app/manga/history/continueWatching/page.jsx b/src/app/manga/history/continueWatching/page.jsx index 0d0a02e..92cc27e 100644 --- a/src/app/manga/history/continueWatching/page.jsx +++ b/src/app/manga/history/continueWatching/page.jsx @@ -1,70 +1,70 @@ -"use client"; - -import React, { useState, useEffect } from "react"; -import Image from "next/image"; -import styles from "./cw.module.css"; -import Link from "next/link"; - -const ContinueWatching = () => { - const [localItems, setLocalItems] = useState(null); - - useEffect(() => { - const newData = get_local(); - setLocalItems(newData); - }, []); // Empty dependency array means this effect runs only once after the initial render - - function get_local() { - try { - const data = localStorage.getItem("mangaData"); - return JSON.parse(data); - } catch (error) { - console.log("error", error); - return false; - } - } - - return ( - <main className={styles.main}> - <p className={styles.mainText}>Continue Watching</p> - {localItems && ( - <div className={styles.animeContainer}> - {localItems.watchHis && - localItems.watchHis.map((item, index) => ( - <div key={index} className={styles.animeEntry}> - <div className={styles.titleContainer}> - <h3>{item.title}</h3> - <p className={styles.EpisodeCount}> - Currently reading: Volume {item.volume}{" "} - Chapter {item.chapter} - </p> - <div className={styles.redirects}> - <Link - href={`/manga/info/${item.mangaId}`} - > - <button>Info Page</button> - </Link> - <Link - href={`/manga/info/read/${item.id}`} - > - <button> - Read current chapter - </button> - </Link> - </div> - </div> - <Image - src={item.image} - width={140} - height={210} - alt="Continue anime poster" - priority - /> - </div> - ))} - </div> - )} - </main> - ); -}; - -export default ContinueWatching; +"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import styles from "./cw.module.css";
+import Link from "next/link";
+
+const ContinueWatching = () => {
+ const [localItems, setLocalItems] = useState(null);
+
+ useEffect(() => {
+ const newData = get_local();
+ setLocalItems(newData);
+ }, []); // Empty dependency array means this effect runs only once after the initial render
+
+ function get_local() {
+ try {
+ const data = localStorage.getItem("mangaData");
+ return JSON.parse(data);
+ } catch (error) {
+ console.log("error", error);
+ return false;
+ }
+ }
+
+ return (
+ <main className={styles.main}>
+ <p className={styles.mainText}>Continue Watching</p>
+ {localItems && (
+ <div className={styles.animeContainer}>
+ {localItems.watchHis &&
+ localItems.watchHis.map((item, index) => (
+ <div key={index} className={styles.animeEntry}>
+ <div className={styles.titleContainer}>
+ <h3>{item.title}</h3>
+ <p className={styles.EpisodeCount}>
+ Currently reading: Volume {item.volume}{" "}
+ Chapter {item.chapter}
+ </p>
+ <div className={styles.redirects}>
+ <Link
+ href={`/manga/info/${item.mangaId}`}
+ >
+ <button>Info Page</button>
+ </Link>
+ <Link
+ href={`/manga/info/read/${item.id}`}
+ >
+ <button>
+ Read current chapter
+ </button>
+ </Link>
+ </div>
+ </div>
+ <Image
+ src={item.image}
+ width={140}
+ height={210}
+ alt="Continue anime poster"
+ priority
+ />
+ </div>
+ ))}
+ </div>
+ )}
+ </main>
+ );
+};
+
+export default ContinueWatching;
diff --git a/src/app/manga/history/storeData.js b/src/app/manga/history/storeData.js index 1fd7607..8d82a97 100644 --- a/src/app/manga/history/storeData.js +++ b/src/app/manga/history/storeData.js @@ -1,28 +1,28 @@ -"use client"; - -export function storeLocal(watchData) { - const jsonData = localStorage.getItem("mangaData"); - const dataObject = jsonData ? JSON.parse(jsonData) : {}; - - if (!dataObject.watchHis) { - dataObject.watchHis = []; - } - - let found = false; - dataObject.watchHis.forEach((element) => { - if (element.title === watchData.title) { - let chapter = watchData.chapter; - let volume = watchData.volume; - element.chapter = chapter; - element.volume = volume; - found = true; - } - }); - - if (!found) { - dataObject.watchHis.push(watchData); - } - - let updatedData = JSON.stringify(dataObject); - localStorage.setItem("mangaData", updatedData); -} +"use client";
+
+export function storeLocal(watchData) {
+ const jsonData = localStorage.getItem("mangaData");
+ const dataObject = jsonData ? JSON.parse(jsonData) : {};
+
+ if (!dataObject.watchHis) {
+ dataObject.watchHis = [];
+ }
+
+ let found = false;
+ dataObject.watchHis.forEach((element) => {
+ if (element.title === watchData.title) {
+ let chapter = watchData.chapter;
+ let volume = watchData.volume;
+ element.chapter = chapter;
+ element.volume = volume;
+ found = true;
+ }
+ });
+
+ if (!found) {
+ dataObject.watchHis.push(watchData);
+ }
+
+ let updatedData = JSON.stringify(dataObject);
+ localStorage.setItem("mangaData", updatedData);
+}
diff --git a/src/app/manga/loading.jsx b/src/app/manga/loading.jsx index 8f7f837..f96f0dc 100644 --- a/src/app/manga/loading.jsx +++ b/src/app/manga/loading.jsx @@ -1,9 +1,9 @@ -import styles from "./loading.module.css"; - -export default function Loading() { - return ( - <div className={styles.Main}> - <div className={styles.LoadingContainer}></div> - </div> - ); -} +import styles from "./loading.module.css";
+
+export default function Loading() {
+ return (
+ <div className={styles.Main}>
+ <div className={styles.LoadingContainer}></div>
+ </div>
+ );
+}
diff --git a/src/app/manga/loading.module.css b/src/app/manga/loading.module.css index 148d8b8..18b1cf0 100644 --- a/src/app/manga/loading.module.css +++ b/src/app/manga/loading.module.css @@ -1,22 +1,22 @@ -.Main { - height: 100dvh; - width: 100dvw; - display: flex; - justify-content: center; - align-items: center; -} - -.LoadingContainer { - width: 50px; - height: 50px; - border-radius: 50%; - border: 8px solid; - border-color: #F4F4F4 #0000; - animation: s1 1s infinite; -} - -@keyframes s1 { - to { - transform: rotate(.5turn) - } +.Main {
+ height: 100dvh;
+ width: 100dvw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.LoadingContainer {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: 8px solid;
+ border-color: #F4F4F4 #0000;
+ animation: s1 1s infinite;
+}
+
+@keyframes s1 {
+ to {
+ transform: rotate(.5turn)
+ }
}
\ No newline at end of file diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css index 8dd72d0..9124198 100644 --- a/src/app/manga/manga.module.css +++ b/src/app/manga/manga.module.css @@ -1,63 +1,63 @@ -.Main { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100dvh; - width: 100dvw; -} - -.MangaSVG { - height: auto; - width: auto; -} - -.searchMain { - display: flex; - align-items: center; -} - -.searchMain button { - margin: 10px 5px 0px 5px; - padding: 4px; - border-radius: 0.3rem; - border: none; - outline: none; - font-family: "Atkinson Hyperlegible", serif; - background: #1f1f1f; - color: white; -} - -.SearchBar { - display: flex; - align-items: center; - background: #1f1f1f; - margin-top: 10px; - border-style: dotted; - border-color: rgb(63, 63, 63); - border-width: 2px; - width: 20dvw; - border-radius: 1rem; -} - -.SearchBar input { - background: none; - outline: none; - border: none; - margin-left: 5px; - padding: 4px; - width: 100%; - color: white; - font-family: "Lexend Deca", serif; - font-size: 16px; -} - -@media screen and (max-width: 768px) { - .MangaSVG { - width: 100%; - } - - .SearchBar { - width: 50dvw; - } +.Main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100dvh;
+ width: 100dvw;
+}
+
+.MangaSVG {
+ height: auto;
+ width: auto;
+}
+
+.searchMain {
+ display: flex;
+ align-items: center;
+}
+
+.searchMain button {
+ margin: 10px 5px 0px 5px;
+ padding: 4px;
+ border-radius: 0.3rem;
+ border: none;
+ outline: none;
+ font-family: "Atkinson Hyperlegible", serif;
+ background: #1f1f1f;
+ color: white;
+}
+
+.SearchBar {
+ display: flex;
+ align-items: center;
+ background: #1f1f1f;
+ margin-top: 10px;
+ border-style: dotted;
+ border-color: rgb(63, 63, 63);
+ border-width: 2px;
+ width: 20dvw;
+ border-radius: 1rem;
+}
+
+.SearchBar input {
+ background: none;
+ outline: none;
+ border: none;
+ margin-left: 5px;
+ padding: 4px;
+ width: 100%;
+ color: white;
+ font-family: "Lexend Deca", serif;
+ font-size: 16px;
+}
+
+@media screen and (max-width: 768px) {
+ .MangaSVG {
+ width: 100%;
+ }
+
+ .SearchBar {
+ width: 50dvw;
+ }
}
\ No newline at end of file diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx index bab74a7..a7b3cde 100644 --- a/src/app/manga/page.jsx +++ b/src/app/manga/page.jsx @@ -1,20 +1,20 @@ -import styles from "./manga.module.css"; -import Image from "next/image"; -import SearchBar from "./searchBar"; - -// This is the landing page for the manga section. Nothing much here but my only complaint is the loading time for the svg. It's too big but idk how to fix it. I mean I could use a png but then the quality is not good. Will keep it like this for the time being - -export default async function Manga() { - return ( - <div className={styles.Main}> - <Image - src="/manga.svg" - width={480} - height={200} - className={styles.MangaSVG} - alt="Manga SVG" - /> - <SearchBar /> - </div> - ); -} +import styles from "./manga.module.css";
+import Image from "next/image";
+import SearchBar from "./searchBar";
+
+// This is the landing page for the manga section. Nothing much here but my only complaint is the loading time for the svg. It's too big but idk how to fix it. I mean I could use a png but then the quality is not good. Will keep it like this for the time being
+
+export default async function Manga() {
+ return (
+ <div className={styles.Main}>
+ <Image
+ src="/manga.svg"
+ width={480}
+ height={200}
+ className={styles.MangaSVG}
+ alt="Manga SVG"
+ />
+ <SearchBar />
+ </div>
+ );
+}
diff --git a/src/app/manga/searchBar.jsx b/src/app/manga/searchBar.jsx index bffb957..763f383 100644 --- a/src/app/manga/searchBar.jsx +++ b/src/app/manga/searchBar.jsx @@ -1,45 +1,45 @@ -"use client"; - -import { FaSearch } from "react-icons/fa"; -import styles from "./manga.module.css"; -import { useState } from "react"; -import { useRouter } from "next/navigation"; -import Link from "next/link"; - -// This is the search bar for the mangapage. Nothing extraordinary but just an input box and a search icon. Gets the work done. - -export default function SearchBar() { - const router = useRouter(); - - const [title, setMangaTitle] = useState(""); - - return ( - <main className={styles.searchMain}> - <div className={styles.SearchBar}> - <FaSearch color="white" style={{ marginLeft: 5 }} /> - <input - type="text" - name="manga" - placeholder="Enter manga title" - autoComplete="off" - onChange={(e) => setMangaTitle(e.target.value)} - onKeyDown={(event) => { - if ( - (event.key === "Enter" || - event.code === 13 || - event.code === "Enter") && - title !== "" - ) { - router.push(`/manga/${title}`); - } - }} - ></input> - </div> - <div> - <Link href={"/manga/history/continueWatching/"}> - <button>History</button> - </Link> - </div> - </main> - ); -} +"use client";
+
+import { FaSearch } from "react-icons/fa";
+import styles from "./manga.module.css";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+// This is the search bar for the mangapage. Nothing extraordinary but just an input box and a search icon. Gets the work done.
+
+export default function SearchBar() {
+ const router = useRouter();
+
+ const [title, setMangaTitle] = useState("");
+
+ return (
+ <main className={styles.searchMain}>
+ <div className={styles.SearchBar}>
+ <FaSearch color="white" style={{ marginLeft: 5 }} />
+ <input
+ type="text"
+ name="manga"
+ placeholder="Enter manga title"
+ autoComplete="off"
+ onChange={(e) => setMangaTitle(e.target.value)}
+ onKeyDown={(event) => {
+ if (
+ (event.key === "Enter" ||
+ event.code === 13 ||
+ event.code === "Enter") &&
+ title !== ""
+ ) {
+ router.push(`/manga/${title}`);
+ }
+ }}
+ ></input>
+ </div>
+ <div>
+ <Link href={"/manga/history/continueWatching/"}>
+ <button>History</button>
+ </Link>
+ </div>
+ </main>
+ );
+}
|