feat: base BrowsePage ui redesign

feat: add new components
DesterLib · Jul 30, 2024 · 9f81fad · 9f81fad
1 parent 4495c07
commit 9f81fad
Show file tree

Hide file tree

Showing 16 changed files with 338 additions and 188 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,6 +35,10 @@ const App = () => {
         {
           path: "browse",
           element: <BrowsePage />,
+          loader: async () => {
+            const res = await axios.get(APP_API_PATHS.home);
+            return res.data;
+          },
         },
         {
           path: "library",

diff --git a/src/index.css b/src/index.css
@@ -76,7 +76,7 @@
 
 .shadow-text {
   position: absolute;
-  bottom: calc(90% - 60px);
+  bottom: calc(90% - 50px);
   font-size: calc(4vw + 4vh);
   color: rgba(255, 255, 255, 0.1);
   transform: translateY(20%);
@@ -86,7 +86,25 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  width: 80%;
+  width: fit-content;
+}
+
+.shadow-text-color {
+  position: absolute;
+  bottom: calc(90% - 50px);
+  font-size: calc(4vw + 4vh);
+  background: linear-gradient(45deg, #0048ff, #00ff00, #00f2ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  transform: translateY(20%);
+  z-index: 1;
+  white-space: nowrap;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: fit-content;
 }
 
 .swiper-pagination {

diff --git a/src/lib/components/logic/Filters/LibraryFilter.tsx b/src/lib/components/logic/Filters/LibraryFilter.tsx
@@ -37,7 +37,7 @@ const SelectMenu = ({ title }: any) => {
           <ListboxOption
             key={person.id}
             value={person}
-            className="group flex items-center gap-2 rounded-lg py-1.5 px-3 select-none data-[focus]:bg-white/10 text-sm/tight"
+            className="group flex items-center gap-2 rounded-xl py-1.5 px-3 select-none data-[focus]:bg-white/10 text-sm/tight"
           >
             <div className="invisible size-4 fill-white group-data-[selected]:visible h-6 w-6 p-1 flex justify-center items-center">
               <HeroIcon iconName="CheckIcon" />

diff --git a/src/lib/components/logic/Sliders/GenreSlider.tsx b/src/lib/components/logic/Sliders/GenreSlider.tsx
@@ -0,0 +1,105 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import SliderControls from "./SliderControls";
+import generateRandomString from "../../../utils/uidGenerator";
+import { useEffect, useRef } from "react";
+import GenreCard from "../../ui/Cards/GenreCard";
+
+const GenreSlider = ({ data = [] }: any) => {
+  data = [
+    {
+      id: 1,
+      genre: "Action",
+    },
+    {
+      id: 2,
+      genre: "Adventure",
+    },
+    {
+      id: 3,
+      genre: "Sci-Fi",
+    },
+    {
+      id: 4,
+      genre: "Thriller",
+    },
+    {
+      id: 5,
+      genre: "Horror",
+    },
+    {
+      id: 6,
+      genre: "Comedy",
+    },
+  ];
+  const sliderUid = generateRandomString();
+  const shadowTextRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const adjustFontSize = () => {
+      const container: HTMLDivElement | null =
+        document.querySelector(".container");
+      const shadowText = shadowTextRef.current;
+
+      if (container && shadowText) {
+        const containerWidth = container.offsetWidth;
+        shadowText.style.fontSize = `${containerWidth * 0.1}px`;
+      }
+    };
+
+    window.addEventListener("resize", adjustFontSize);
+    adjustFontSize();
+
+    return () => {
+      window.removeEventListener("resize", adjustFontSize);
+    };
+  }, []);
+
+  return (
+    <section className="w-full z-0 relative space-y-4">
+      <div
+        className="shadow-text-color font-extrabold left-0 right-0 mx-auto"
+        ref={shadowTextRef}
+      >
+        Genres
+      </div>
+      <div className="flex justify-end px-6">
+        <SliderControls sliderUid={sliderUid} />
+      </div>
+      <Swiper
+        className="!px-2 !py-2 w-full"
+        breakpoints={{
+          320: {
+            slidesPerView: 2,
+            spaceBetween: 20,
+          },
+          580: {
+            slidesPerView: 3,
+            spaceBetween: 20,
+          },
+          920: {
+            slidesPerView: 3,
+            spaceBetween: 20,
+          },
+          1080: {
+            slidesPerView: 4,
+            spaceBetween: 20,
+          },
+        }}
+        modules={[Navigation]}
+        navigation={{
+          nextEl: `.customSwiperNext${sliderUid}`,
+          prevEl: `.customSwiperPrevious${sliderUid}`,
+        }}
+      >
+        {data.map((item: any, index: number) => (
+          <SwiperSlide key={index}>
+            <GenreCard item={item} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </section>
+  );
+};
+
+export default GenreSlider;
diff --git a/src/lib/components/logic/Sliders/MainSlider.tsx b/src/lib/components/logic/Sliders/MainSlider.tsx
@@ -26,7 +26,6 @@ const SlideContent = ({ item, index }: any) => {
             tmdbId: item.id,
             colors,
           });
-          console.log("Patch request successful");
         } catch (error) {
           console.error("Error with patch request:", error);
         }
@@ -64,6 +63,7 @@ const SlideContent = ({ item, index }: any) => {
               <Button size="large" icon="PlayIcon">
                 Play Now
               </Button>
+              <IconButton variant="secondary" size="large" icon="FilmIcon" />
               <IconButton
                 variant="secondary"
                 size="large"

diff --git a/src/lib/components/ui/Cards/GenreCard.tsx b/src/lib/components/ui/Cards/GenreCard.tsx
@@ -0,0 +1,9 @@
+const GenreCard = ({ item }: any) => {
+  return (
+    <div className="aspect-video bg-white/20 rounded-2xl flex justify-center items-center backdrop-blur-md px-6 font-bold text-4xl">
+      <div>{item.genre}</div>
+    </div>
+  );
+};
+
+export default GenreCard;
diff --git a/src/lib/components/ui/Cards/LibraryCard.tsx b/src/lib/components/ui/Cards/LibraryCard.tsx
@@ -62,12 +62,12 @@ const LibraryCard = ({ item, type = "movie" }: any) => {
                         className="w-52 z-50 origin-top-right rounded-2xl border border-white/5 bg-zinc-700/60 backdrop-blur-lg p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none"
                       >
                         <MenuItem>
-                          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
+                          <button className="group flex w-full items-center gap-2 rounded-xl py-1.5 px-3 data-[focus]:bg-white/10">
                             Trailer
                           </button>
                         </MenuItem>
                         <MenuItem>
-                          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
+                          <button className="group flex w-full items-center gap-2 rounded-xl py-1.5 px-3 data-[focus]:bg-white/10">
                             Hide
                           </button>
                         </MenuItem>

diff --git a/src/lib/components/ui/Cards/MovieCard.tsx b/src/lib/components/ui/Cards/MovieCard.tsx
@@ -54,12 +54,12 @@ const MovieCard = ({ item }: any) => {
                         className="w-52 z-50 origin-top-right rounded-2xl border border-white/5 bg-zinc-700/60 backdrop-blur-lg p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none"
                       >
                         <MenuItem>
-                          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
+                          <button className="group flex w-full items-center gap-2 rounded-xl py-1.5 px-3 data-[focus]:bg-white/10">
                             Trailer
                           </button>
                         </MenuItem>
                         <MenuItem>
-                          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
+                          <button className="group flex w-full items-center gap-2 rounded-xl py-1.5 px-3 data-[focus]:bg-white/10">
                             Hide
                           </button>
                         </MenuItem>

diff --git a/src/lib/components/ui/Cards/TvCard.tsx b/src/lib/components/ui/Cards/TvCard.tsx
@@ -1,9 +1,9 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { motion, AnimatePresence } from "framer-motion";
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
-import Chip from "../Chip";
 import { Link } from "react-router-dom";
 import { useState, useEffect } from "react";
+import Chip from "../Chip";
 import { APP_API_PATHS } from "../../../../config/config";
 import LazyImage from "../../logic/LazyImage";
 
@@ -61,12 +61,12 @@ const TvCard = ({ item }: any) => {
                         className="w-52 z-50 origin-top-right rounded-2xl border border-white/5 bg-zinc-700/60 backdrop-blur-lg p-1 text-sm/6 text-white [--anchor-gap:6px] focus:outline-none"
                       >
                         <MenuItem>
-                          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
+                          <button className="group flex w-full items-center gap-2 rounded-xl py-1.5 px-3 data-[focus]:bg-white/10">
                             Trailer
                           </button>
                         </MenuItem>
                         <MenuItem>
-                          <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
+                          <button className="group flex w-full items-center gap-2 rounded-xl py-1.5 px-3 data-[focus]:bg-white/10">
                             Hide
                           </button>
                         </MenuItem>

diff --git a/src/lib/components/ui/GradiantBgWrapper.tsx b/src/lib/components/ui/GradiantBgWrapper.tsx
@@ -1,9 +1,9 @@
 import { motion } from "framer-motion";
 
-const HomeBgWrapper = ({ colors, children }: any) => {
+const GradiantBgWrapper = ({ className, colors, children }: any) => {
   return (
     <motion.div
-      className="w-screen h-screen overflow-y-auto overscroll-none relative"
+      className={className}
       animate={{
         backgroundImage: `radial-gradient(
         circle farthest-corner at top left, 
@@ -28,4 +28,4 @@ const HomeBgWrapper = ({ colors, children }: any) => {
   );
 };
 
-export default HomeBgWrapper;
+export default GradiantBgWrapper;
diff --git a/src/lib/pages/BrowsePage.tsx b/src/lib/pages/BrowsePage.tsx
@@ -1,28 +1,59 @@
-import MainSlider from "../components/logic/Sliders/MainSlider";
-import ContentSlider from "../components/logic/Sliders/ContentSlider";
-import TransitionWrapper from "./TransitionWrapper";
 import { useLoaderData } from "react-router-dom";
+import CollectionSlider from "../components/logic/Sliders/CollectionSlider";
+import TransitionWrapper from "./TransitionWrapper";
+import { motion } from "framer-motion";
+import { APP_API_PATHS } from "../../config/config";
+import GradiantBgWrapper from "../components/ui/GradiantBgWrapper";
+import GenreSlider from "../components/logic/Sliders/GenreSlider";
 
 const BrowsePage = () => {
-  const movies = useLoaderData();
-
+  const home: any = useLoaderData();
   return (
-    <main className="w-full h-screen overflow-y-auto overscroll-none">
-      <MainSlider data={movies} type="movie" />
-      <section className="space-y-10 py-6 px-16">
-        <div className="flex">
-          <ContentSlider
-            title="Weekly Recommendation"
-            gradiant={true}
-            type="movie"
-            data={movies}
-          />
-        </div>
-        <div className="flex">
-          <ContentSlider title="Animation" type="movie" data={movies} />
+    <GradiantBgWrapper
+      colors={home.main_slider[2].colors}
+      className="w-full h-screen overflow-y-auto overscroll-none"
+    >
+      <div className="p-[4.5rem] space-y-12">
+        <div className="p-2 aspect-[30/10] flex space-x-4">
+          <motion.div className="w-full h-full rounded-2xl overflow-hidden">
+            <img
+              className="w-full h-full object-cover"
+              src={`${APP_API_PATHS.image}${home.main_slider[2].backdrop_path}`}
+              alt=""
+            />
+          </motion.div>
+          <div className="w-1/3 h-full grid grid-rows-2 gap-4">
+            <div className="h-full">
+              <div className="aspect-video rounded-2xl overflow-hidden h-full">
+                <img
+                  className="w-full h-full object-cover"
+                  src={`${APP_API_PATHS.image}${home.main_slider[0].backdrop_path}`}
+                  alt=""
+                />
+              </div>
+            </div>
+            <div className="h-full">
+              <div className="aspect-video rounded-2xl overflow-hidden h-full">
+                <img
+                  className="w-full h-full object-cover"
+                  src={`${APP_API_PATHS.image}${home.main_slider[1].backdrop_path}`}
+                  alt=""
+                />
+              </div>
+            </div>
+          </div>
         </div>
-      </section>
-    </main>
+        <div className="w-full my-auto h-[1px] bg-gradient-to-l from-transparent via-white/10 to-transparent mr-2"></div>
+        <GenreSlider data={home.collections} />
+        <div className="w-full my-auto h-[1px] bg-gradient-to-l from-transparent via-white/10 to-transparent mr-2"></div>
+        <CollectionSlider
+          shadowTitle="Collections"
+          type="movie"
+          data={home.collections}
+        />
+        <div className="w-full my-auto h-[1px] bg-gradient-to-l from-transparent via-white/10 to-transparent mr-2"></div>
+      </div>
+    </GradiantBgWrapper>
   );
 };
 

diff --git a/src/lib/pages/HomePage.tsx b/src/lib/pages/HomePage.tsx
@@ -26,16 +26,19 @@ const HomePage = () => {
   }, []);
 
   return (
-    <GradiantBgWrapper colors={home.main_slider[currentIndex].colors}>
+    <GradiantBgWrapper
+      className="w-screen h-screen overflow-y-auto overscroll-none relative"
+      colors={home.main_slider[currentIndex].colors}
+    >
       <MainSlider data={home.main_slider} type="tv" />
       <div className="m-[4.5rem] relative mt-28 space-y-12">
         <section className="w-full relative space-y-4">
           <div className="shadow-text font-extrabold left-0 right-0 mx-auto mb-16">
             Continue Watching
           </div>
           <div className="grid grid-cols-3 gap-5">
-            {home.continue_watching.map((item: any) => (
-              <WatchingCard item={item} />
+            {home.continue_watching.map((item: any, index: any) => (
+              <WatchingCard key={index} item={item} />
             ))}
           </div>
         </section>