kite-qr

2026-06-11 13:25:26 +03:00
parent b931ee64d4
commit 60b48ca5e8
60 changed files with 12302 additions and 0 deletions
@@ -0,0 +1,68 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { MenuCategory } from "@/data/menu";
+
+interface CategoryNavProps {
+  categories: MenuCategory[];
+  activeCategoryId: string;
+  icons: Record<string, string>;
+}
+
+export function CategoryNav({ categories, activeCategoryId, icons }: CategoryNavProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!activeCategoryId || !containerRef.current) return;
+    const el = containerRef.current.querySelector(
+      `[data-id="${activeCategoryId}"]`
+    ) as HTMLElement | null;
+    el?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+  }, [activeCategoryId]);
+
+  const scrollTo = (id: string) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    const y = el.getBoundingClientRect().top + window.scrollY - 72;
+    window.scrollTo({ top: y, behavior: "smooth" });
+  };
+
+  return (
+    <div
+      className="sticky top-0 z-50 border-b"
+      style={{
+        background: "rgba(250, 248, 243, 0.93)",
+        backdropFilter: "blur(18px)",
+        WebkitBackdropFilter: "blur(18px)",
+        borderColor: "rgba(140, 108, 72, 0.12)",
+      }}
+    >
+      <div
+        ref={containerRef}
+        className="flex overflow-x-auto hide-scrollbar px-3 py-2 gap-1.5 items-center"
+      >
+        {categories.map((cat) => {
+          const active = cat.id === activeCategoryId;
+          return (
+            <button
+              key={cat.id}
+              data-id={cat.id}
+              onClick={() => scrollTo(cat.id)}
+              className={`
+                flex items-center gap-1.5 whitespace-nowrap px-3 py-1.5 rounded-full
+                text-[11px] font-medium font-sans shrink-0
+                transition-all duration-200 active:scale-95
+                ${active ? "pill-active" : "pill-inactive hover:bg-[rgba(120,90,58,0.14)]"}
+              `}
+            >
+              <span className="text-[13px] leading-none select-none">
+                {icons[cat.id] ?? "🍽️"}
+              </span>
+              <span>{cat.title}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,48 @@
+import React from "react";
+import { MenuItem as MenuItemType } from "@/data/menu";
+
+export function MenuItem({ item, onClick }: { item: MenuItemType; onClick?: () => void }) {
+  return (
+    <div
+      className="py-3.5 border-b last:border-b-0 cursor-pointer transition-colors hover:bg-black/5"
+      style={{ borderColor: "rgba(140, 108, 72, 0.08)" }}
+      onClick={onClick}
+    >
+      <div className="flex justify-between items-start gap-4">
+        <div className="flex-1 min-w-0">
+          <h3
+            className="text-[13.5px] font-semibold leading-snug font-sans"
+            style={{ color: "var(--stone-ink)" }}
+          >
+            {item.name}
+          </h3>
+          {item.description && (
+            <p
+              className="mt-0.5 text-[11.5px] leading-relaxed font-sans line-clamp-2"
+              style={{ color: "var(--stone-muted)" }}
+            >
+              {item.description}
+            </p>
+          )}
+          {item.price && (
+            <div
+              className="mt-1 text-[13px] font-semibold font-sans tabular-nums"
+              style={{ color: "var(--amber)" }}
+            >
+              {item.price}
+            </div>
+          )}
+        </div>
+        {item.image && (
+          <div className="shrink-0">
+            <img 
+              src={item.image} 
+              alt={item.name} 
+              className="w-20 h-20 object-cover rounded-lg shadow-sm"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}