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/movies | |
| 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/movies')
| -rw-r--r-- | src/app/movies/[id]/page.jsx | 77 |
1 files changed, 44 insertions, 33 deletions
diff --git a/src/app/movies/[id]/page.jsx b/src/app/movies/[id]/page.jsx index 11389e7..e4e745a 100644 --- a/src/app/movies/[id]/page.jsx +++ b/src/app/movies/[id]/page.jsx @@ -11,42 +11,53 @@ const MovieInfoPage = async ({ params }) => { const data = await MovieInfoData(id); return ( - <main> - <section className="pt-12 m-auto w-full lg:w-9/12"> - <MovieVideoPlayer id={data.id} /> - <div className="flex items-center"> - <Image - isBlurred - shadow="lg" - src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`} - width={180} - height={300} - alt="Anime Title Poster" - className="m-2" - ></Image> - <div className="mx-5"> - <h4 className={`text-2xl`}> - <strong>{data.title}</strong> - </h4> - <div className="mt-1"> - {data.genres && - data.genres.map((item, index) => ( - <Chip - key={index} - color="warning" - variant="faded" - className="mr-1 mb-1" - > - <p className="text-xs">{item.name}</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 m-auto w-full lg:w-9/12"> + <MovieVideoPlayer id={data.id} /> + <div className="flex items-center"> + <Image + isBlurred + shadow="lg" + src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`} + width={180} + height={300} + alt="Anime Title Poster" + className="m-2" + ></Image> + <div className="mx-5"> + <h4 className={`text-2xl`}> + <strong>{data.title}</strong> + </h4> + <div className="mt-1"> + {data.genres && + data.genres.map((item, index) => ( + <Chip + key={index} + color="warning" + variant="faded" + className="mr-1 mb-1" + > + <p className="text-xs"> + {item.name} + </p> + </Chip> + ))} + </div> </div> </div> - </div> - <DescriptionTabs data={data} /> - <Questions /> + <DescriptionTabs data={data} /> + <Questions /> + </section> </section> - </main> + </section> ); }; |