Build application shell with live runtime status

2026-05-20 12:22:40 +01:00
parent b38c374a81
commit 9fcf67c7ae
16 changed files with 672 additions and 6 deletions
@@ -0,0 +1,101 @@
+import {
+  CloudSun,
+  Droplet,
+  Home,
+  Settings,
+  TabletSmartphone,
+  Wind,
+} from "lucide-react";
+
+import logo from "../../assets/logo.png";
+
+type SidebarProps = {
+  theme: "dark" | "light";
+};
+
+const navigationItems = [
+  { label: "Painel Principal", icon: Home, active: true },
+  { label: "Meteorologia", icon: CloudSun },
+  { label: "Consola (VNC)", icon: TabletSmartphone },
+  { label: "Rega", icon: Droplet },
+  { label: "Clima", icon: Wind },
+  { label: "Configurações", icon: Settings },
+];
+
+export function Sidebar({ theme }: SidebarProps) {
+  const isDark = theme === "dark";
+
+  return (
+    <aside
+      className={
+        isDark
+          ? "flex min-h-screen w-64 flex-col bg-[#0B1620] px-4 py-5 shadow-[inset_-1px_0_0_0_rgba(80,100,120,0.25),2px_0_12px_rgba(0,0,0,0.15)]"
+          : "flex min-h-screen w-64 flex-col bg-[#EEF3F7] px-4 py-5 shadow-[inset_-1px_0_0_0_rgba(180,190,200,0.5)]"
+      }
+    >
+      <div className="mb-10 flex items-center gap-3 px-2">
+        <img
+          src={logo}
+          alt="LitoralRegas"
+          className="h-12 w-12 shrink-0 object-contain"
+        />
+
+        <div className="min-w-0">
+          <div
+            className={
+              isDark
+                ? "truncate text-[16px] font-bold tracking-wide text-white"
+                : "truncate text-[16px] font-bold tracking-wide text-[#162434]"
+            }
+          >
+            LITORAL CENTRAL
+          </div>
+
+          <div
+            className={
+              isDark
+                ? "mt-0.5 text-[10px] uppercase tracking-[0.18em] text-[#8FA3B8]"
+                : "mt-0.5 text-[10px] uppercase tracking-[0.18em] text-[#607284]"
+            }
+          >
+            OPERAÇÕES AGRÍCOLAS
+          </div>
+        </div>
+      </div>
+
+      <nav className="space-y-2">
+        {navigationItems.map((item) => {
+          const Icon = item.icon;
+
+          return (
+            <button
+              key={item.label}
+              className={
+                item.active
+                  ? isDark
+                    ? "flex w-full items-center gap-3 rounded-xl bg-[#18304B] px-4 py-3 text-left text-sm font-semibold text-white"
+                    : "flex w-full items-center gap-3 rounded-xl bg-[#DCE8F5] px-4 py-3 text-left text-sm font-semibold text-[#162434]"
+                  : isDark
+                    ? "flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-sm font-medium text-[#D8E2EC] hover:bg-[#132434] hover:text-white"
+                    : "flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-sm font-medium text-[#445569] hover:bg-[#E2E8F0] hover:text-[#162434]"
+              }
+            >
+              <Icon className="h-5 w-5" />
+              {item.label}
+            </button>
+          );
+        })}
+      </nav>
+
+      <div
+        className={
+          isDark
+            ? "mt-auto px-4 text-sm text-slate-400"
+            : "mt-auto px-4 text-sm text-[#607284]"
+        }
+      >
+        Recolher menu
+      </div>
+    </aside>
+  );
+}