diff options
Diffstat (limited to 'src/app/manga/history/continueWatching')
| -rw-r--r-- | src/app/manga/history/continueWatching/cw.module.css | 75 | ||||
| -rw-r--r-- | src/app/manga/history/continueWatching/page.jsx | 70 |
2 files changed, 145 insertions, 0 deletions
diff --git a/src/app/manga/history/continueWatching/cw.module.css b/src/app/manga/history/continueWatching/cw.module.css new file mode 100644 index 0000000..3641e84 --- /dev/null +++ b/src/app/manga/history/continueWatching/cw.module.css @@ -0,0 +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; + + } +}
\ No newline at end of file diff --git a/src/app/manga/history/continueWatching/page.jsx b/src/app/manga/history/continueWatching/page.jsx new file mode 100644 index 0000000..0d0a02e --- /dev/null +++ b/src/app/manga/history/continueWatching/page.jsx @@ -0,0 +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; |