Minor fixes, mainly to function (profiles)

TeachMeTW · Sep 11, 2023 · f865bdb · f865bdb
1 parent 6f2e03d
commit f865bdb
Show file tree

Hide file tree

Showing 37 changed files with 562 additions and 443 deletions.
diff --git a/components/AccountMenu.tsx b/components/AccountMenu.tsx
@@ -18,16 +18,16 @@ const AccountMenu: React.FC<AccountMenuProps> = ({ visible }) => {
     <div className="bg-black w-56 absolute top-14 right-0 py-5 flex-col border-2 border-gray-800 flex">
       <div className="flex flex-col gap-3">
         <div className="px-3 group/item flex flex-row gap-3 items-center w-full">
-            <img className="w-10 rounded-md" src="/images/profiles/5992.png" alt="Profile"></img>
+          <img className="w-12 rounded-md" src={currentUser?.image || "/images/profiles/5992.png"} alt="" />
           <p className="text-white text-sm group-hover/item:underline">{currentUser?.name}</p>
         </div>
       </div>
       <hr className="bg-gray-600 border-0 h-px my-4" />
       <div onClick={() => signOut()} className="px-3 text-center text-white text-sm hover:underline">
-        Sign out of NeetHub
+        Sign out of Neethub
       </div>
     </div>
   )
 }
 
-export default AccountMenu;
+export default AccountMenu;
diff --git a/components/Billboard.tsx b/components/Billboard.tsx
@@ -54,4 +54,4 @@ const Billboard: React.FC = () => {
     </div>
   )
 }
-export default Billboard;
+export default Billboard;
diff --git a/components/FavoriteButton.tsx b/components/FavoriteButton.tsx
@@ -47,4 +47,4 @@ const FavoriteButton: React.FC<FavoriteButtonProps> = ({ movieId }) => {
   )
 }
 
-export default FavoriteButton;
+export default FavoriteButton;
diff --git a/components/InfoModal.tsx b/components/InfoModal.tsx
@@ -76,4 +76,4 @@ const InfoModal: React.FC<InfoModalProps> = ({ visible, onClose }) => {
   );
 }
 
-export default InfoModal;
+export default InfoModal;
diff --git a/components/MobileMenu.tsx b/components/MobileMenu.tsx
@@ -1,32 +1,38 @@
 import React from 'react';
 
 interface MobileMenuProps {
-    visible?: boolean;
+  visible?: boolean;
 }
 
-const MobileMenu: React.FC<MobileMenuProps> = ({visible}) => {
-    if (!visible) return null;
-    return (
-        <div className='bg-black w-56 absolute top-8 left-0 py-5 flex-col border-2 border-gray-800 flex'>
-            <div className='flex flex-col gap-4'>
-                <div className='px-3 text-center text-white hover:underline'>
-                    Home
-                </div>
-                <div className='px-3 text-center text-white hover:underline'>
-                    Educational
-                </div>
-                <div className='px-3 text-center text-white hover:underline'>
-                    Entertainment
-                </div>
-                <div className='px-3 text-center text-white hover:underline'>
-                    New & Popular
-                </div>
-                <div className='px-3 text-center text-white hover:underline'>
-                    My Watch List
-                </div>
-            </div>
+const MobileMenu: React.FC<MobileMenuProps> = ({ visible }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className="bg-black w-56 absolute top-8 left-0 py-5 flex-col border-2 border-gray-800 flex">
+      <div className="flex flex-col gap-4">
+        <div className="px-3 text-center text-white hover:underline">
+          Home
+        </div>
+        <div className="px-3 text-center text-white hover:underline">
+          Series
+        </div>
+        <div className="px-3 text-center text-white hover:underline">
+          Films
+        </div>
+        <div className="px-3 text-center text-white hover:underline">
+          New & Popular
+        </div>
+        <div className="px-3 text-center text-white hover:underline">
+          My List
+        </div>
+        <div className="px-3 text-center text-white hover:underline">
+          Browse by Languages
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
-export default MobileMenu;
+export default MobileMenu;
diff --git a/components/MovieCard.tsx b/components/MovieCard.tsx
@@ -105,4 +105,4 @@ const MovieCard: React.FC<MovieCardProps> = ({ data }) => {
   )
 }
 
-export default MovieCard;
+export default MovieCard;
diff --git a/components/MovieList.tsx b/components/MovieList.tsx
@@ -28,4 +28,4 @@ const MovieList: React.FC<MovieListProps> = ({ data, title }) => {
   );
 }
 
-export default MovieList;
+export default MovieList;
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,90 +1,84 @@
-import NavbarItem from "./Navbaritem"
-import MobileMenu from "./MobileMenu"
-import { FaChevronDown } from "react-icons/fa"
-import { useCallback, useEffect, useState } from "react"
-import { BsSearch, BsBell } from "react-icons/bs"
-import AccountMenu from "./AccountMenu"
+import React, { useCallback, useEffect, useState } from 'react';
+import { BellIcon, MagnifyingGlassIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+import AccountMenu from '@/components/AccountMenu';
+import MobileMenu from '@/components/MobileMenu';
+import NavbarItem from '@/components/NavbarItem';
+import useCurrentUser from "@/hooks/useCurrentUser";
 
 
 const TOP_OFFSET = 66;
 
 const Navbar = () => {
-    const [showMobileMenu, setShowMobileMenu] = useState(false);
-    const [showAccountMenu, setShowAccountMenu] = useState(false);
-    const [showBackground, setShowBackground] = useState(false);
+  const [showAccountMenu, setShowAccountMenu] = useState(false);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const [showBackground, setShowBackground] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      console.log(window.scrollY)
+      if (window.scrollY >= TOP_OFFSET) {
+        setShowBackground(true)
+      } else {
+        setShowBackground(false)
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    }
+  }, []);
 
-    useEffect(() => {
-        const handleScroll = () => {
-            if (window.scrollY >= TOP_OFFSET) {
-                setShowBackground(true);
-            } else {
-                setShowBackground(false);
-            }
-        }
-        window.addEventListener('scroll', handleScroll);
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, []);
+  const toggleAccountMenu = useCallback(() => {
+    setShowAccountMenu((current) => !current);
+  }, []);
 
+  const toggleMobileMenu = useCallback(() => {
+    setShowMobileMenu((current) => !current);
+  }, []);
 
+  const { data: currentUser } = useCurrentUser();
 
-    const toggleMobileMenu = useCallback(() => {
-        setShowMobileMenu((current) => !current);
-    }, []);
-    const toggleAccountMenu = useCallback(() => {
-        setShowAccountMenu((current) => !current);
-    }, []);
+  return (
 
-    return (
-        <nav className="w-full fixed z-40">
-            <div className={`
-                px-4
-                md:px-16
-                py-6
-                flex
-                flex-row
-                items-center
-                transition
-                duration-500
-                ${showBackground ? 'bg-zinc-900 bg-opacity-90' : ''}
-                `}>
-                <img src="/images/logo.png" alt="Logo" className="h-10 lg:h-20"></img>
-                <div className="
-                    flex-row
-                    ml-8
-                    gap-7
-                    hidden
-                    lg:flex
-                ">
-                    <NavbarItem label="Home"/>
-                    <NavbarItem label="Educational"/>
-                    <NavbarItem label="Entertainment"/>
-                    <NavbarItem label="New & Popular"/>
-                    <NavbarItem label="My Watch List"/>
-                </div>
-                <div onClick= {toggleMobileMenu} className="lg:hidden flex flex-row items-center gap-2 ml-8 cursor-pointer relative">
-                    <p className="text-white text-sm">Browse</p>
-                    <FaChevronDown className={`text-white transition ${showMobileMenu ? 'rotate-180': 'rotate-0' }`}/>
-                    <MobileMenu visible={showMobileMenu}/>
-                </div>
-                <div className="flex flex-row ml-auto gap-7 items-center">
-                    <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition">
-                        <BsSearch />
-                    </div>
-                    <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition">
-                        <BsBell />
-                    </div>
+
+    <nav className="w-full fixed z-40">
+      <div className={`px-4 md:px-16 py-6 flex flex-row items-center transition duration-500 ${showBackground ? 'bg-zinc-900 bg-opacity-90' : ''}`}>
+        <img src="/images/logo.png" className="h-15 lg:h-20" alt="Logo" />
+        <div className="flex-row ml-8 gap-7 hidden lg:flex">
+          <NavbarItem label="Home" active />
+          <NavbarItem label="Educational" />
+          <NavbarItem label="Entertainment" />
+          <NavbarItem label="New & Popular" />
+          <NavbarItem label="My List" />
+          <NavbarItem label="Browse by Category" />
+        </div>
+        <div onClick={toggleMobileMenu} className="lg:hidden flex flex-row items-center gap-2 ml-8 cursor-pointer relative">
+          <p className="text-white text-sm">Browse</p>
+          <ChevronDownIcon className={`w-6 text-white fill-white transition ${showMobileMenu ? 'rotate-180' : 'rotate-0'}`} />
+          <MobileMenu visible={showMobileMenu} />
+        </div>
+        <div className="flex flex-row ml-auto gap-7 items-center">
+          <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition">
+            <MagnifyingGlassIcon className="w-8" />
+          </div>
+          <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition">
+            <BellIcon className="w-8" />
+          </div>
+          <div onClick={toggleAccountMenu} className="flex flex-row items-center gap-2 cursor-pointer relative">
+  <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-md overflow-hidden">
+    <img src={currentUser?.image || "/images/profiles/5992.png"} alt="" />
+  </div>
+  <ChevronDownIcon className={`w-6 text-white fill-white transition ${showAccountMenu ? 'rotate-180' : 'rotate-0'}`} />
+  <AccountMenu visible={showAccountMenu} />
+</div>
 
-                    <div onClick={toggleAccountMenu} className="flex flex-row items-center gap-2 cursor-pointer relative">
-                        <div className="w-6 h-6 lg:w-10 lg:h-10 rounded-md overflow-hidden">
-                            <img src="/images/profiles/5992.png" alt="Profile"></img>
-                        </div>
-                        <FaChevronDown className={`text-white transition ${showAccountMenu ? 'rotate-180': 'rotate-0' }`}/>
-                        <AccountMenu visible={showAccountMenu}/>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    )
+        </div>
+      </div>
+    </nav>
+  )
 }
 
-export default Navbar
+export default Navbar;
diff --git a/components/Navbaritem.tsx b/components/Navbaritem.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 
 interface NavbarItemProps {
-    label: string;
+  label: string;
+  active?: boolean;
 }
 
-const NavbarItem: React.FC<NavbarItemProps> = ({label}) => {
-    return (
-        <div className="text-white cursor-pointer hover:text-gray-300 transition">
-            {label}
-        </div>
-    )
+const NavbarItem: React.FC<NavbarItemProps> = ({ label, active }) => {
+  return (
+    <div className={active ? 'text-white cursor-default' : 'text-gray-200 hover:text-gray-300 cursor-pointer transition'}>
+      {label}
+    </div>
+  )
 }
 
-export default NavbarItem;
+export default NavbarItem;
diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
@@ -33,4 +33,4 @@ const PlayButton: React.FC<PlayButtonProps> = ({ movieId }) => {
   );
 }
 
-export default PlayButton;
+export default PlayButton;
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,4 +54,4 @@ const Billboard: React.FC = () => { @@
         </div>
       )
     }
-    export default Billboard;
+    export default Billboard;