Zastosowanie wszystkich poprawek UI i logiki kalkulatora

2026-08-10 23:26:52 +02:00
commit 7324a6f800
218 changed files with 33628 additions and 0 deletions
@@ -0,0 +1,81 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface SectionItem {
+  label: string;
+  href: string;
+  description?: string;
+}
+
+interface NavSection {
+  title: string;
+  items: SectionItem[];
+}
+
+interface NavDropdownProps {
+  label: string;
+  triggerHref?: string;
+  sections: NavSection[];
+  align?: "left" | "right";
+}
+
+export function NavDropdown({ label, triggerHref, sections, align = "left" }: NavDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div
+      className="relative group"
+      onMouseEnter={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
+      <div className="flex items-center gap-1 text-sm font-medium text-primary hover:text-accent transition-colors py-2 cursor-pointer">
+        {triggerHref ? (
+          <Link href={triggerHref}>{label}</Link>
+        ) : (
+          <span>{label}</span>
+        )}
+        <ChevronDown className={cn("size-4 transition-transform", isOpen && "rotate-180")} />
+      </div>
+
+      <div
+        className={cn(
+          "absolute top-full z-50 pt-2 transition-all duration-200",
+          isOpen ? "opacity-100 translate-y-0 visible" : "opacity-0 translate-y-2 invisible",
+          align === "left" ? "left-0" : "right-0"
+        )}
+      >
+        <div className="bg-white border border-border shadow-xl rounded-xl p-4 min-w-[400px] flex gap-6">
+          {sections.map((section, sIdx) => (
+            <div key={sIdx} className="flex-1 min-w-[200px]">
+              <h4 className="text-sm font-bold text-primary mb-3 font-heading uppercase tracking-wider">{section.title}</h4>
+              <ul className="flex flex-col gap-2">
+                {section.items.map((item, iIdx) => (
+                  <li key={iIdx}>
+                    <Link
+                      href={item.href}
+                      className="block group/item"
+                      onClick={() => setIsOpen(false)}
+                    >
+                      <div className="text-sm font-medium text-primary group-hover/item:text-accent transition-colors">
+                        {item.label}
+                      </div>
+                      {item.description && (
+                        <div className="text-xs text-text-muted mt-0.5 group-hover/item:text-text-muted/80">
+                          {item.description}
+                        </div>
+                      )}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}