diff options
| author | real-zephex <[email protected]> | 2024-06-07 21:25:54 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-06-07 21:25:54 +0530 |
| commit | 9bfc59d414e4bbf053af1eb43cd12b24d8530610 (patch) | |
| tree | 5cddd88c47e589d9cb39915db4ee527299f30b55 /src | |
| parent | ✨ style: changed background color for show pages (diff) | |
| download | dramalama-9bfc59d414e4bbf053af1eb43cd12b24d8530610.tar.xz dramalama-9bfc59d414e4bbf053af1eb43cd12b24d8530610.zip | |
style ✨: improved UI for history page
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/anime/components/vidButtonContainer.jsx | 4 | ||||
| -rw-r--r-- | 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> |