🚀 feat(ui): added manga with better UI

3 files changed, 25 insertions, 22 deletions

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index b121400..6740aac 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -23,8 +23,8 @@ const AnimeInfoHomepage = async ({ params }) => {
 			className="h-screen bg-white dark:bg-black"

 		>

 			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-white dark:to-black">

-				<section className="pt-12  lg:w-9/12 m-auto">

-					<div className="flex items-center justify-center lg:justify-start md:justify-start">

+				<section className="m-auto pt-16 lg:w-9/12">

+					<div className="flex items-center justify-center md:justify-start lg:justify-start">

 						<Image

 							isBlurred

 							width={190}

@@ -43,7 +43,7 @@ const AnimeInfoHomepage = async ({ params }) => {
 											key={index}

 											color="warning"

 											variant="faded"

-											className="mr-1 mb-1"

+											className="mb-1 mr-1"

 										>

 											<p className="text-xs">{item}</p>

 										</Chip>

diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx
index 691b276..ba5c7cf 100644
--- a/src/app/anime/components/search_results.jsx
+++ b/src/app/anime/components/search_results.jsx
@@ -1,10 +1,8 @@
-"use server";
-
 import { search_results } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 import styles from "../../page.module.css";
 
-import { Card, CardHeader, CardBody } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/react";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -15,7 +13,7 @@ const SearchResults = async (title) => {
 
 	return (
 		<section
-			className={`flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`}
+			className={`flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster} `}
 		>
 			{data &&
 				data.results.map((item, index) => (
@@ -23,26 +21,31 @@ const SearchResults = async (title) => {
 						key={index}
 						href={`/anime/${item.id}`}
 						aria-label="anime redirection links"
-						className="flex flex-col items-center mx-1 "
+						className="mx-1 flex flex-col items-center"
+						title={item.title}
 					>
-						<Card className="overflow-hidden" isPressable>
+						<Card
+							className="overflow-hidden"
+							isPressable
+							shadow="lg"
+						>
 							<CardBody>
 								<Image
 									alt="Searched Anime Poster"
 									src={item.image}
 									width={190}
 									height={120}
-									className="rounded-md h-64"
+									className="h-64 rounded-md"
 									priority
 								/>
 							</CardBody>
-							<CardHeader>
+							<CardFooter>
 								<h4
-									className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}
+									className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}
 								>
 									{item.title}
 								</h4>
-							</CardHeader>
+							</CardFooter>
 						</Card>
 					</Link>
 				))}
diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx
index ce5ca34..bb8d6f1 100644
--- a/src/app/anime/page.jsx
+++ b/src/app/anime/page.jsx
@@ -19,7 +19,7 @@ const AnimeHomepage = async () => {
 

 	const header = (title) => (

 		<>

-			<p className={`antialiased font-bold text-sky-400 text-2xl my-1`}>

+			<p className={`my-1 text-2xl font-bold text-sky-400 antialiased`}>

 				{title}

 			</p>

 		</>

@@ -33,22 +33,22 @@ const AnimeHomepage = async () => {
 						key={index}

 						href={`/anime/${item.id}`}

 						aria-label="anime redirection links"

-						className="flex flex-col items-center mx-1 "

+						className="mx-1 flex flex-col items-center"

 					>

-						<Card className="overflow-visible " isPressable>

+						<Card className="overflow-visible" isPressable>

 							<CardBody>

 								<Image

 									alt="Anime Poster"

 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									width={270}

 									height={160}

-									className="h-60 rounded-md overflow-hidden"

+									className="h-60 overflow-hidden rounded-md"

 									priority

 								/>

 							</CardBody>

 							<CardHeader>

 								<h4

-									className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}

+									className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}

 								>

 									{item.title}

 								</h4>

@@ -60,7 +60,7 @@ const AnimeHomepage = async () => {
 	);

 

 	return (

-		<section className="pt-12">

+		<section className="pt-4">

 			<div className="mx-2">

 				<SearchBar />

 			</div>

@@ -68,7 +68,7 @@ const AnimeHomepage = async () => {
 			<div className="mx-2">

 				{header("Popular Animes")}

 				<div

-					className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}

+					className={`flex overflow-auto pb-3 ${styles.ScrollBarAdjuster} `}

 				>

 					{format(popular_data)}

 				</div>

@@ -77,7 +77,7 @@ const AnimeHomepage = async () => {
 			<div className="mx-2">

 				{header("Recent Animes")}

 				<div

-					className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}

+					className={`flex overflow-auto pb-3 ${styles.ScrollBarAdjuster}`}

 				>

 					{format(recent_data)}

 				</div>

@@ -85,7 +85,7 @@ const AnimeHomepage = async () => {
 			<div className="mx-2">

 				{header("Top Airing Animes")}

 				<div

-					className={`flex overflow-x-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}

+					className={`flex overflow-auto pb-3 ${styles.ScrollBarAdjuster}`}

 				>

 					{format(airing_data)}

 				</div>