Bottom Navigation

import React, { useState } from "react";
import { Bell, Home, Search, User } from "lucide-react";

const BottomNavigation = () => {
  const [active, setActive] = useState("home");
  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white/80 dark:bg-gray-900/80 border-t border-gray-200/50 dark:border-gray-800/50 px-2 pb-safe-area-inset-bottom">
      <div className="flex justify-around max-w-md mx-auto">
        {[
          { id: "home", icon: Home, label: "Home" },
          { id: "search", icon: Search, label: "Search" },
          { id: "notifications", icon: Bell, label: "Notifications" },
          { id: "profile", icon: User, label: "Profile" },
        ].map(({ id, icon: Icon, label }) => (
          <a
            key={id}
            href="#"
            onClick={() => setActive(id)}
            className={`flex flex-col items-center py-2 px-4 relative transition-all duration-300 ${
              active === id
                ? "text-blue-500 dark:text-blue-400 scale-105"
                : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
            }`}
          >
            <Icon
              className={`h-6 w-6 transition-all duration-300 ${
                active === id ? "stroke-2" : "stroke-1"
              }`}
            />
            <span className="text-xs mt-1 font-medium">{label}</span>
            {active === id && (
              <span className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-blue-500 dark:bg-blue-400 rounded-full" />
            )}
          </a>
        ))}
      </div>
    </nav>
  );
};

export default BottomNavigation;

import React, { useState } from "react";
import { Heart, Home, Search, User } from "lucide-react";

const BottomNavigation = () => {
  const [active, setActive] = useState("home");
  return (
    <nav className="fixed bottom-4 left-4 right-4">
      <div className="bg-white/80 dark:bg-gray-900/80 rounded-2xl shadow-lg border border-gray-200/50 dark:border-gray-800/50 max-w-md mx-auto">
        <div className="flex justify-around p-2">
          {[
            { id: "home", icon: Home, label: "Home" },
            { id: "search", icon: Search, label: "Search" },
            { id: "favorites", icon: Heart, label: "Favorites" },
            { id: "user", icon: User, label: "Profile" },
          ].map(({ id, icon: Icon, label }) => (
            <a
              key={id}
              href="#"
              onClick={() => setActive(id)}
              className={`flex flex-col items-center p-2 rounded-xl transition-all duration-300 ${
                active === id
                  ? "text-blue-500 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 scale-105"
                  : "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50"
              }`}
            >
              <Icon
                className={`h-6 w-6 transition-all duration-300 ${
                  active === id ? "stroke-2" : "stroke-1"
                }`}
              />
              <span className="text-xs mt-1 font-medium">{label}</span>
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
};

export default BottomNavigation;

import React, { useState } from "react";
import { Bell, Home, Plus, Search, User } from "lucide-react";

const BottomNavigation = () => {
  const [active, setActive] = useState("home");
  const [fabHovered, setFabHovered] = useState(false);
  return (
    <nav className="fixed bottom-4 left-4 right-4">
      <div className="relative flex justify-around items-center bg-white/80 dark:bg-gray-900/80 rounded-2xl p-2 shadow-lg border border-gray-200/50 dark:border-gray-800/50 max-w-md mx-auto">
        {[
          { id: "home", icon: Home, label: "Home" },
          { id: "search", icon: Search, label: "Search" },
          { id: "notifications", icon: Bell, label: "Notifications" },
          { id: "profile", icon: User, label: "Profile" },
        ].map(({ id, icon: Icon, label }) => (
          <a
            key={id}
            href="#"
            onClick={() => setActive(id)}
            className={`flex flex-col items-center p-2 rounded-xl transition-all duration-300 ${
              active === id
                ? "text-blue-500 dark:text-blue-400 scale-105"
                : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
            }`}
          >
            <Icon
              className={`h-6 w-6 transition-all duration-300 ${
                active === id ? "stroke-2" : "stroke-1"
              }`}
            />
            <span className="text-xs mt-1 font-medium">{label}</span>
          </a>
        ))}
        <button
          onMouseEnter={() => setFabHovered(true)}
          onMouseLeave={() => setFabHovered(false)}
          className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 text-white rounded-2xl p-3 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110 active:scale-95"
        >
          <Plus
            className={`h-6 w-6 transition-all duration-300 ${
              fabHovered ? "rotate-180" : ""
            }`}
          />
        </button>
      </div>
    </nav>
  );
};

export default BottomNavigation;