Merge pull request #26 from real-zephex/improvement-2

Improvement 2

4 files changed, 129 insertions, 3 deletions

diff --git a/src/app/anime/components/search.jsx b/src/app/anime/components/search.jsx
index f916217..b8b4b53 100644
--- a/src/app/anime/components/search.jsx
+++ b/src/app/anime/components/search.jsx
@@ -41,7 +41,7 @@ const SearcBar = () => {
 						}}
 					></input>
 				</div>
-				<Link shallow href={"/"}>
+				<Link shallow href={"/anime/continueWatching"}>
 					<button className={styles.animeHistoryButton}>
 						History
 					</button>
diff --git a/src/app/anime/continueWatching/page.jsx b/src/app/anime/continueWatching/page.jsx
new file mode 100644
index 0000000..eb28a2f
--- /dev/null
+++ b/src/app/anime/continueWatching/page.jsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import styles from "../styles/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("data");
+			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) => (
+							<Link
+								href={`/${item.type}/${item.id}`}
+								style={{ textDecoration: "none" }}
+								key={index}
+							>
+								<div className={styles.animeEntry}>
+									<div className={styles.titleContainer}>
+										<h3>{item.name}</h3>
+										<p className={styles.EpisodeCount}>
+											Episode watching: {item.episode}
+										</p>
+										<p className={styles.date}>
+											Last watched on: {item.date} at{" "}
+											{item.time} hours
+										</p>
+									</div>
+									<Image
+										src={item.image}
+										width={167}
+										height={267}
+										alt="Continue anime poster"
+										priority
+									/>
+								</div>
+							</Link>
+						))}
+				</div>
+			)}
+		</main>
+	);
+};
+
+export default ContinueWatching;
diff --git a/src/app/anime/styles/cw.module.css b/src/app/anime/styles/cw.module.css
new file mode 100644
index 0000000..cb579c7
--- /dev/null
+++ b/src/app/anime/styles/cw.module.css
@@ -0,0 +1,59 @@
+.main {
+	width: 99%;
+	margin: 60px auto;
+}
+
+.mainText {
+	color: white;
+	font-size: 24px;
+	margin: 0.2rem 0 0.2rem 0;
+}
+
+.animeContainer {
+	font-size: 18px;
+	margin: 0px;
+}
+
+.animeEntry {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px;
+	margin-bottom: 0.5rem;
+	border-radius: 0.4rem;
+	background-color: #1f1f1f;
+}
+
+.animeEntry img {
+	border-radius: 0.4rem;
+	margin-left: 0.2rem;
+}
+
+.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;
+}
+
+@media screen and (max-width: 768px) {
+	.animeContainer {
+		font-size: 14px;
+	}
+
+	.animeEntry img {
+		width: 35%;
+	}
+}
\ No newline at end of file
diff --git a/src/app/anime/styles/search.module.css b/src/app/anime/styles/search.module.css
index d3564f7..b7e35ab 100644
--- a/src/app/anime/styles/search.module.css
+++ b/src/app/anime/styles/search.module.css
@@ -2,6 +2,7 @@
 	padding: 1rem 0 0.8rem 0;
 	display: flex;
 	align-items: center;
+	width: 100%;
 }
 
 .SearchInputContainer {
@@ -19,9 +20,10 @@
 	border: none;
 	background-color: #121212;
 	color: white;
-	margin: 0 0 0 0.4rem;
+	margin: 0 0.1rem 0 0.2rem;
 	padding: 0.5rem;
 	cursor: pointer;
+	border-radius: 0.5rem;
 }
 
 .SearchInputContainer input {
@@ -74,7 +76,7 @@
 }
 
 @media screen and (max-width: 768px) {
-	.SearchBarContainer {
+	.SearchInputContainer {
 		width: 100%;
 	}