Restructure with Turborepo

2026-07-06 15:51:53 +02:00
parent f66cafbbc3
commit 190b3d163d
277 changed files with 53253 additions and 0 deletions
@@ -0,0 +1,58 @@
+import { IconHome, IconSearch, IconScan, IconBell, IconUser } from './icons';
+import './BottomNav.css';
+
+function BottomNav({ activeTab, onChange, isLoggedIn, badgeCount }) {
+  const tabs = [
+    { id: 'home', label: 'Inicio', Icon: IconHome },
+    { id: 'search', label: 'Buscar', Icon: IconSearch },
+    { id: 'scan', label: 'Escanear', Icon: IconScan, elevated: true },
+    { id: 'alerts', label: 'Avisos', Icon: IconBell, badge: badgeCount > 0, badgeCount },
+    { id: 'profile', label: 'Usuario', Icon: IconUser },
+  ];
+
+  return (
+    <nav className="bottom-nav" aria-label="Navegación principal">
+      {tabs.map(({ id, label, Icon, elevated, badge, badgeCount: count, requiresAuth }) => {
+        const disabled = requiresAuth && !isLoggedIn;
+        const isActive = activeTab === id;
+        return (
+          <button
+            key={id}
+            type="button"
+            className={[
+              'bottom-nav-item',
+              isActive ? 'active' : '',
+              disabled ? 'disabled' : '',
+              elevated ? 'nav-elevated' : '',
+            ].filter(Boolean).join(' ')}
+            onClick={() => {
+              if (!disabled) onChange(id);
+            }}
+            disabled={disabled}
+            aria-current={isActive ? 'page' : undefined}
+            aria-label={label}
+          >
+            {elevated ? (
+              <div className="nav-fab">
+                <Icon size={28} />
+              </div>
+            ) : (
+              <span className="nav-icon-wrap">
+                <Icon size={26} />
+                {badge && (
+                  <span className="nav-badge">{count}</span>
+                )}
+              </span>
+            )}
+            <span className={`nav-label${isActive && !elevated ? ' nav-label--active' : ''}`}>
+              {label}
+            </span>
+            {isActive && !elevated && <span className="nav-indicator" />}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
+export default BottomNav;