WIP the slider within the "pet detail" page

Author: AlexanderNeo427

src/App.tsx

@@ -6,7 +6,6 @@ import AdoptionGalleryPage from './pages/AdoptionGalleryPage'
 import PetDetailPage from './pages/PetDetailPage'
 import CheckoutPage from './pages/CheckoutPage'
 import ReceiptPage from './pages/ReceiptPage'
-import MyAccountPage from './pages/MyAccountPage'
 import PetReleasePage from './pages/PetReleasePage'
 
 const browserRouter = createBrowserRouter([
@@ -16,8 +15,7 @@ const browserRouter = createBrowserRouter([
    { path: ROUTE_URL.PET_DETAIL, element: <PetDetailPage /> },
    { path: ROUTE_URL.CHECKOUT, element: <CheckoutPage /> },
    { path: ROUTE_URL.RECEIPT, element: <ReceiptPage /> },
-   { path: ROUTE_URL.MY_ACCOUNT, element: <MyAccountPage /> },
-   { path: ROUTE_URL.PET_RELEASE, element: <PetReleasePage/> }
+   { path: ROUTE_URL.PET_RELEASE, element: <PetReleasePage /> }
 ])
 
 const App: React.FC = () => {

src/components/AccountDropdown.tsx

@@ -32,15 +32,15 @@ const AccountDropdown: React.FC = () => {
    }
 
    return (
-      <div ref={m_dropdownRef} className='relative cursor-pointer'>
+      <div ref={m_dropdownRef} className='relative cursor-pointer hidden lg:block'>
 
          {/* --- HEADER BUTTON --- */}
          <div onClick={() => setIsOpen(isOpen => !isOpen)} className='flex justify-start items-center'>
             <img className='w-8 h-8 mr-margin-xs' src={account_svg} alt="" />
             <button className='mr-text flex'>
-               <span className='mr-text-xxs text-xl'>{
+               <span className='mr-text-xxs text-lg'>{
                   m_authCtx?.firebaseUser?.displayName ?
-                     "Hi, " + m_authCtx.firebaseUser.displayName : "User"
+                     "Hi, " + m_authCtx.firebaseUser.displayName.split(' ')[0] : "User"
                }</span>
             </button>
             <img className='rotate-90 w-7 h-7' src={arrow_right_svg} alt="" />

src/components/MorePetsCard.tsx

@@ -1,20 +1,31 @@
 import React from 'react'
-import { PetApiData } from '../others/Globals'
+import { PET_API_TYPE, PetApiData } from '../others/Globals'
 import heart_svg from '../assets/SVG/heart.svg'
+import { useNavigate } from 'react-router-dom'
 
 const MorePetsCard: React.FC<{ petApiData: PetApiData }> = ({ petApiData }) => {
+   const m_navTo = useNavigate()
+
+   const cardClickHandler = () => {
+      const petType = petApiData.apiType === PET_API_TYPE.DOG ? "dog" : "cat"
+      const destURL = `/pet_detail?pet_type=${petType}&pet_id=${petApiData.id}&breed_id=${petApiData.breedData?.breed_id}`
+      m_navTo(destURL)
+   }
+
    return (
-      <div className='
+      <div onClick={cardClickHandler} className='
          w-full min-h-72 bg-white outline outline-1 outline-gray-300 rounded-lg shadow-lg 
-         cursor-pointer relative
+         cursor-pointer relative 
       '>
-         <div style={{
-            backgroundImage: `url(${petApiData.imgURL})`
-         }} className='absolute top-0 bottom-0 left-0 right-0 rounded-lg bg-cover'></div>
+         <div
+            style={{ backgroundImage: `url(${petApiData.imgURL})` }}
+            className='absolute top-0 bottom-0 left-0 right-0 rounded-lg bg-cover
+         '></div>
          <div className='w-full flex justify-end items-start'>
-            <button style={{
-               backgroundColor: "rgba(255, 255, 255, 0.8)"
-            }} className='w-14 h-14 mr-margin-xs mt-margin-xs rounded-lg z-10'>
+            <button
+               style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}
+               className='w-14 h-14 mr-margin-xs mt-margin-xs rounded-lg z-10
+            '>
                <img className='w-full h-full px-3 py-3' src={heart_svg} alt="" />
             </button>
          </div>

src/components/Navbar.tsx

@@ -7,7 +7,7 @@ import AccountDropdown from './AccountDropdown'
 
 interface NavbarProps {
    useSticky?: boolean
-   scrollFadeMax?: number 
+   scrollFadeMax?: number
 }
 
 const Navbar: React.FC<NavbarProps> = props => {
@@ -49,7 +49,7 @@ const Navbar: React.FC<NavbarProps> = props => {
          </Link>
 
          {/* --- SMALL NAVBAR | HIDES WHEN SCREEN EXPANDS ---- */}
-         <nav className='flex justify-between md:hidden'>
+         <nav className='flex justify-between lg:hidden'>
             <button className='h-full flex flex-col justify-center items-center gap-2 p-2'>
                <div className='bg-background-950 h-[2px] w-8'></div>
                <div className='bg-background-950 h-[2px] w-8'></div>
@@ -59,19 +59,19 @@ const Navbar: React.FC<NavbarProps> = props => {
 
          {/* --- LARGE NAVBAR | SHOWS WHEN SCREEN EXPANDS ---- */}
          <nav className='
-            hidden md:flex justify-center items-center 
-            gap-11 lg:gap-20
+            hidden lg:flex justify-center items-center 
+            gap-11 md:gap-16 lg:gap-28
          '>
-            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.GALLERY}>Adoption</Link>
-            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.ABOUT}>About</Link>
-            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.CONTACT_US}>Contact Us</Link>
+            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.HOME}>Home</Link>
+            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.GALLERY}>Adopt</Link>
+            <Link className='hover:text-accent-600 transition-colors' to={ROUTE_URL.PET_RELEASE}>Pet Release</Link>
          </nav>
          {
             (authCtx && authCtx.firebaseUser) ?
                <AccountDropdown /> :
                <Link className='
                hidden justify-center items-center bg-primary-500 px-7 h-10 rounded-lg
-               md:flex hover:bg-primary-600 transition-colors' to={ROUTE_URL.AUTH}
+               lg:flex hover:bg-primary-600 transition-colors' to={ROUTE_URL.AUTH}
                >Login</Link>
          }
       </header>

src/components/sections/HeroSection.tsx

@@ -15,12 +15,12 @@ const HeroSection: React.FC = () => {
       '>
 
          {/* ---- VIDEO GRID ---- */}
-         <video className='w-full h-full object-cover' autoPlay loop={true} src={pet_video_1} />
-         <video className='w-full h-full object-cover' autoPlay loop={true} src={pet_video_2} />
-         <video className='w-full h-full object-cover' autoPlay loop={true} src={pet_video_3} />
-         <video className='w-full h-full object-cover' autoPlay loop={true} src={pet_video_4} />
-         <video className='w-full h-full object-cover' autoPlay loop={true} src={pet_video_5} />
-         <video className='w-full h-full object-cover' autoPlay loop={true} src={pet_video_6} />
+         <video className='w-full h-full object-cover' autoPlay loop src={pet_video_1} />
+         <video className='w-full h-full object-cover' autoPlay loop src={pet_video_2} />
+         <video className='w-full h-full object-cover' autoPlay loop src={pet_video_3} />
+         <video className='w-full h-full object-cover' autoPlay loop src={pet_video_4} />
+         <video className='w-full h-full object-cover' autoPlay loop src={pet_video_5} />
+         <video className='w-full h-full object-cover' autoPlay loop src={pet_video_6} />
 
          {/* ----- OPACITY OVERLAY ----- */}
          <div className='absolute top-0 bottom-0 left-0 right-0 bg-primary-50 opacity-70'></div>
@@ -36,13 +36,8 @@ const HeroSection: React.FC = () => {
                <p className='text-xl mb-6'>Where every animal, big or small, deserves to find a loving forever home. Begin your adoption journey today, and find yourself a furry friend!</p>
                <div className='h-14'>
                   <button className='
-                     bg-primary-500 px-5 h-full rounded-lg mr-3
-                     hover:bg-primary-600 transition-colors
-                  '>Adopt a Pet</button>  
-                  <button className='
-                     border-2 border-primary-500 px-5 h-full rounded-lg
-                     hover:bg-primary-600 hover:text-text-950
-                  '>Donate</button>
+                     bg-primary-500 px-5 h-full rounded-lg mr-3 hover:bg-primary-600 transition-colors
+                  '>Adopt a Pet</button>
                </div>
             </div>
          </div>

src/others/Globals.ts

@@ -9,7 +9,6 @@ export const ROUTE_URL = {
     CONTACT_US: "/contact_us",
     AUTH: "/auth",
     OUR_HISTORY: "/our_history",
-    MY_ACCOUNT: "/account",
     RECEIPT: "/receipt",
     PET_RELEASE: "/pet_release"
 }

src/pages/AdoptionGalleryPage.tsx

@@ -36,7 +36,7 @@ const AdoptionGalleryPage: React.FC = () => {
       ])
 
       const fetchPetApiData = async (): Promise<void> => {
-         const allPetData = await Utils.getBatchPetAPIData(10)
+         const allPetData = await Utils.getBatchPetAPIData(20)
          Utils.durstenfeldShuffle(allPetData)
          setPetData(allPetData)
          setIsLoading(false)
@@ -49,9 +49,8 @@ const AdoptionGalleryPage: React.FC = () => {
       return arr.map((_, idx) => {
          return (
             <div
-               key={idx}
-               style={{ height: `${Utils.randInt(16, 23)}rem` }}
-               className='w-full min-w-80 bg-gray-300 animate-pulse rounded-lg shadow-lg mb-4'>
+               key={idx} style={{ height: `${Utils.randInt(16, 23)}rem` }}
+               className='w-full min-w-64 bg-gray-300 animate-pulse rounded-lg shadow-lg mb-4'>
             </div>
          )
       })
@@ -60,30 +59,27 @@ const AdoptionGalleryPage: React.FC = () => {
    return (
       <main>
          <Navbar useSticky={true} />
-         <section className='flex justify-center items-center py-margin-l px-margin-s'>
+         <section className='flex justify-center items-center py-margin-xl px-margin-s'>
             <div className='flex'>
 
                {/* ---- DROPDOWN CONTAINER ---- */}
                <div className='mr-margin-m'>
                   <Dropdown
-                     label='Gender'
-                     options={m_petTypeDropdown}
+                     label='Gender' options={m_petTypeDropdown}
                      setOptions={setPetTypeDropdown}
                   />
                </div>
 
                <div className='mr-margin-m'>
                   <Dropdown
-                     label='Sizes'
-                     options={m_sizesDropdown}
+                     label='Sizes' options={m_sizesDropdown}
                      setOptions={setSizesDropdown}
                   />
                </div>
 
                <div className='mr-margin-m'>
                   <Dropdown
-                     label='Ages'
-                     options={m_agesDropdown}
+                     label='Ages' options={m_agesDropdown}
                      setOptions={setAgesDropdown}
                   />
                </div>
@@ -97,14 +93,18 @@ const AdoptionGalleryPage: React.FC = () => {
                   />
                </div>
             </div>
-
          </section>
 
-         <section className='min-h-96 flex justify-center items-center'>
+         <section className='min-h-96 flex flex-col justify-center items-center'>
             <div className='max-w-6xl mx-margin-s columns-2 md:columns-3 2xl:columns-4 my-margin-l'>{
-               m_isLoading ? getAnimatedCards() :
+               m_isLoading ?
+                  getAnimatedCards() :
                   m_petData.map(data => <PetInfoCard key={data.id} petApiData={data} />)
             }</div>
+            <button className='
+               w-56 h-12 bg-accent-500 my-margin-xl rounded-lg 
+               text-text-950 font-medium hover:bg-accent-600 transition-colors
+            '>Load more</button>
          </section>
          <FooterSection />
       </main>

src/pages/CheckoutPage.tsx

@@ -13,9 +13,9 @@ const CheckoutInput: React.FC<CheckoutInputFieldProps> = props => {
          <input
             type={props.inputType} placeholder={props.placeholderText || ""}
             className='
-                  w-full h-10 px-4 focus:outline-none 
-                  border-gray-300 border-[1px] rounded-lg bg-transparent
-               ' />
+               w-full h-10 px-4 focus:outline-none 
+               border-gray-300 border-[1px] rounded-lg bg-transparent'
+         />
       </label>
    )
 }

src/pages/HomePage.tsx

@@ -11,7 +11,7 @@ import PetReleaseSection from '../components/sections/PetReleaseSection'
 const HomePage: React.FC = () => {
    return (
       <main>
-         <Navbar scrollFadeMax={300}/>
+         <Navbar scrollFadeMax={400}/>
          <HeroSection />
          <AboutUsSection />
          <PetStatsSection />

src/pages/MyAccountPage.tsx

@@ -7,7 +7,6 @@ import MorePetsCard from '../components/MorePetsCard'
 
 import LoadingScreen from '../components/LoadingScreen'
 import AdditionalDetailCard from '../components/AdditionalDetailCard'
-import { LoremIpsum } from 'lorem-ipsum'
 
 import calendar_svg from '../assets/SVG/calendar.svg'
 import ruler_svg from '../assets/SVG/ruler.svg'
@@ -47,7 +46,7 @@ const PetDetailPage: React.FC = () => {
          setIsLoading(false)
       }
       fetchRequiredPetApiData()
-   }, [])
+   }, [m_searchParams])
 
    interface PetAttribute {
       attribute: string
@@ -92,9 +91,23 @@ const PetDetailPage: React.FC = () => {
             <section className='min-h-[50rem] text-center flex flex-col justify-start items-center'>
 
                {/* ---- BANNER IMAGE ---- */}
-               <div style={{
-                  backgroundImage: `url(${m_petApiData.imgURL})`
-               }} className='w-full h-96 mb-margin-xl'></div>
+               <div className='w-full h-96 mx-margin-l mb-margin-l relative'>
+                  <div className='absolute top-0 left-0 right-0 bottom-0 flex'>
+                     <div
+                        style={{ backgroundImage: `url(${m_petApiData.imgURL})` }}
+                        className='w-[10%] h-96 mb-margin-xl 
+                     '></div>
+                     <div
+                        style={{ backgroundImage: `url(${m_petApiData.imgURL})` }}
+                        className='w-[10%] h-96 mb-margin-xl 
+                     '></div>
+                     <div
+                        style={{ backgroundImage: `url(${m_petApiData.imgURL})` }}
+                        className='w-[10%] h-96 mb-margin-xl 
+                     '></div>
+                  </div>
+               </div>
+
 
                {/* --- BODY (constrained width) --- */}
                <div className='max-w-7xl mx-margin-l'>
@@ -103,7 +116,7 @@ const PetDetailPage: React.FC = () => {
                   <div className='flex flex-col md:flex-row'>
 
                      {/* --- DESCRIPTION CONTAINER --- */}
-                     <div className='text-center flex-col items-start min-w-96 mb-margin-xl mr-margin-l'>
+                     <div className='text-center flex-col items-start min-w-[30rem] mb-margin-xl mr-margin-l'>
 
                         {/* ---- DESC HEADER ---- */}
                         <h1 className='font-bold text-3xl text-left mb-margin-xxs'>{m_petApiData.breedData?.breed.toUpperCase()}</h1>
@@ -113,15 +126,14 @@ const PetDetailPage: React.FC = () => {
                            m_petApiData.apiType === PET_API_TYPE.DOG ?
                               `${m_petApiData.breedData?.breed}'s are bred for ${(m_petApiData.breedData as DogBreedData).bredFor}` :
                               `${(m_petApiData.breedData as CatBreedData).description}`
-                        }</p> 
+                        }</p>
 
                         {/* ---- PET ATTRIBUTES/INFO ----- */}
                         <div className=''>{
                            m_petApiData.breedData?.temperaments.map((temperament, idx) => {
                               return (
                                  <div key={idx} className='flex justify-start items-center mb-margin-m'>
                                     <img className='w-7 mr-margin-s' src={SVGs[Utils.randInt(0, SVGs.length - 1)]} alt="" />
-                                    {/* <span className='mr-margin-xs'><strong>•</strong></span> */}
                                     <span className='text-left font-medium text-text-200'>{temperament}</span>
                                  </div>
                               )