Feat: Added in a like button

README.md

@@ -1,9 +1,3 @@
-<div align="center" >
-  <br/>
-  <br/>
-  <img src="/src/assets/svg/nextsound.svg" alt="NextSound logo" width="80" height="auto" />
-  <h1>NextSound</h1>
-  <br/>
 
   <p >
 A music discovery app built with React and TypeScript. <br/> Browse tracks, albums, and artists using Spotify's API.
@@ -171,5 +165,10 @@ npm run preview
 
 <div align="center">
   <p>Built with ❤️ for music lovers everywhere</p>
-  <p>Discover your next favorite track with NextSound</p>
+
 </div>
+
+
+hi you are cool - and I love you!
+
+Nice lol 

package.json

@@ -75,4 +75,4 @@
     "vite": "^7.1.6",
     "vite-plugin-eslint": "^1.8.1"
   }
-}
+}

src/App.tsx

@@ -8,7 +8,6 @@ import {
   ScrollToTop,
   Loader,
   ErrorBoundary,
-  DemoModeBadge,
 } from "@/common";
 import { CommandPalette } from "@/components/ui/CommandPalette";
 
@@ -39,7 +38,6 @@ const App = () => {
     <>
       <SideBar />
       <Header onOpenSearch={() => setIsCommandPaletteOpen(true)} />
-      <DemoModeBadge />
       <main className="transition-all duration-300 lg:pb-14 md:pb-4 sm:pb-2 xs:pb-1 pb-0 bg-white dark:bg-deep-dark min-h-screen">
         <ScrollToTop>
           <ErrorBoundary>

src/common/Header/index.tsx

@@ -5,7 +5,6 @@ import { BsMoonStarsFill } from "react-icons/bs";
 import { AiOutlineMenu } from "react-icons/ai";
 import { FiSun } from "react-icons/fi";
 import { FiSearch } from "react-icons/fi";
-import throttle from "lodash.throttle";
 import { Button } from "react-aria-components";
 
 import { ThemeMenu, Logo } from "..";
@@ -15,7 +14,6 @@ import { useGlobalContext } from "@/context/globalContext";
 import { useTheme } from "@/context/themeContext";
 import { maxWidth } from "@/styles";
 import { navLinks } from "@/constants";
-import { THROTTLE_DELAY } from "@/utils/config";
 import { cn } from "@/utils/helper";
 
 interface HeaderProps {
@@ -26,36 +24,9 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
   const { openMenu, theme, showThemeOptions } = useTheme();
   const { setShowSidebar } = useGlobalContext();
 
-  const [isActive, setIsActive] = useState<boolean>(false);
   const [isNotFoundPage, setIsNotFoundPage] = useState<boolean>(false);
   const location = useLocation();
 
-  useEffect(() => {
-    const handleBackgroundChange = () => {
-      const body = document.body;
-      if (
-        window.scrollY > 0 ||
-        (body.classList.contains("no-scroll") &&
-          parseFloat(body.style.top) * -1 > 0)
-      ) {
-        setIsActive(true);
-      } else {
-        setIsActive(false);
-      }
-    };
-
-    const throttledHandleBackgroundChange = throttle(
-      handleBackgroundChange,
-      THROTTLE_DELAY
-    );
-
-    window.addEventListener("scroll", throttledHandleBackgroundChange);
-
-    return () => {
-      window.removeEventListener("scroll", throttledHandleBackgroundChange);
-    };
-  }, []);
-
   useEffect(() => {
     if (location.pathname.split("/").length > 3) {
       setIsNotFoundPage(true);
@@ -64,24 +35,20 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
     }
   }, [location.pathname]);
 
+  // Permanently active (fixed black header)
+  const isActive = true;
+
   return (
     <header
       className={cn(
-        `md:py-[16px] py-[14.5px]  fixed top-0 left-0 w-full z-10 transition-all duration-50`,
-        isActive && (theme === "Dark" ? "header-bg--dark" : "header-bg--light")
+        `md:py-[16px] py-[14.5px] fixed top-0 left-0 w-full z-10 transition-all duration-50 header-bg--dark dark`
       )}
     >
       <nav
         className={cn(maxWidth, `flex justify-between flex-row items-center`)}
       >
         <Logo
-          logoColor={cn(
-            isNotFoundPage
-              ? "text-black dark:text-white"
-              : !isNotFoundPage && isActive
-              ? "text-black dark:text-white"
-              : "text-white"
-          )}
+          logoColor="text-black dark:text-white"
         />
 
         <div className=" hidden md:flex flex-row gap-8 items-center text-gray-600 dark:text-gray-300">
@@ -103,18 +70,14 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
             onPress={onOpenSearch}
             className={cn(
               "flex items-center justify-center px-3 py-1.5 rounded-full transition-all duration-200 hover:scale-105 border border-gray-300 dark:border-gray-600",
-              isNotFoundPage || isActive
-                ? "bg-white/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800"
-                : "bg-white/10 backdrop-blur-sm text-gray-300 hover:bg-white/20"
+              "bg-white/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800"
             )}
           >
             <FiSearch className="w-4 h-4 mr-2" />
             <span className="text-sm font-medium">Search</span>
             <kbd className={cn(
               "ml-2 px-1.5 py-0.5 text-xs font-mono rounded border text-[10px]",
-              isNotFoundPage || isActive
-                ? "bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-                : "bg-white/10 border-white/20 text-gray-300"
+              "bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
             )}>
               ⌘K
             </kbd>
@@ -128,9 +91,7 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
               id="theme"
               className={cn(
                 `flex items-center justify-center mb-[2px] transition-all duration-100 hover:scale-110`,
-                isNotFoundPage || isActive
-                  ? ` text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
-                  : ` dark:hover:text-sec-color text-gray-300 `
+                ` text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
               )}
             >
               {theme === "Dark" ? <BsMoonStarsFill /> : <FiSun />}
@@ -146,9 +107,7 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
           name="menu"
           className={cn(
             `inline-block text-[22.75px] md:hidden  transition-all duration-300`,
-            isNotFoundPage || isActive
-              ? `text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
-              : ` dark:hover:text-sec-color text-sec-color`
+            `text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
           )}
           onClick={() => setShowSidebar(true)}
         >

src/common/index.ts

@@ -10,7 +10,6 @@ import Error from "./Error";
 import ErrorBoundary, { APIErrorBoundary } from "./ErrorBoundary";
 import ThemeMenu from "./ThemeMenu";
 import Section from "./Section";
-import DemoModeBadge from "./DemoModeBadge";
 
 export {
   Footer,
@@ -30,5 +29,4 @@ export {
   APIErrorBoundary,
   ThemeMenu,
   Section,
-  DemoModeBadge,
 };

src/components/ui/TrackCard.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { Card, CardContent } from './card';
 import {
-  FaClock
+  FaClock,
+  FaHeart,
+  FaRegHeart
 } from 'react-icons/fa';
 import { ITrack } from '@/types';
 import { getImageUrl, cn } from '@/utils';
@@ -25,6 +27,7 @@ export const TrackCard: React.FC<TrackCardProps> = ({
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [imageLoaded, setImageLoaded] = useState(false);
+  const [isLiked, setIsLiked] = useState(false);
 
   const { poster_path, original_title: title, name, artist, album, duration } = track;
   const displayTitle = title || name || 'Unknown Track';
@@ -81,6 +84,27 @@ export const TrackCard: React.FC<TrackCardProps> = ({
             loading="lazy"
           />
 
+          {/* Like button */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsLiked(!isLiked);
+            }}
+            className={cn(
+              "absolute top-2 right-2 z-10 p-2 rounded-full transition-all duration-200",
+              "bg-black/50 backdrop-blur-sm hover:bg-black/70",
+              "text-white hover:scale-110 active:scale-95",
+              "focus:outline-none focus:ring-2 focus:ring-white/50"
+            )}
+            aria-label={isLiked ? "Unlike track" : "Like track"}
+          >
+            {isLiked ? (
+              <FaHeart className="w-4 h-4 text-red-500" />
+            ) : (
+              <FaRegHeart className="w-4 h-4" />
+            )}
+          </button>
+
           {/* Gradient overlay on hover */}
           <div className={cn(
             "absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent transition-opacity duration-300 rounded-lg",