diff options
| author | real-zephex <[email protected]> | 2024-05-24 22:51:36 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-05-24 22:51:36 +0530 |
| commit | 180c9577f8337991ca71470816333fe8430cd3ca (patch) | |
| tree | 82caa5a920443bcf0db3746c7ecacd968d4fc148 /src/app/anime/page.jsx | |
| parent | style: minor improvements to the anime cards (diff) | |
| download | dramalama-180c9577f8337991ca71470816333fe8430cd3ca.tar.xz dramalama-180c9577f8337991ca71470816333fe8430cd3ca.zip | |
✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured
Diffstat (limited to 'src/app/anime/page.jsx')
| -rw-r--r-- | src/app/anime/page.jsx | 105 |
1 files changed, 94 insertions, 11 deletions
diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx index 7143740..a2d5777 100644 --- a/src/app/anime/page.jsx +++ b/src/app/anime/page.jsx @@ -1,18 +1,101 @@ -import styles from "./styles/anime.module.css";
-import PopularAnimes from "./components/popularAnimes";
-import RecentAnimes from "./components/recentEpisodes";
-import TopAiringAnimes from "./components/topAiring";
-import SearcBar from "./components/search";
+import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
+import NextImage from "next/image";
+import styles from "../page.module.css";
+
+import { top_airing, recent, popular } from "./data-fetch/request";
+import SearchBar from "./components/search";
+import { preFetchAnimeInfo } from "./components/cacher";
+
const AnimeHomepage = async () => {
+ const popular_data = await popular();
+ const recent_data = await recent();
+ const airing_data = await top_airing();
+
+ const dataToBeLoaded = [popular_data, recent_data, airing_data];
+
+ for (let item of dataToBeLoaded) {
+ preFetchAnimeInfo(item);
+ }
+
+ const header = (title) => (
+ <>
+ <p className={`antialiased font-bold text-sky-400 text-2xl my-1`}>
+ {title}
+ </p>
+ </>
+ );
+
+ const format = (data) => (
+ <>
+ {data &&
+ data.results.map((item, index) => (
+ <Link
+ key={index}
+ href={`/anime/${item.id}`}
+ aria-label="anime redirection links"
+ className="flex flex-col items-center mx-1 "
+ >
+ <Card className="overflow-visible " isPressable>
+ <CardBody>
+ <Image
+ as={NextImage}
+ isBlurred
+ alt="Anime Poster"
+ src={item.image}
+ width={270}
+ height={160}
+ className="h-60 overflow-hidden"
+ shadow="lg"
+ 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>
+ ))}
+ </>
+ );
+
return (
- <main className={styles.Main}>
- <SearcBar />
- <TopAiringAnimes />
+ <section className="pt-12">
+ <div className="mx-2">
+ <SearchBar />
+ </div>
+
+ <div className="mx-2">
+ {header("Popular Animes")}
+ <div
+ className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}
+ >
+ {format(popular_data)}
+ </div>
+ </div>
+
+ <div className="mx-2">
+ {header("Recent Animes")}
+ <div
+ className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}
+ >
+ {format(recent_data)}
+ </div>
+ </div>
+ <div className="mx-2">
+ {header("Top Airing Animes")}
+ <div
+ className={`flex overflow-x-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}
+ >
+ {format(airing_data)}
+ </div>
+ </div>
<br />
- <RecentAnimes />
<br />
- <PopularAnimes />
- </main>
+ </section>
);
};
|