feat: new UI components

feat: base BrowsePage design fix: remove transitions from content Cards fix: match content data with the new temp server
DesterLib · Aug 5, 2024 · ef4ccec · ef4ccec
1 parent 9a84662
commit ef4ccec
Show file tree

Hide file tree

Showing 29 changed files with 308 additions and 8,771 deletions.
diff --git a/src/config/config.ts b/src/config/config.ts
@@ -22,7 +22,7 @@ const APP_API_PATHS = {
   home: APP_CONFIG.server_path + "/" + APP_CONFIG.home_path,
   movie: APP_CONFIG.server_path + "/" + APP_CONFIG.movie_path,
   tv: APP_CONFIG.server_path + "/" + APP_CONFIG.tv_path,
-  image: APP_CONFIG.server_path + "/" + APP_CONFIG.image_path,
+  image: APP_CONFIG.server_path + "/" + APP_CONFIG.image_path + "/original",
 };
 
 export { APP_CONFIG, APP_API_PATHS };
diff --git a/src/config/default.config.json b/src/config/default.config.json
@@ -1,5 +1,5 @@
 {
-  "server_path": "http://localhost:3003",
+  "server_path": "http://localhost:8000",
   "home_path": "home",
   "movie_path": "movie",
   "tv_path": "tv",

diff --git a/src/lib/components/actions/CheckBox.tsx b/src/lib/components/actions/CheckBox.tsx
@@ -0,0 +1,23 @@
+import { Checkbox as HUICheckBox } from "@headlessui/react";
+import { useState } from "react";
+import HeroIcon from "../ui/HeroIcon";
+
+const Checkbox = ({ id }: any) => {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <HUICheckBox
+      id={id}
+      checked={enabled}
+      onChange={setEnabled}
+      className="group size-4 rounded-md bg-white/10 p-1 ring-1 ring-white/5 ring-inset data-[checked]:bg-white text-black"
+    >
+      <HeroIcon
+        iconName="CheckIcon"
+        stroke="hidden size-3 group-data-[checked]:block"
+      />
+    </HUICheckBox>
+  );
+};
+
+export default Checkbox;
diff --git a/src/lib/components/actions/TextInput.tsx b/src/lib/components/actions/TextInput.tsx
@@ -7,17 +7,15 @@ interface TextInput {
 
 const TextInput = ({ label, description }: TextInput) => {
   return (
-    <div className="w-full">
-      <Field>
-        <Label className="text-sm/6 font-medium text-white">{label}</Label>
-        {description && (
-          <Description className="text-sm/6 text-white/50">
-            {description}
-          </Description>
-        )}
-        <Input className="h-10 block w-full rounded-xl shadow-[inset_0_1px_0_0_#ffffff1a] border-none bg-white/5 focus:bg-white/10 py-1.5 px-3 text-sm/6 text-white" />
-      </Field>
-    </div>
+    <Field className="space-y-2 w-full">
+      <Label className="text-sm text-white">{label}</Label>
+      {description && (
+        <Description className="text-sm/6 text-white/50">
+          {description}
+        </Description>
+      )}
+      <Input className="h-10 block w-full rounded-xl shadow-[inset_0_1px_0_0_#ffffff1a] border-none bg-white/5 focus:bg-white/10 py-1.5 px-3 text-sm/6 text-white" />
+    </Field>
   );
 };
 

diff --git a/src/lib/components/logic/LazyImage.tsx b/src/lib/components/logic/LazyImage.tsx
@@ -5,9 +5,10 @@ interface LazyImageProps {
   src: string;
   alt: string;
   className?: string;
+  style?: any;
 }
 
-const LazyImage = ({ src, alt, className = "" }: LazyImageProps) => {
+const LazyImage = ({ src, alt, className = "", style }: LazyImageProps) => {
   const [imageLoading, setImageLoading] = useState(true);
 
   const imageLoaded = () => {
@@ -30,6 +31,7 @@ const LazyImage = ({ src, alt, className = "" }: LazyImageProps) => {
           animate={imageLoading ? "hide" : "show"}
           onLoad={imageLoaded}
           className="object-cover h-full w-full"
+          style={style}
           src={src}
           alt={alt}
         />

diff --git a/src/lib/components/logic/Sliders/CollectionSlider.tsx b/src/lib/components/logic/Sliders/CollectionSlider.tsx
@@ -5,7 +5,8 @@ import generateRandomString from "../../../utils/uidGenerator";
 import { useEffect, useRef } from "react";
 import CollectionCard from "../../ui/Cards/CollectionCard";
 
-const CollectionSlider = ({ title, data = [] }: any) => {
+const CollectionSlider = ({ title, data }: any) => {
+  console.log(data);
   const sliderUid = generateRandomString();
   const shadowTextRef = useRef<HTMLDivElement>(null);
 
@@ -71,4 +72,4 @@ const CollectionSlider = ({ title, data = [] }: any) => {
   );
 };
 
-export default CollectionSlider;
+export default CollectionSlider;
diff --git a/src/lib/components/logic/Sliders/ContentSlider.tsx b/src/lib/components/logic/Sliders/ContentSlider.tsx
@@ -31,7 +31,7 @@ const ContentSlider = ({ title, type, data = [] }: any) => {
   }, []);
 
   return (
-    <section className="w-full z-0 relative">
+    <section className="w-full z-0 relative space-y-4">
       <div className="flex justify-between px-6">
         <div className="text-white/60 font-bold text-4xl/normal">{title}</div>
         <SliderControls sliderUid={sliderUid} />
@@ -62,15 +62,19 @@ const ContentSlider = ({ title, type, data = [] }: any) => {
           prevEl: `.customSwiperPrevious${sliderUid}`,
         }}
       >
-        {data.map((item: any, index: number) => (
-          <SwiperSlide key={index}>
-            {type === "movie" ? (
-              <MovieCard item={item} />
-            ) : (
-              <TvCard item={item} />
-            )}
-          </SwiperSlide>
-        ))}
+        {data.map((item: any, index: any) => {
+          const mediaType = type !== undefined ? type : item.media_type;
+
+          return (
+            <SwiperSlide key={index}>
+              {mediaType === "movie" ? (
+                <MovieCard item={item} />
+              ) : (
+                <TvCard item={item} />
+              )}
+            </SwiperSlide>
+          );
+        })}
       </Swiper>
     </section>
   );

diff --git a/src/lib/components/logic/Sliders/GenreSlider.tsx b/src/lib/components/logic/Sliders/GenreSlider.tsx
@@ -5,33 +5,7 @@ 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 GenreSlider = ({ data }: any) => {
   const sliderUid = generateRandomString();
   const shadowTextRef = useRef<HTMLDivElement>(null);
 

diff --git a/src/lib/components/logic/Sliders/MainSlider.tsx b/src/lib/components/logic/Sliders/MainSlider.tsx
@@ -16,24 +16,24 @@ import generateRandomString from "../../../utils/uidGenerator";
 import { APP_API_PATHS } from "../../../../config/config";
 
 const SlideContent = ({ item, index }: any) => {
-  const colors = useImageColors(`${APP_API_PATHS.image}${item.backdrop_path}`);
+  // const colors = useImageColors(`${APP_API_PATHS.image}${item.backdrop_path}`);
 
-  useEffect(() => {
-    if (Object.keys(colors).length !== 0 && item.id) {
-      const updateSlider = async () => {
-        try {
-          await axios.patch(`${APP_API_PATHS.home}?update=main_slider`, {
-            tmdbId: item.id,
-            colors,
-          });
-        } catch (error) {
-          console.error("Error with patch request:", error);
-        }
-      };
+  // useEffect(() => {
+  //   if (colors && Object.keys(colors).length !== 0 && item.id) {
+  //     const updateSlider = async () => {
+  //       try {
+  //         await axios.patch(`${APP_API_PATHS.home}?update=main_slider`, {
+  //           tmdbId: item.id,
+  //           colors,
+  //         });
+  //       } catch (error) {
+  //         console.error("Error with patch request:", error);
+  //       }
+  //     };
 
-      updateSlider();
-    }
-  }, [colors, item.id]);
+  //     updateSlider();
+  //   }
+  // }, [colors, item.id]);
   return (
     <>
       <img

diff --git a/src/lib/components/ui/Cards/CollectionCard.tsx b/src/lib/components/ui/Cards/CollectionCard.tsx
@@ -2,26 +2,19 @@ import { Link } from "react-router-dom";
 
 const CollectionCard = ({ item }: any) => {
   return (
-    <Link
-      to="/"
-      className="w-full group relative flex justify-center items-center mt-4"
-    >
-      <div className="w-[90%] h-full absolute -top-2 group-hover:-top-4 aspect-video overflow-hidden bg-white/20 -z-10 rounded-2xl backdrop-blur-2xl transition-all"></div>
-      <div className="w-[95%] h-full absolute -top-1 group-hover:-top-2 aspect-video overflow-hidden bg-white/40 -z-10 rounded-2xl backdrop-blur-2xl transition-all"></div>
-      <div className="aspect-video rounded-2xl overflow-hidden">
-        <img
-          className="w-full h-full object-cover"
-          src={item.backdrop}
-          alt=""
-        />
-      </div>
-      <div className="absolute bottom-0 left-0 right-0 flex h-full w-full items-center justify-center bg-white/10 backdrop-blur-2xl rounded-2xl">
-        <img
-          className="group-hover:scale-110 transition-transform brightness-0 w-2/3 invert h-1/3 object-contain"
-          src={item.logo}
-          alt=""
-        />
+    <Link to="/" className="w-full group">
+      <div className="relative flex justify-center items-center mt-4">
+        <div className="w-[90%] h-full absolute -top-2 group-hover:-top-4 aspect-video overflow-hidden bg-white/20 -z-10 rounded-2xl backdrop-blur-2xl transition-all"></div>
+        <div className="w-[95%] h-full absolute -top-1 group-hover:-top-2 aspect-video overflow-hidden bg-white/40 -z-10 rounded-2xl backdrop-blur-2xl transition-all"></div>
+        <div className="aspect-video rounded-2xl overflow-hidden">
+          <img
+            className="w-full h-full object-cover"
+            src={item.backdrop_path}
+            alt=""
+          />
+        </div>
       </div>
+      <div className="mt-2">{item.name}</div>
     </Link>
   );
 };

diff --git a/src/lib/components/ui/Cards/GenreCard.tsx b/src/lib/components/ui/Cards/GenreCard.tsx
@@ -1,7 +1,7 @@
 const GenreCard = ({ item }: any) => {
   return (
     <div className="w-full h-full bg-white/20 transition-transform hover:scale-110 aspect-video rounded-2xl overflow-hidden flex justify-center items-center backdrop-blur-md">
-      <div className="text-2xl font-bold">{item.genre}</div>
+      <div className="text-2xl font-bold text-center px-6">{item.name}</div>
     </div>
   );
 };

diff --git a/src/lib/components/ui/Cards/MovieCard.tsx b/src/lib/components/ui/Cards/MovieCard.tsx
@@ -1,74 +1,40 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import { motion, AnimatePresence } from "framer-motion";
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
 import { Link } from "react-router-dom";
-import { useState, useEffect } from "react";
 import { APP_API_PATHS } from "../../../../config/config";
 import LazyImage from "../../logic/LazyImage";
 
 const MovieCard = ({ item }: any) => {
-  const [isHover, setIsHover] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
     <Link to={`/movie/${item.id}`}>
-      <div
-        onMouseEnter={() => {
-          setIsHover(true);
-        }}
-        onMouseLeave={() => !isOpen && setIsHover(false)}
-        className={`w-full space-y-2 group transition-transform mt-4 ${
-          isHover && "scale-105"
-        }`}
-      >
+      <div className="w-full space-y-2 group transition-transform">
         <div className="rounded-2xl aspect-video overflow-hidden relative bg-zinc-700">
           <LazyImage
             src={`${APP_API_PATHS.image}${item.backdrop_path}`}
             alt=""
           />
-          <div className="absolute top-0 left-0 w-full h-full border rounded-2xl border-zinc-400/20 transition-colors"></div>
+          <div className="absolute top-0 left-0 w-full h-full rounded-2xl bg-gradient-to-tl from-transparent to-transparent group-hover:from-black transition-colors"></div>
           <Menu>
-            {({ open }) => {
-              useEffect(() => {
-                setIsOpen(open);
-                setIsHover(open);
-              }, [open]);
-              return (
-                <>
-                  <MenuButton
-                    className={`absolute bottom-2 ${
-                      open ? "opacity-100" : "opacity-0"
-                    }  group-hover:opacity-100 transition-all right-2 p-1 rounded-2xl bg-neutral-600/40 backdrop-blur-lg group-hover:bg-emerald-400 drop-shadow-sm ring-emerald-500 shadow-[inset_0_1px_0_0_#ffffff1a]`}
-                  >
-                    <EllipsisHorizontalIcon className="size-6" />
-                  </MenuButton>
-                  <AnimatePresence>
-                    {open && (
-                      <MenuItems
-                        anchor="bottom end"
-                        static
-                        as={motion.div}
-                        initial={{ opacity: 0, scale: 0.95 }}
-                        animate={{ opacity: 1, scale: 1 }}
-                        exit={{ opacity: 0, scale: 0.95 }}
-                        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-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-xl py-1.5 px-3 data-[focus]:bg-white/10">
-                            Hide
-                          </button>
-                        </MenuItem>
-                      </MenuItems>
-                    )}
-                  </AnimatePresence>
-                </>
-              );
-            }}
+            <MenuButton
+              className={`absolute bottom-2 group-hover:opacity-100 transition-all right-2 p-1 rounded-2xl bg-neutral-600/40 backdrop-blur-lg group-hover:bg-emerald-400 drop-shadow-sm ring-emerald-500 shadow-[inset_0_1px_0_0_#ffffff1a]`}
+            >
+              <EllipsisHorizontalIcon className="size-6" />
+            </MenuButton>
+            <MenuItems
+              anchor="bottom end"
+              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-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-xl py-1.5 px-3 data-[focus]:bg-white/10">
+                  Hide
+                </button>
+              </MenuItem>
+            </MenuItems>
           </Menu>
         </div>
         <div>