feat(buttons): add new button variants to component library

package.json

@@ -9,15 +9,17 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "lucide-react": "^0.544.0",
+    "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.5.4"
+    "react-router-dom": "^7.9.3"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4"
   }
 }

src/app/components/Navbar.jsx

@@ -1,83 +1,83 @@
-// components/Navbar.jsx
-"use client";
+"use client"
 import { useState } from "react";
+import { Menu, X } from "lucide-react";
+import { usePathname } from "next/navigation";
 import Link from "next/link";
 
-export default function Navbar() {
+const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+
+  const navLinks = [
+    { href: "/", label: "Home" },
+    { href: "/about", label: "About" },
+    { href: "/contact", label: "Contact" },
+    { href: "/components", label: "Components" },
+  ];
+
+  const isActive = (path) => pathname === path;
 
   return (
-    <nav className="bg-white shadow-md sticky top-0 z-50">
-      <div className=" ">
+    <nav className="bg-card/80 backdrop-blur-lg border-b border-blue-50 sticky top-0 z-50 shadow-sm">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16">
-
           <div className="flex items-center">
-            <Link href="/" className="text-xl font-bold text-indigo-600">
+            <Link href="/" className="text-3xl font-bold text-blue-700">
               MyLibrary
             </Link>
           </div>
 
           {/* Desktop Menu */}
-          <div className="hidden md:flex items-center space-x-6">
-            <Link href="/" className="hover:text-indigo-600">
-              Home
-            </Link>
-            <Link href="/about" className="hover:text-indigo-600">
-              About
-            </Link>
-            <Link href="/contact" className="hover:text-indigo-600">
-              Contact
-            </Link>
-            <Link href="/components" className="hover:text-indigo-600">
-              Components
-            </Link>
+          <div className="hidden md:flex items-center space-x-1">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`px-4 py-2 rounded-lg transition-all duration-300 ${isActive(link.href)
+                  ? "bg-primary text-white font-medium bg-blue-600"
+                  : "text-foreground hover:bg-secondary hover:text-secondary-foreground"
+                  }`}
+              >
+                {link.label}
+              </Link>
+            ))}
           </div>
 
           {/* Mobile Menu Button */}
           <div className="flex items-center md:hidden">
             <button
               onClick={() => setIsOpen(!isOpen)}
-              className="p-2 rounded-md text-gray-600 hover:bg-gray-100 focus:outline-none"
+              className="p-2 rounded-lg text-foreground hover:bg-secondary transition-colors"
+              aria-label="Toggle menu"
             >
-              {isOpen ? "✖" : "☰"}
+              {isOpen ? <X size={24} /> : <Menu size={24} />}
             </button>
           </div>
         </div>
       </div>
 
       {/* Mobile Menu */}
       {isOpen && (
-        <div className="md:hidden px-2 pt-2 pb-3 space-y-2 bg-white shadow">
-          <Link
-            href="/"
-            className="block px-3 py-2 rounded-md hover:bg-gray-100"
-            onClick={() => setIsOpen(false)}
-          >
-            Home
-          </Link>
-          <Link
-            href="/about"
-            className="block px-3 py-2 rounded-md hover:bg-gray-100"
-            onClick={() => setIsOpen(false)}
-          >
-            About
-          </Link>
-          <Link
-            href="/contact"
-            className="block px-3 py-2 rounded-md hover:bg-gray-100"
-            onClick={() => setIsOpen(false)}
-          >
-            Contact
-          </Link>
-          <Link
-            href="/components"
-            className="block px-3 py-2 rounded-md hover:bg-gray-100"
-            onClick={() => setIsOpen(false)}
-          >
-            Components
-          </Link>
+        <div className="md:hidden border-t border-border bg-card/95 backdrop-blur-lg">
+          <div className="px-2 pt-2 pb-3 space-y-1">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`block px-4 py-3 rounded-lg transition-all ${isActive(link.href)
+                  ? "bg-blue-700 text-primary font-medium"
+                  : "text-foreground hover:bg-secondary"
+                  }`}
+                onClick={() => setIsOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
         </div>
       )}
     </nav>
   );
-}
+};
+
+export default Navbar;

src/app/layout.js

@@ -10,9 +10,11 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className="min-h-screen bg-gray-50 text-gray-900">
-        <div className="max-w-6xl mx-auto p-6">
-         <Navbar/>
-          <main>{children}</main>
+        <div className="py-6">
+          <Navbar />
+          <main
+            className='max-w-7xl mx-auto'
+          >{children}</main>
           <footer className="mt-12 text-xs text-gray-500">Made for Hacktoberfest</footer>
         </div>
       </body>

src/app/page.js

@@ -11,16 +11,28 @@ import FeatureCard from '../components/cards/FeatureCard'
 import ProfileCard from '../components/cards/ProfileCard'
 import PricingCard from '../components/cards/PricingCard'
 import DataCard from '@/components/cards/DataCard'
+import OutlineButton from '@/components/buttons/OutlineButton'
+import DangerButton from '@/components/buttons/DangerButton'
+import LinkButton from '@/components/buttons/LinkButton'
+import LoadingButton from '@/components/buttons/LoadingButton'
+import RoundButton from '@/components/buttons/RoundButton'
+import SuccessButton from '@/components/buttons/SuccessButton'
 
 export default function Page() {
   return (
     <div className="space-y-12">
-      <section>
+      <section className='mt-12'>
         <h2 className="text-2xl font-semibold mb-4">Buttons</h2>
         <div className="flex gap-4 flex-wrap">
           <PrimaryButton>Primary</PrimaryButton>
           <SecondaryButton>Secondary</SecondaryButton>
           <GhostButton>Ghost</GhostButton>
+          <OutlineButton>Outline</OutlineButton>
+          <DangerButton>Danger</DangerButton>
+          <LinkButton>Link</LinkButton>
+          <LoadingButton>Loading</LoadingButton>
+          <RoundButton>Rounded</RoundButton>
+          <SuccessButton>Success</SuccessButton>
           <IconButton aria-label="star">★</IconButton>
           <PillButton>Subscribe</PillButton>
         </div>
@@ -33,8 +45,8 @@ export default function Page() {
           <ImageCard title="Image Card" description="Card with SVG image." />
           <FeatureCard title="Feature Card" description="Highlight features and benefits." />
           <ProfileCard name="Alex Johnson" role="Product Designer" />
-          <PricingCard plan="Pro" price="$9/mo" features={["10 projects","Priority support","Unlimited users"]} />
-           <DataCard title="Active Projects" value="27" icon="📂" trend={8} />
+          <PricingCard plan="Pro" price="$9/mo" features={["10 projects", "Priority support", "Unlimited users"]} />
+          <DataCard title="Active Projects" value="27" icon="📂" trend={8} />
         </div>
       </section>
     </div>

src/components/buttons/DangerButton.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const DangerButton = ({ children, ...props }) => {
+    return (
+        <button
+            className="px-4 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors"
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default DangerButton;

src/components/buttons/LinkButton.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const LinkButton = ({ children, ...props }) => {
+    return (
+        <button
+            className="text-primary underline hover:text-primary-dark transition-colors"
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default LinkButton;

src/components/buttons/LoadingButton.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const LoadingButton = ({ children, isLoading = true, ...props }) => {
+    return (
+        <button
+            className="px-4 py-2 rounded-lg bg-yellow-200 text-black flex items-center justify-center gap-2 hover:bg-primary-dark transition-colors"
+            disabled={isLoading}
+            {...props}
+        >
+            {isLoading && (
+                <svg
+                    className="animate-spin h-4 w-4 text-black"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                    ></circle>
+                    <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+                    ></path>
+                </svg>
+            )}
+            {children}
+        </button>
+    );
+};
+
+export default LoadingButton;

src/components/buttons/OutlineButton.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const OutlineButton = ({ children, ...props }) => {
+    return (
+        <button
+            className="px-4 py-2 rounded-lg border border-primary text-primary hover:bg-primary hover:text-white transition-colors"
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default OutlineButton;