diff options
| author | real-zephex <[email protected]> | 2024-05-27 01:06:32 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-05-27 01:06:32 +0530 |
| commit | 7d5ea502db6e016291ad4c57c852d13747674fdc (patch) | |
| tree | d85df036273b0e4fff0d0b7111bc8d356c77cf93 /src/app/anime | |
| parent | ⚡️ perf(kdrama, anime): cache video links, replace next/image (diff) | |
| download | dramalama-7d5ea502db6e016291ad4c57c852d13747674fdc.tar.xz dramalama-7d5ea502db6e016291ad4c57c852d13747674fdc.zip | |
🎨 refactor(ui): Update background image for info page and home page, and fix video loading issue
Diffstat (limited to 'src/app/anime')
| -rw-r--r-- | src/app/anime/[id]/page.jsx | 75 |
1 files changed, 43 insertions, 32 deletions
diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx index 0e62310..c060899 100644 --- a/src/app/anime/[id]/page.jsx +++ b/src/app/anime/[id]/page.jsx @@ -12,39 +12,50 @@ const AnimeInfoHomepage = async ({ params }) => { preFetchVideoLinks(data.episodes);
return (
- <section className="pt-12 lg:w-9/12 m-auto">
- <div className="flex items-center justify-center lg:justify-start md:justify-start">
- <Image
- isBlurred
- width={190}
- src={data.image.toString()}
- alt="Anime Title Poster"
- className="m-2"
- />
- <div className="mx-5">
- <h4 className={`text-2xl`}>
- <strong>{data.title}</strong>
- </h4>
- <div>
- {data.genres &&
- data.genres.map((item, index) => (
- <Chip
- key={index}
- color="warning"
- variant="faded"
- className="mr-1 mb-1"
- >
- <p className="text-xs">{item}</p>
- </Chip>
- ))}
+ <section
+ style={{
+ backgroundColor: "black",
+ backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
+ backgroundSize: "40px 40px",
+ }}
+ className="h-screen "
+ >
+ <section className="absolute inset-0 bg-gradient-to-b from-transparent 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">
+ <Image
+ isBlurred
+ width={190}
+ src={data.image.toString()}
+ alt="Anime Title Poster"
+ className="m-2"
+ />
+ <div className="mx-5">
+ <h4 className={`text-2xl`}>
+ <strong>{data.title}</strong>
+ </h4>
+ <div>
+ {data.genres &&
+ data.genres.map((item, index) => (
+ <Chip
+ key={index}
+ color="warning"
+ variant="faded"
+ className="mr-1 mb-1"
+ >
+ <p className="text-xs">{item}</p>
+ </Chip>
+ ))}
+ </div>
+ </div>
</div>
- </div>
- </div>
- <DescriptionTabs data={data} />
- <EpisodesContainer data={data} />
- <br />
- <br />
- <br />
+ <DescriptionTabs data={data} />
+ <EpisodesContainer data={data} />
+ <br />
+ <br />
+ <br />
+ </section>
+ </section>
</section>
);
};
|