✨ style(_ui*): update enhanced

2025-12-06 07:23:52 +01:00 · 2024-12-19 14:28:02 +05:30
parent d63a443774
commit eb6be747de
3 changed files with 99 additions and 8 deletions
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "axios": "^1.7.9",
    "lucide-react": "^0.344.0",
    "octokit": "^3.2.1",
    "react": "^18.3.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      axios:
+        specifier: ^1.7.9
+        version: 1.7.9
      lucide-react:
        specifier: ^0.344.0
        version: 0.344.0(react@18.3.1)
@@ -751,6 +754,9 @@ packages:
  argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
  autoprefixer@10.4.20:
    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
    engines: {node: ^10 || ^12 || >=14}
@@ -758,6 +764,9 @@ packages:
    peerDependencies:
      postcss: ^8.1.0

+  axios@1.7.9:
+    resolution: {integrity: sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==}
+
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

@@ -822,6 +831,10 @@ packages:
  color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}

+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
  commander@4.1.1:
    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
    engines: {node: '>= 6'}
@@ -856,6 +869,10 @@ packages:
  deep-is@0.1.4:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}

+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
  deprecation@2.3.1:
    resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}

@@ -981,10 +998,23 @@ packages:
  flatted@3.3.2:
    resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}

+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
  foreground-child@3.3.0:
    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
    engines: {node: '>=14'}

+  form-data@4.0.1:
+    resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
+    engines: {node: '>= 6'}
+
  fraction.js@4.3.7:
    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}

@@ -1186,6 +1216,14 @@ packages:
    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
    engines: {node: '>=8.6'}

+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
  minimatch@3.1.2:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}

@@ -1331,6 +1369,9 @@ packages:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}

+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
  punycode@2.3.1:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
@@ -2269,6 +2310,8 @@ snapshots:

  argparse@2.0.1: {}

+  asynckit@0.4.0: {}
+
  autoprefixer@10.4.20(postcss@8.4.49):
    dependencies:
      browserslist: 4.24.3
@@ -2279,6 +2322,14 @@ snapshots:
      postcss: 8.4.49
      postcss-value-parser: 4.2.0

+  axios@1.7.9:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
  balanced-match@1.0.2: {}

  before-after-hook@2.2.3: {}
@@ -2342,6 +2393,10 @@ snapshots:

  color-name@1.1.4: {}

+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
  commander@4.1.1: {}

  concat-map@0.0.1: {}
@@ -2364,6 +2419,8 @@ snapshots:

  deep-is@0.1.4: {}

+  delayed-stream@1.0.0: {}
+
  deprecation@2.3.1: {}

  didyoumean@1.2.2: {}
@@ -2526,11 +2583,19 @@ snapshots:

  flatted@3.3.2: {}

+  follow-redirects@1.15.9: {}
+
  foreground-child@3.3.0:
    dependencies:
      cross-spawn: 7.0.6
      signal-exit: 4.1.0

+  form-data@4.0.1:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
  fraction.js@4.3.7: {}

  fsevents@2.3.3:
@@ -2704,6 +2769,12 @@ snapshots:
      braces: 3.0.3
      picomatch: 2.3.1

+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
  minimatch@3.1.2:
    dependencies:
      brace-expansion: 1.1.11
@@ -2834,6 +2905,8 @@ snapshots:

  prelude-ls@1.2.1: {}

+  proxy-from-env@1.1.0: {}
+
  punycode@2.3.1: {}

  queue-microtask@1.2.3: {}
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -3,15 +3,20 @@ import { Link, useLocation } from 'react-router-dom';
 import { Menu, X } from 'lucide-react';

 export function Header() {
+  // Use location hook to get the current route path for active link checking
  const location = useLocation();
+
+  // State to toggle the mobile menu
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

+  // Function to check if the current path is active for styling the active link
  const isActive = (path: string) => location.pathname === path;

  return (
    <header className="sticky top-0 z-50 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white shadow-md">
      <div className="container mx-auto px-6">
        <div className="flex items-center justify-between h-20">
+          {/* Logo and brand name */}
          <Link to="/" className="flex items-center space-x-4 group">
            <img
              src="/snigdhaos-logo.svg"
@@ -23,20 +28,23 @@ export function Header() {
            </span>
          </Link>

-          {/* Mobile menu button */}
+          {/* Mobile menu toggle button */}
          <button
            className="md:hidden p-2 rounded-lg hover:bg-gray-800 transition-all focus:outline-none focus:ring-2 focus:ring-[#6495ED]"
-            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            onClick={() => setIsMenuOpen(!isMenuOpen)} // Toggle menu open/close state
          >
            {isMenuOpen ? (
+              // If menu is open, show 'X' icon
              <X className="h-7 w-7 animate-spin-reverse" />
            ) : (
+              // If menu is closed, show 'Menu' icon
              <Menu className="h-7 w-7 animate-spin" />
            )}
          </button>

-          {/* Desktop navigation */}
+          {/* Desktop navigation links (hidden on mobile) */}
          <nav className="hidden md:flex space-x-10">
+            {/* Render navigation links */}
            <NavLinks isActive={isActive} closeMenu={() => setIsMenuOpen(false)} animate />
          </nav>
        </div>
@@ -44,12 +52,16 @@ export function Header() {
        {/* Mobile navigation */}
        <div
          className={`${
+            // Apply fade-in or fade-out animation based on the menu state
            isMenuOpen ? 'animate-fade-in-down' : 'animate-fade-out-up'
          } md:hidden overflow-hidden transition-all duration-500`}
        >
+          {/* Only render the mobile menu if it is open */}
          {isMenuOpen && (
            <nav className="mt-4">
+              {/* Mobile menu styling */}
              <div className="flex flex-col space-y-4 bg-gray-800 p-5 rounded-lg shadow-lg">
+                {/* Render navigation links in the mobile menu */}
                <NavLinks
                  isActive={isActive}
                  closeMenu={() => setIsMenuOpen(false)}
@@ -62,6 +74,7 @@ export function Header() {
      </div>

      {/* Global Keyframe Animations (inline style tag) */}
+      {/* These animations control the fade-in and fade-out effects for menu items */}
      <style>{`
        @keyframes fade-in-down {
          0% { opacity: 0; transform: translateY(-10px); }
@@ -82,10 +95,11 @@ export function Header() {
  );
 }

+// Navigation links component
 function NavLinks({
-  isActive,
-  closeMenu,
-  animate,
+  isActive, // Function to check if a link is active
+  closeMenu, // Function to close the mobile menu after selecting a link
+  animate, // Whether to apply animation for the links
 }: {
  isActive: (path: string) => boolean;
  closeMenu: () => void;
@@ -93,25 +107,28 @@ function NavLinks({
 }) {
  return (
    <ul className="space-y-4 md:space-y-0 md:flex md:space-x-10">
+      {/* Loop through paths and labels to create navigation links */}
      {['/', '/about', '/download', '/donors', '/maintainers'].map((path, idx) => {
        const labels = ['Home', 'About', 'Download', 'Donors', 'Maintainers'];
        return (
          <li
            key={path}
            className={`${
+              // Add animation delay if `animate` is true
              animate ? `animate-fade-in-up delay-${idx * 100}` : ''
            }`}
          >
            <Link
              to={path}
              className={`${
+                // If the link is active, apply custom active styles
                isActive(path)
                  ? 'text-[#6495ED] underline underline-offset-4 decoration-2'
                  : 'text-gray-300 hover:text-[#6495ED]'
              } font-medium transition-all duration-300 hover:scale-110`}
-              onClick={closeMenu}
+              onClick={closeMenu} // Close the mobile menu when a link is clicked
            >
-              {labels[idx]}
+              {labels[idx]} {/* Display label for the link */}
            </Link>
          </li>
        );