Fixed Navbar Bug

components/Navbar.tsx

@@ -8,7 +8,7 @@ import logo from "../public/logo.png";
 
 export default function Navbar() {
   return (
-    <nav className="bg-white fixed w-screen" id="navbar__custom">
+    <nav className="bg-white fixed w-screen opacity-100" id="navbar__custom" style={{zIndex: 6}}>
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
         <div>
           <Link href="/" className="text-xl text-black font-bold font__poppins">

components/PetCard.tsx

@@ -1,5 +1,5 @@
-import Image from "next/image";
-import ImagePlaceholder from "@/components/ImagePlaceholder";
+import { useState } from "react";
+import { Heart } from "react-heart";
 
 interface ShelterProp {
   url: string;
@@ -24,13 +24,18 @@ interface PetCardProps {
   image: string;
 }
 
-const PetCard = ({ type, name, species, breed, age, gender, size, description, shelter, image }: PetCardProps) => {
+const PetCard = ({ type, name, breed, age, gender, description, shelter, image }: PetCardProps) => {
+  const [isHeartActive, setHeartActive] = useState(false);
+
+  const handleHeartClick = () => {
+    setHeartActive(!isHeartActive);
+  };
 
   return (
     <div className="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
-      <div className="max-w-sm w-full h-full rounded-lg overflow-hidden shadow-lg border border-gray-300 border-opacity-50">
-        <div className="relative h-40 bg-gray-100"> {/**Use this to adjust image height*/}
-          <img className="object-contain w-full h-full" src={image} alt="hero image" />
+      <div className="max-w-sm w-full h-full rounded-lg overflow-hidden shadow-lg border border-gray-300 border-opacity-50 relative">
+        <div className="relative h-40 bg-gray-100">
+          <img className="object-contain w-full h-full" src={image} alt="Pet" />
         </div>
         <div className="px-6 py-4">
           <div className="font-bold text-xl mb-2 text-black">{name}</div>
@@ -49,6 +54,9 @@ const PetCard = ({ type, name, species, breed, age, gender, size, description, s
             {shelter.name}
           </p>
         </div>
+        <div className="absolute bottom-0 right-0 flex space-x-2 p-4">
+
+        </div>
       </div>
     </div>
   );

components/react-heart.d.ts

@@ -0,0 +1,11 @@
+declare module 'react-heart' {
+  import { ReactNode, CSSProperties } from 'react';
+
+  interface HeartProps {
+    isActive: boolean;
+    onClick?: () => void;
+    style?: CSSProperties;
+  }
+
+  export const Heart: (props: HeartProps) => ReactNode;
+}