diff options
| -rw-r--r-- | src/app/anime/[id]/page.jsx | 74 | ||||
| -rw-r--r-- | src/app/anime/components/infoTabs.jsx | 4 | ||||
| -rw-r--r-- | src/app/anime/components/search_results.jsx | 3 | ||||
| -rw-r--r-- | src/app/anime/page.jsx | 11 | ||||
| -rw-r--r-- | src/app/components/header/header.jsx | 28 | ||||
| -rw-r--r-- | src/app/kdrama/[id]/page.jsx | 74 | ||||
| -rw-r--r-- | src/app/kdrama/components/searchFormatter.jsx | 7 | ||||
| -rw-r--r-- | src/app/kdrama/page.jsx | 7 | ||||
| -rw-r--r-- | src/app/manga/[id]/page.jsx | 61 | ||||
| -rw-r--r-- | src/app/movies/[id]/page.jsx | 76 | ||||
| -rw-r--r-- | src/app/movies/components/descriptionTabs.jsx | 6 | ||||
| -rw-r--r-- | src/app/movies/components/searchFormatter.jsx | 7 | ||||
| -rw-r--r-- | src/app/movies/components/videoPlayer.jsx | 4 | ||||
| -rw-r--r-- | src/app/movies/page.jsx | 7 | ||||
| -rw-r--r-- | src/app/web-series/[id]/page.jsx | 76 | ||||
| -rw-r--r-- | src/app/web-series/components/descriptionTabs.jsx | 8 | ||||
| -rw-r--r-- | src/app/web-series/components/seriesSearchFormatter.jsx | 7 | ||||
| -rw-r--r-- | src/app/web-series/components/videoPlayer.jsx | 4 | ||||
| -rw-r--r-- | src/app/web-series/page.jsx | 7 |
19 files changed, 242 insertions, 229 deletions
diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx index 6740aac..53c125e 100644 --- a/src/app/anime/[id]/page.jsx +++ b/src/app/anime/[id]/page.jsx @@ -15,49 +15,39 @@ const AnimeInfoHomepage = async ({ params }) => { }
return (
- <section
- style={{
- backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
- backgroundSize: "40px 40px",
- }}
- className="h-screen bg-white dark:bg-black"
- >
- <section className="absolute inset-0 bg-gradient-to-b from-transparent to-white 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}
- 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="mb-1 mr-1"
- >
- <p className="text-xs">{item}</p>
- </Chip>
- ))}
- </div>
- </div>
+ <section className="m-auto lg:w-9/12">
+ <div className="flex items-center justify-center md:justify-start lg: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="mb-1 mr-1"
+ >
+ <p className="text-xs">{item}</p>
+ </Chip>
+ ))}
</div>
- <DescriptionTabs data={data} />
- <EpisodesContainer data={data} />
- <br />
- <br />
- <br />
- </section>
- </section>
+ </div>
+ </div>
+ <DescriptionTabs data={data} />
+ <EpisodesContainer data={data} />
+ <br />
+ <br />
+ <br />
</section>
);
};
diff --git a/src/app/anime/components/infoTabs.jsx b/src/app/anime/components/infoTabs.jsx index 68a1da1..aa0e9db 100644 --- a/src/app/anime/components/infoTabs.jsx +++ b/src/app/anime/components/infoTabs.jsx @@ -9,14 +9,14 @@ export default function DescriptionTabs({ data: data }) { <div className="flex w-full flex-col"> <Tabs aria-label="Options" className={lexend.className}> <Tab key="description" title="Description"> - <Card> + <Card shadow="sm"> <CardBody className={atkinson.className}> {data.description || "No description found"} </CardBody> </Card> </Tab> <Tab key="episodes" title="Details"> - <Card> + <Card shadow="sm"> <CardBody className={atkinson.className}> <h4> <strong>Episodes</strong>:{" "} diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx index ba5c7cf..bf9ec28 100644 --- a/src/app/anime/components/search_results.jsx +++ b/src/app/anime/components/search_results.jsx @@ -27,7 +27,8 @@ const SearchResults = async (title) => { <Card className="overflow-hidden" isPressable - shadow="lg" + isHoverable + shadow="sm" > <CardBody> <Image diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx index bb8d6f1..d06b344 100644 --- a/src/app/anime/page.jsx +++ b/src/app/anime/page.jsx @@ -35,14 +35,19 @@ const AnimeHomepage = async () => { aria-label="anime redirection links"
className="mx-1 flex flex-col items-center"
>
- <Card className="overflow-visible" isPressable>
+ <Card
+ className="overflow-visible"
+ isPressable
+ isHoverable
+ shadow="sm"
+ >
<CardBody>
<Image
alt="Anime Poster"
src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
width={270}
- height={160}
- className="h-60 overflow-hidden rounded-md"
+ height={170}
+ className="h-64 overflow-hidden rounded-md"
priority
/>
</CardBody>
diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx index 950b807..1ea4f13 100644 --- a/src/app/components/header/header.jsx +++ b/src/app/components/header/header.jsx @@ -16,7 +16,33 @@ export default async function Header() { <Link href="/">Dramalama</Link>
</p>
</NavbarBrand>
-
+ <NavbarContent className="hidden sm:flex gap-4" justify="center">
+ <NavbarItem>
+ <Link href="/anime" className="text-sky-400">
+ Anime
+ </Link>
+ </NavbarItem>
+ <NavbarItem>
+ <Link href="/kdrama" className="text-green-300">
+ K-Dramas
+ </Link>
+ </NavbarItem>
+ <NavbarItem>
+ <Link href="/manga" className="text-orange-400">
+ Manga
+ </Link>
+ </NavbarItem>
+ <NavbarItem>
+ <Link href="/web-series" className="text-violet-300">
+ TV shows
+ </Link>
+ </NavbarItem>
+ <NavbarItem>
+ <Link href="/movies" className="text-teal-400">
+ Movies
+ </Link>
+ </NavbarItem>
+ </NavbarContent>
<NavbarContent justify="end">
<NavbarItem>
<ThemeSwitcher />
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx index b18c0ee..b931760 100644 --- a/src/app/kdrama/[id]/page.jsx +++ b/src/app/kdrama/[id]/page.jsx @@ -11,49 +11,39 @@ export default async function DramaInfo({ params }) { PreFetchVideoLinks(data.episodes, data.id);
return (
- <section
- style={{
- backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
- backgroundSize: "40px 40px",
- }}
- className="h-screen bg-white dark:bg-black"
- >
- <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}
- 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 className="mt-1">
- {data.genres &&
- data.genres.map((item, index) => (
- <Chip
- key={index}
- color="warning"
- variant="faded"
- className="mb-1 mr-1"
- >
- <p className="text-xs">{item}</p>
- </Chip>
- ))}
- </div>
- </div>
+ <section className="m-auto lg:w-9/12">
+ <div className="flex items-center justify-center md:justify-start lg: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 className="mt-1">
+ {data.genres &&
+ data.genres.map((item, index) => (
+ <Chip
+ key={index}
+ color="warning"
+ variant="faded"
+ className="mb-1 mr-1"
+ >
+ <p className="text-xs">{item}</p>
+ </Chip>
+ ))}
</div>
- <DescriptionTabs data={data} />
- <EpisodesContainer data={data} />
- <br />
- <br />
- <br />
- </section>
- </section>
+ </div>
+ </div>
+ <DescriptionTabs data={data} />
+ <EpisodesContainer data={data} />
+ <br />
+ <br />
+ <br />
</section>
);
}
diff --git a/src/app/kdrama/components/searchFormatter.jsx b/src/app/kdrama/components/searchFormatter.jsx index 21a52a5..fad1585 100644 --- a/src/app/kdrama/components/searchFormatter.jsx +++ b/src/app/kdrama/components/searchFormatter.jsx @@ -19,7 +19,12 @@ const SearchedDataFormatter = async (data) => { className="mx-1 flex flex-col items-center" title={item.title} > - <Card className="overflow-hidden" isPressable> + <Card + className="overflow-hidden" + isPressable + isHoverable + shadow="sm" + > <CardBody> <Image alt="Searched Kdrama Poster" diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx index f5e1e0e..3f57967 100644 --- a/src/app/kdrama/page.jsx +++ b/src/app/kdrama/page.jsx @@ -34,7 +34,12 @@ const KdramaHomepage = async () => { aria-label="anime redirection links"
className="mx-1 flex flex-col items-center"
>
- <Card className="overflow-visible" isPressable>
+ <Card
+ className="overflow-visible"
+ isPressable
+ isHoverable
+ shadow="sm"
+ >
<CardBody>
<Image
alt="Kdrama Poster"
diff --git a/src/app/manga/[id]/page.jsx b/src/app/manga/[id]/page.jsx index d6828b2..f048b06 100644 --- a/src/app/manga/[id]/page.jsx +++ b/src/app/manga/[id]/page.jsx @@ -10,39 +10,34 @@ const MangaInfoPage = async ({ params }) => { const data = await MangaInfoResults(id); return ( - <section> - <section> - <section className="m-auto w-full lg:w-9/12"> - {/* header section */} - <div className="flex items-center p-2"> - <Image - src={data.image} - width={170} - height={280} - className="rounded-lg" - alt="Manga Poster" - /> - <div className="ml-2"> - <h3 className="text-2xl"> - {data.title.english || data.title.romaji} - </h3> - {data.genres && - data.genres.map((item, index) => ( - <Chip - key={index} - color="warning" - variant="faded" - size="sm" - className="mr-1" - > - {item} - </Chip> - ))} - </div> - </div> - <MangaDescriptionTabs data={data} /> - </section> - </section> + <section className="m-auto w-full lg:w-9/12"> + <div className="flex items-center p-2"> + <Image + src={data.image} + width={170} + height={280} + className="rounded-lg" + alt="Manga Poster" + /> + <div className="ml-2"> + <h3 className="text-2xl"> + {data.title.english || data.title.romaji} + </h3> + {data.genres && + data.genres.map((item, index) => ( + <Chip + key={index} + color="warning" + variant="faded" + size="sm" + className="mr-1" + > + {item} + </Chip> + ))} + </div> + </div> + <MangaDescriptionTabs data={data} /> </section> ); }; diff --git a/src/app/movies/[id]/page.jsx b/src/app/movies/[id]/page.jsx index 04fba97..e60d6d9 100644 --- a/src/app/movies/[id]/page.jsx +++ b/src/app/movies/[id]/page.jsx @@ -11,51 +11,39 @@ const MovieInfoPage = async ({ params }) => { const data = await MovieInfoData(id); return ( - <section - style={{ - backgroundImage: `radial-gradient(gray 1px, transparent 1px)`, - backgroundSize: "40px 40px", - }} - 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 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> + <section className="pt-2 m-auto w-full lg:w-9/12"> + <MovieVideoPlayer id={data.id} /> + <div className="flex items-center"> + <Image + isBlurred + shadow="md" + 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> - <DescriptionTabs data={data} /> - <Questions /> - </section> - </section> + </div> + </div> + <DescriptionTabs data={data} /> + <Questions /> </section> ); }; diff --git a/src/app/movies/components/descriptionTabs.jsx b/src/app/movies/components/descriptionTabs.jsx index 7eec2fb..dc11939 100644 --- a/src/app/movies/components/descriptionTabs.jsx +++ b/src/app/movies/components/descriptionTabs.jsx @@ -11,14 +11,14 @@ export default function DescriptionTabs({ data: data }) { <div className="flex w-full flex-col"> <Tabs aria-label="Options" className={lexend.className}> <Tab key="description" title="Description"> - <Card> + <Card shadow="sm"> <CardBody className={atkinson.className}> {data.overview || "No description found"} </CardBody> </Card> </Tab> <Tab key="episodes" title="Details"> - <Card> + <Card shadow="sm"> <CardBody className={lexend.className}> <h4> <strong>Tagline</strong>:{" "} @@ -62,7 +62,7 @@ export default function DescriptionTabs({ data: data }) { </Card> </Tab> <Tab key="download" title="Download"> - <Card> + <Card shadow="sm"> <CardBody className={lexend.className}> <h4 className="flex items-center"> <Link diff --git a/src/app/movies/components/searchFormatter.jsx b/src/app/movies/components/searchFormatter.jsx index f6a578e..d241d7b 100644 --- a/src/app/movies/components/searchFormatter.jsx +++ b/src/app/movies/components/searchFormatter.jsx @@ -18,7 +18,12 @@ const MovieSearchFormatter = async (data) => { aria-label="anime redirection links" className="mx-1 flex flex-col items-center" > - <Card className="overflow-hidden" isPressable> + <Card + className="overflow-hidden" + isPressable + isHoverable + shadow="sm" + > <CardBody> <Image alt="Searched Movie Poster" diff --git a/src/app/movies/components/videoPlayer.jsx b/src/app/movies/components/videoPlayer.jsx index 154d633..12885da 100644 --- a/src/app/movies/components/videoPlayer.jsx +++ b/src/app/movies/components/videoPlayer.jsx @@ -2,11 +2,11 @@ const MovieVideoPlayer = async ({ id: id }) => { const videoFrameGenerator = (id) => { return ( <iframe - src={`https://vidsrc.pro/embed/movie/${id}?player=new`} + src={`https://vidsrc.pro/embed/movie/${id}`} allowFullScreen referrerPolicy="origin" height={720} - className="w-full h-[240px] lg:h-[720px]" + className="w-full h-[240px] lg:h-[720px] rounded-lg" ></iframe> ); }; diff --git a/src/app/movies/page.jsx b/src/app/movies/page.jsx index a0b8963..84ce9d6 100644 --- a/src/app/movies/page.jsx +++ b/src/app/movies/page.jsx @@ -33,7 +33,12 @@ export default async function MovieHomepage() { aria-label="anime redirection links" className="mx-1 flex flex-col items-center" > - <Card className="overflow-visible" isPressable> + <Card + className="overflow-visible" + isPressable + isHoverable + shadow="sm" + > <CardBody> <Image alt="Movie Poster" diff --git a/src/app/web-series/[id]/page.jsx b/src/app/web-series/[id]/page.jsx index f3922de..c947f5a 100644 --- a/src/app/web-series/[id]/page.jsx +++ b/src/app/web-series/[id]/page.jsx @@ -11,51 +11,39 @@ const SeriesInfoPage = async ({ params }) => { const data = await SERIES_INFO(id); return ( - <section - style={{ - backgroundImage: `radial-gradient(gray 1px, transparent 1px)`, - backgroundSize: "40px 40px", - }} - className="h-screen bg-white dark:bg-black" - > - <section className="to-white-400 absolute inset-0 bg-gradient-to-b from-transparent dark:to-black"> - <section className="m-auto w-full pt-20 lg:w-9/12"> - <SeriesVideoPlayer 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.name}</strong> - </h4> - <div className="mt-1"> - {data.genres && - data.genres.map((item, index) => ( - <Chip - key={index} - color="warning" - variant="faded" - className="mb-1 mr-1" - > - <p className="text-xs"> - {item.name} - </p> - </Chip> - ))} - </div> - </div> + <section className="m-auto w-full pt-2 lg:w-9/12"> + <SeriesVideoPlayer id={data.id} /> + <div className="flex items-center"> + <Image + isBlurred + shadow="md" + 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.name}</strong> + </h4> + <div className="mt-1"> + {data.genres && + data.genres.map((item, index) => ( + <Chip + key={index} + color="warning" + variant="faded" + className="mb-1 mr-1" + > + <p className="text-xs">{item.name}</p> + </Chip> + ))} </div> - <SeriesDescriptionTabs data={data} /> - <Questions /> - </section> - </section> + </div> + </div> + <SeriesDescriptionTabs data={data} /> + <Questions /> </section> ); }; diff --git a/src/app/web-series/components/descriptionTabs.jsx b/src/app/web-series/components/descriptionTabs.jsx index ec6a78b..d0a4945 100644 --- a/src/app/web-series/components/descriptionTabs.jsx +++ b/src/app/web-series/components/descriptionTabs.jsx @@ -19,14 +19,14 @@ export default function SeriesDescriptionTabs({ data: data }) { <div className="flex w-full flex-col"> <Tabs aria-label="Options" className={lexend.className}> <Tab key="description" title="Description"> - <Card> + <Card shadow="sm"> <CardBody className={atkinson.className}> {data.overview || "No description found"} </CardBody> </Card> </Tab> <Tab key="episodes" title="Details"> - <Card> + <Card shadow="sm"> <CardBody className={lexend.className}> <h4> <strong>Tagline</strong>:{" "} @@ -86,7 +86,7 @@ export default function SeriesDescriptionTabs({ data: data }) { </Card> </Tab> <Tab key="seasons" title="Seasons"> - <Card> + <Card shadow="sm"> <CardBody> {data.seasons && data.seasons.map((item, index) => ( @@ -94,7 +94,7 @@ export default function SeriesDescriptionTabs({ data: data }) { key={index} className="flex flex-row items-center mb-1" isPressable - shadow="lg" + shadow="sm" > <Image src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`} diff --git a/src/app/web-series/components/seriesSearchFormatter.jsx b/src/app/web-series/components/seriesSearchFormatter.jsx index 3b119d6..1480d84 100644 --- a/src/app/web-series/components/seriesSearchFormatter.jsx +++ b/src/app/web-series/components/seriesSearchFormatter.jsx @@ -19,7 +19,12 @@ const SeriesSearchFormatter = async (data) => { aria-label="anime redirection links" className="mx-1 flex flex-col items-center" > - <Card className="overflow-hidden" isPressable> + <Card + className="overflow-hidden" + isPressable + isHoverable + shadow="sm" + > <CardBody> <Image alt="Searched Movie Poster" diff --git a/src/app/web-series/components/videoPlayer.jsx b/src/app/web-series/components/videoPlayer.jsx index 49f44f5..3c2f017 100644 --- a/src/app/web-series/components/videoPlayer.jsx +++ b/src/app/web-series/components/videoPlayer.jsx @@ -16,7 +16,7 @@ const SeriesVideoPlayer = ({ id: id }) => { const VideoFrameGenerator = (sea, epi) => { return ( <iframe - src={`https://vidsrc.pro/embed/tv/${id}/${sea}/${epi}?player=new`} + src={`https://vidsrc.pro/embed/tv/${id}/${sea}/${epi}`} allowFullScreen referrerPolicy="origin" height={720} @@ -28,7 +28,7 @@ const SeriesVideoPlayer = ({ id: id }) => { function renderVideoFrame() { if (seasonNumber === "" || episodeNumber === "") { alert( - "Make sure that you have entered the episode number and the season number.", + "Make sure that you have entered the episode number and the season number." ); return; } diff --git a/src/app/web-series/page.jsx b/src/app/web-series/page.jsx index f9e0b57..a5f24bb 100644 --- a/src/app/web-series/page.jsx +++ b/src/app/web-series/page.jsx @@ -38,7 +38,12 @@ const SeriesHomepage = async () => { aria-label="anime redirection links" className="mx-1 flex flex-col items-center" > - <Card className="overflow-visible" isPressable> + <Card + className="overflow-visible" + isPressable + isHoverable + shadow="sm" + > <CardBody> <Image alt="Movie Poster" |