✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured

1 files changed, 46 insertions, 0 deletions

diff --git a/src/app/kdrama/components/searchFormatter.jsx b/src/app/kdrama/components/searchFormatter.jsx
new file mode 100644
index 0000000..bac2549
--- /dev/null
+++ b/src/app/kdrama/components/searchFormatter.jsx
@@ -0,0 +1,46 @@
+import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
+import NextImage from "next/image";
+
+import styles from "../../page.module.css";
+
+const SearchedDataFormatter = async (data) => {
+	return (
+		<section
+			className={`flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`}
+		>
+			{data &&
+				data.results.length > 0 &&
+				data.results.map((item, index) => (
+					<Link
+						key={index}
+						href={`/kdrama/${encodeURIComponent(item.id)}`}
+						aria-label="anime redirection links"
+						className="flex flex-col items-center mx-1"
+					>
+						<Card className="overflow-hidden" isPressable>
+							<CardBody>
+								<Image
+									as={NextImage}
+									isBlurred
+									alt="Anime Poster"
+									src={item.image}
+									width={185}
+									height={120}
+									shadow="lg"
+									className="h-64"
+									priority
+								/>
+							</CardBody>
+							<CardHeader>
+								<h4 className="antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis ">
+									{item.title}
+								</h4>
+							</CardHeader>
+						</Card>
+					</Link>
+				))}
+		</section>
+	);
+};
+
+export default SearchedDataFormatter;