From 9bfc59d414e4bbf053af1eb43cd12b24d8530610 Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Fri, 7 Jun 2024 21:25:54 +0530
Subject: =?UTF-8?q?style=20=E2=9C=A8:=20improved=20UI=20for=20history=20pa?=
 =?UTF-8?q?ge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/anime/components/vidButtonContainer.jsx |  4 ++-
 src/app/anime/continueWatching/page.jsx         | 40 +++++++++++++------------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/app/anime/components/vidButtonContainer.jsx b/src/app/anime/components/vidButtonContainer.jsx
index 6b872d8..c383c3d 100644
--- a/src/app/anime/components/vidButtonContainer.jsx
+++ b/src/app/anime/components/vidButtonContainer.jsx
@@ -37,7 +37,9 @@ const EpisodesContainer = ({ data: data }) => {
 							key={index}
 							className="mr-2 mt-2"
 							size="sm"
-							onClick={async () => {
+							onClick={async (event) => {
+								event.currentTarget.style.backgroundColor =
+									"orange";
 								await changeVideoLink(item.id);
 								store_to_local(
 									data.title,
diff --git a/src/app/anime/continueWatching/page.jsx b/src/app/anime/continueWatching/page.jsx
index 8951f4a..ba4bf75 100644
--- a/src/app/anime/continueWatching/page.jsx
+++ b/src/app/anime/continueWatching/page.jsx
@@ -1,8 +1,8 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import NextImage from "next/image";
-import { CarFooter, Image, Link } from "@nextui-org/react";
+import { Card, CardBody, Image } from "@nextui-org/react";
+import Link from "next/link";
 
 const ContinueWatching = () => {
 	const [localItems, setLocalItems] = useState(null);
@@ -23,38 +23,40 @@ const ContinueWatching = () => {
 	}
 
 	return (
-		<main className="pt-12">
-			<p className="text-sky-400 text-2xl uppercase">Continue Watching</p>
+		<main>
+			<p className="text-sky-400 text-2xl">Continue Watching</p>
 			{localItems && (
-				<div className="flex flex-col m-auto lg:w-[95%] ">
+				<div className="flex flex-col">
 					{localItems.watchHis &&
 						localItems.watchHis.map((item, index) => (
 							<Link
 								href={`/${item.type}/${item.id}`}
 								key={index}
 								color="foreground"
-								className="mt-4 bg-gray-300 p-2 dark:bg-[#1f1f1f] rounded-lg"
+								className="mb-2 bg-gray-300 dark:bg-[#1f1f1f] rounded-lg"
 							>
-								<div className="flex items-center justify-between w-full">
-									<div>
-										<p className="font-bold text-xl lg:text-2xl w-3/5">
-											{item.name}
-										</p>
-										<p>Episode: {item.episode}</p>
-									</div>
+								<Card
+									isPressable
+									isHoverable
+									shadow="sm"
+									className="flex flex-row items-center w-full"
+								>
 									<Image
-										as={NextImage}
-										isZoomed
 										isBlurred
-										shadow="lg"
+										shadow="sm"
 										src={item.image}
 										width={180}
-										height={300}
 										alt="Continue anime poster"
-										className="h-52 w-auto lg:h-64 lg:w-52"
+										className="p-1"
 										priority
 									/>
-								</div>
+									<CardBody>
+										<p className="text-xl">{item.name}</p>
+										<p className="text-green-300">
+											Episode Watching: {item.episode}
+										</p>
+									</CardBody>
+								</Card>
 							</Link>
 						))}
 				</div>
-- 
cgit v1.2.3