🚀 feat(ui): added manga with better UI

3 files changed, 13 insertions, 15 deletions

diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index 94f5adb..b18c0ee 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -18,9 +18,9 @@ export default async function DramaInfo({ params }) {
 			}}

 			className="h-screen bg-white dark:bg-black"

 		>

-			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-white-400 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="to-white-400 absolute inset-0 bg-gradient-to-b from-transparent dark:to-black">

+				<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}

@@ -39,7 +39,7 @@ export default async function DramaInfo({ 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/kdrama/components/searchFormatter.jsx b/src/app/kdrama/components/searchFormatter.jsx
index cc23fa7..21a52a5 100644
--- a/src/app/kdrama/components/searchFormatter.jsx
+++ b/src/app/kdrama/components/searchFormatter.jsx
@@ -1,5 +1,3 @@
-"use server";
-
 import { Card, CardHeader, CardBody } from "@nextui-org/react";
 import Link from "next/link";
 import Image from "next/image";
@@ -18,7 +16,7 @@ const SearchedDataFormatter = async (data) => {
 						key={index}
 						href={`/kdrama/${encodeURIComponent(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>
@@ -28,12 +26,12 @@ const SearchedDataFormatter = async (data) => {
 									src={item.image}
 									width={185}
 									height={120}
-									className="rounded-md h-64"
+									className="h-64 rounded-md"
 									priority
 								/>
 							</CardBody>
 							<CardHeader>
-								<h4 className="antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis ">
+								<h4 className="w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased">
 									{item.title}
 								</h4>
 							</CardHeader>
diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx
index afcb8a2..f5e1e0e 100644
--- a/src/app/kdrama/page.jsx
+++ b/src/app/kdrama/page.jsx
@@ -18,7 +18,7 @@ const KdramaHomepage = 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>

 		</>

@@ -32,22 +32,22 @@ const KdramaHomepage = async () => {
 						key={index}

 						href={`/kdrama/${encodeURIComponent(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="Kdrama 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>

@@ -59,7 +59,7 @@ const KdramaHomepage = async () => {
 	);

 

 	return (

-		<section className="pt-12">

+		<section className="pt-4">

 			<div>

 				<Searchbar />

 			</div>