first commit
This commit is contained in:
AyrisAI
@@ -0,0 +1,733 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState, useEffect } from "react";
|
||||
import type { ThemeConfig } from "@menulio/shared";
|
||||
import { THEME_PRESETS, resolveThemePreset, type ThemePreset } from "@/lib/theme";
|
||||
|
||||
export interface MenuItem {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
price: number;
|
||||
image_url: string | null;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface MenuCategory {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
is_active: boolean;
|
||||
menu_items: MenuItem[];
|
||||
}
|
||||
|
||||
export interface RestaurantData {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
logo_url: string | null;
|
||||
phone?: string | null;
|
||||
address?: string | null;
|
||||
}
|
||||
|
||||
interface PublicMenuClientProps {
|
||||
restaurant: RestaurantData;
|
||||
categories: MenuCategory[];
|
||||
initialThemeKey?: string;
|
||||
customThemeConfig?: Partial<ThemeConfig>;
|
||||
allowThemeSwitching?: boolean;
|
||||
}
|
||||
|
||||
export function PublicMenuClient({
|
||||
restaurant,
|
||||
categories,
|
||||
initialThemeKey = "elegant",
|
||||
customThemeConfig,
|
||||
allowThemeSwitching = true,
|
||||
}: PublicMenuClientProps) {
|
||||
const [selectedThemeKey, setSelectedThemeKey] = useState<string>(initialThemeKey);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [activeCategoryId, setActiveCategoryId] = useState<string>(categories[0]?.id ?? "");
|
||||
const [selectedItem, setSelectedItem] = useState<MenuItem | null>(null);
|
||||
const [showInfoModal, setShowInfoModal] = useState(false);
|
||||
const [showThemePicker, setShowThemePicker] = useState(false);
|
||||
const [copiedLink, setCopiedLink] = useState(false);
|
||||
const [showBackToTop, setShowBackToTop] = useState(false);
|
||||
const [tableNumber, setTableNumber] = useState<string | null>(null);
|
||||
const [serviceActionToast, setServiceActionToast] = useState<string | null>(null);
|
||||
|
||||
const theme: ThemePreset = useMemo(() => {
|
||||
return resolveThemePreset(selectedThemeKey, customThemeConfig);
|
||||
}, [selectedThemeKey, customThemeConfig]);
|
||||
|
||||
// Extract table number from URL (?table=X)
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const table = params.get("table") || params.get("masa");
|
||||
if (table) setTableNumber(table);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Track scroll position for active category & back-to-top button
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setShowBackToTop(window.scrollY > 300);
|
||||
|
||||
const categoryElements = categories.map((c) => ({
|
||||
id: c.id,
|
||||
el: document.getElementById(`category-${c.id}`),
|
||||
}));
|
||||
|
||||
const scrollPos = window.scrollY + 140;
|
||||
for (let i = categoryElements.length - 1; i >= 0; i--) {
|
||||
const item = categoryElements[i];
|
||||
if (item && item.el && item.el.offsetTop <= scrollPos) {
|
||||
setActiveCategoryId(item.id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, [categories]);
|
||||
|
||||
// Filter categories and items based on search
|
||||
const filteredCategories = useMemo(() => {
|
||||
const q = searchQuery.trim().toLowerCase();
|
||||
if (!q) return categories;
|
||||
|
||||
return categories
|
||||
.map((cat) => ({
|
||||
...cat,
|
||||
menu_items: cat.menu_items.filter(
|
||||
(item) =>
|
||||
item.is_active &&
|
||||
(item.name.toLowerCase().includes(q) || (item.description && item.description.toLowerCase().includes(q))),
|
||||
),
|
||||
}))
|
||||
.filter((cat) => cat.menu_items.length > 0);
|
||||
}, [categories, searchQuery]);
|
||||
|
||||
const totalItemsCount = useMemo(() => {
|
||||
return categories.reduce((acc, cat) => acc + cat.menu_items.filter((i) => i.is_active).length, 0);
|
||||
}, [categories]);
|
||||
|
||||
const scrollToCategory = (categoryId: string) => {
|
||||
setActiveCategoryId(categoryId);
|
||||
const el = document.getElementById(`category-${categoryId}`);
|
||||
if (el) {
|
||||
const yOffset = -85;
|
||||
const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
|
||||
window.scrollTo({ top: y, behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
const url = window.location.href;
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: `${restaurant.name} - Dijital Menü`,
|
||||
text: `${restaurant.name} dijital menüsünü inceleyin!`,
|
||||
url,
|
||||
});
|
||||
return;
|
||||
} catch {
|
||||
// fallback
|
||||
}
|
||||
}
|
||||
await navigator.clipboard.writeText(url);
|
||||
setCopiedLink(true);
|
||||
setTimeout(() => setCopiedLink(false), 2500);
|
||||
};
|
||||
|
||||
const triggerServiceAction = (msg: string) => {
|
||||
setServiceActionToast(msg);
|
||||
setTimeout(() => setServiceActionToast(null), 3500);
|
||||
};
|
||||
|
||||
const fontClass =
|
||||
theme.fontFamily === "serif" ? "font-serif" : theme.fontFamily === "heading" ? "font-heading" : "font-sans";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`min-h-screen ${fontClass} transition-colors duration-300`}
|
||||
style={{
|
||||
backgroundColor: theme.config.background,
|
||||
color: theme.textPrimary,
|
||||
}}
|
||||
>
|
||||
{/* Toast Notification */}
|
||||
{serviceActionToast && (
|
||||
<div className="fixed top-5 left-1/2 -translate-x-1/2 z-50 animate-bounce-in max-w-sm w-full px-4">
|
||||
<div className="bg-stone-900 text-white px-5 py-3.5 rounded-2xl shadow-2xl flex items-center gap-3 border border-stone-700">
|
||||
<span className="text-xl">🔔</span>
|
||||
<p className="text-sm font-medium flex-1">{serviceActionToast}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Container - Optimized for Mobile First & Desktop Centered */}
|
||||
<div className="w-full max-w-2xl mx-auto min-h-screen flex flex-col shadow-2xl relative">
|
||||
{/* Header Hero Banner */}
|
||||
<header
|
||||
style={{ background: theme.headerGradient }}
|
||||
className="relative text-white px-4 sm:px-6 pt-8 sm:pt-10 pb-7 sm:pb-8 rounded-b-3xl shadow-lg overflow-hidden"
|
||||
>
|
||||
{/* Subtle Ambient Glow */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-64 h-64 rounded-full blur-3xl opacity-20 pointer-events-none"
|
||||
style={{ backgroundColor: theme.config.primaryColor }}
|
||||
/>
|
||||
|
||||
{/* Top Bar: Table & Action Buttons */}
|
||||
<div className="flex items-center justify-between mb-4 sm:mb-5 relative z-10">
|
||||
{tableNumber ? (
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-xs font-semibold tracking-wide">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||
Masa {tableNumber}
|
||||
</div>
|
||||
) : (
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-xs font-medium tracking-wide">
|
||||
<span>✨</span> Dijital QR Menü
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-1.5 sm:gap-2">
|
||||
{/* Restaurant Info Trigger */}
|
||||
{(restaurant.phone || restaurant.address) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowInfoModal(true)}
|
||||
className="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/10 hover:bg-white/20 active:scale-95 transition-all flex items-center justify-center border border-white/15 backdrop-blur-md"
|
||||
aria-label="Restoran Bilgisi"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Share Trigger */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleShare}
|
||||
className="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/10 hover:bg-white/20 active:scale-95 transition-all flex items-center justify-center border border-white/15 backdrop-blur-md"
|
||||
aria-label="Menüyü Paylaş"
|
||||
>
|
||||
{copiedLink ? (
|
||||
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Live Theme Switcher Trigger */}
|
||||
{allowThemeSwitching && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowThemePicker(!showThemePicker)}
|
||||
className="px-2.5 py-1 sm:py-1.5 rounded-full bg-white/10 hover:bg-white/20 active:scale-95 transition-all flex items-center gap-1.5 border border-white/15 backdrop-blur-md text-[11px] sm:text-xs font-semibold"
|
||||
aria-label="Tema Değiştir"
|
||||
>
|
||||
<span className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full" style={{ backgroundColor: theme.config.primaryColor }} />
|
||||
<span>Tema</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Restaurant Identity */}
|
||||
<div className="flex items-center gap-3 sm:gap-4 relative z-10">
|
||||
{restaurant.logo_url ? (
|
||||
<img
|
||||
src={restaurant.logo_url}
|
||||
alt={restaurant.name}
|
||||
className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl object-cover border-2 shadow-md flex-shrink-0"
|
||||
style={{ borderColor: theme.config.primaryColor }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl flex-shrink-0 shadow-inner border border-white/20"
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.12)",
|
||||
color: theme.config.primaryColor,
|
||||
}}
|
||||
>
|
||||
{restaurant.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-xl sm:text-2xl font-bold tracking-tight leading-snug break-words">
|
||||
{restaurant.name}
|
||||
</h1>
|
||||
<p className="text-[11px] sm:text-xs text-white/70 mt-0.5 flex flex-wrap items-center gap-1.5">
|
||||
<span>{totalItemsCount} Özel Lezzet</span>
|
||||
<span>•</span>
|
||||
<span className="capitalize">{theme.name} Şablonu</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Live Search Bar */}
|
||||
<div className="mt-6 relative z-10">
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Yemek, içecek veya tatlı ara..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-11 pr-10 py-3 rounded-2xl text-stone-900 bg-white/95 placeholder-stone-400 text-sm focus:outline-none focus:ring-2 transition-all shadow-lg"
|
||||
style={{
|
||||
outlineColor: theme.config.primaryColor,
|
||||
}}
|
||||
/>
|
||||
<svg
|
||||
className="w-5 h-5 absolute left-3.5 text-stone-400 pointer-events-none"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery("")}
|
||||
className="absolute right-3.5 w-5 h-5 rounded-full bg-stone-200 text-stone-600 flex items-center justify-center text-xs"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Live Theme Switcher Drawer */}
|
||||
{showThemePicker && allowThemeSwitching && (
|
||||
<div className="bg-stone-900 text-white px-5 py-4 border-b border-stone-800 animate-slide-up">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<p className="text-xs font-bold uppercase tracking-wider text-stone-400">
|
||||
Canlı Tema Önizleme (5 Şablon)
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowThemePicker(false)}
|
||||
className="text-stone-400 hover:text-white text-xs"
|
||||
>
|
||||
Kapat ✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{Object.values(THEME_PRESETS).map((preset) => {
|
||||
const isSelected = selectedThemeKey === preset.key;
|
||||
return (
|
||||
<button
|
||||
key={preset.key}
|
||||
type="button"
|
||||
onClick={() => setSelectedThemeKey(preset.key)}
|
||||
className={`flex flex-col items-center gap-1.5 p-2 rounded-xl border text-center transition-all ${
|
||||
isSelected
|
||||
? "bg-white/15 border-white shadow-md scale-105"
|
||||
: "bg-white/5 border-white/10 opacity-70 hover:opacity-100"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className="w-5 h-5 rounded-full border border-white/30"
|
||||
style={{ backgroundColor: preset.config.primaryColor }}
|
||||
/>
|
||||
<span className="text-[10px] font-medium leading-tight truncate w-full">
|
||||
{preset.name.split(" ")[0]}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sticky Category Navigation Bar */}
|
||||
{categories.length > 0 && !searchQuery && (
|
||||
<nav
|
||||
className="sticky top-0 z-30 px-4 py-3 backdrop-blur-md border-b transition-colors"
|
||||
style={{
|
||||
backgroundColor: `${theme.config.background}E6`,
|
||||
borderColor: theme.cardBorder,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 overflow-x-auto no-scrollbar scroll-smooth py-0.5">
|
||||
{categories.map((cat) => {
|
||||
const isActive = activeCategoryId === cat.id;
|
||||
return (
|
||||
<button
|
||||
key={cat.id}
|
||||
type="button"
|
||||
onClick={() => scrollToCategory(cat.id)}
|
||||
className={`px-4 py-2 rounded-full text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 ${
|
||||
isActive
|
||||
? "text-white shadow-md scale-105"
|
||||
: "hover:bg-black/5 active:scale-95"
|
||||
}`}
|
||||
style={
|
||||
isActive
|
||||
? { backgroundColor: theme.config.primaryColor }
|
||||
: {
|
||||
backgroundColor: theme.accentBg,
|
||||
color: theme.textSecondary,
|
||||
}
|
||||
}
|
||||
>
|
||||
<span>{cat.name}</span>
|
||||
<span
|
||||
className={`text-[10px] px-1.5 py-0.2 rounded-full ${
|
||||
isActive ? "bg-black/20 text-white" : "bg-black/5"
|
||||
}`}
|
||||
>
|
||||
{cat.menu_items.length}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Menu Content Area */}
|
||||
<main className="flex-1 px-4 py-6 space-y-8">
|
||||
{filteredCategories.length === 0 ? (
|
||||
<div className="text-center py-16 px-4">
|
||||
<div className="w-16 h-16 rounded-full bg-stone-100 dark:bg-stone-800 flex items-center justify-center text-3xl mx-auto mb-4">
|
||||
🔍
|
||||
</div>
|
||||
<h3 className="text-base font-bold text-stone-800 dark:text-stone-200">
|
||||
Aramanıza Uygun Lezzet Bulunamadı
|
||||
</h3>
|
||||
<p className="text-xs text-stone-500 mt-1 max-w-xs mx-auto">
|
||||
"{searchQuery}" için sonuç yok. Lütfen farklı bir arama kelimesi deneyin.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery("")}
|
||||
className="mt-4 px-4 py-2 rounded-xl text-xs font-bold text-white shadow"
|
||||
style={{ backgroundColor: theme.config.primaryColor }}
|
||||
>
|
||||
Tüm Menüyü Göster
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
filteredCategories.map((category) => (
|
||||
<section
|
||||
key={category.id}
|
||||
id={`category-${category.id}`}
|
||||
className="scroll-mt-24 space-y-3.5"
|
||||
>
|
||||
{/* Category Heading Banner */}
|
||||
<div className="flex items-center justify-between border-b pb-2" style={{ borderColor: theme.cardBorder }}>
|
||||
<div>
|
||||
<h2
|
||||
className="text-lg font-bold tracking-tight"
|
||||
style={{ color: theme.config.primaryColor }}
|
||||
>
|
||||
{category.name}
|
||||
</h2>
|
||||
{category.description && (
|
||||
<p className="text-xs mt-0.5" style={{ color: theme.textSecondary }}>
|
||||
{category.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className="text-[11px] font-semibold px-2.5 py-0.5 rounded-full"
|
||||
style={{ backgroundColor: theme.badgeBg, color: theme.badgeText }}
|
||||
>
|
||||
{category.menu_items.length} Ürün
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Items Container: Grid / Card / List Layout based on Theme */}
|
||||
<div
|
||||
className={
|
||||
theme.config.productLayout === "list"
|
||||
? "space-y-3"
|
||||
: "grid grid-cols-1 gap-3.5"
|
||||
}
|
||||
>
|
||||
{category.menu_items.map((item) => (
|
||||
<article
|
||||
key={item.id}
|
||||
onClick={() => setSelectedItem(item)}
|
||||
className={`group relative rounded-2xl p-4 transition-all duration-200 cursor-pointer border hover:shadow-lg active:scale-[0.99] flex gap-3.5 items-center ${
|
||||
theme.config.productLayout === "list" ? "justify-between" : ""
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: theme.cardBg,
|
||||
borderColor: theme.cardBorder,
|
||||
}}
|
||||
>
|
||||
{/* Item Details */}
|
||||
<div className="flex-1 min-w-0 pr-1">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="font-bold text-sm tracking-tight leading-snug group-hover:text-amber-600 transition-colors">
|
||||
{item.name}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{item.description && (
|
||||
<p
|
||||
className="text-xs mt-1 leading-relaxed line-clamp-2"
|
||||
style={{ color: theme.textSecondary }}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-2.5 flex items-center justify-between">
|
||||
<span
|
||||
className="text-base font-extrabold tracking-tight"
|
||||
style={{ color: theme.config.primaryColor }}
|
||||
>
|
||||
₺{item.price.toFixed(0)}
|
||||
</span>
|
||||
|
||||
<span className="text-[10px] font-bold px-2 py-0.5 rounded-md bg-black/5 dark:bg-white/10 group-hover:bg-amber-100 dark:group-hover:bg-amber-900/40 transition-colors">
|
||||
İncele →
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Item Thumbnail Image */}
|
||||
{item.image_url && (
|
||||
<div className="relative w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-stone-100 dark:bg-stone-800 shadow-sm">
|
||||
<img
|
||||
src={item.image_url}
|
||||
alt={item.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer
|
||||
className="px-6 py-10 text-center border-t mt-auto text-xs space-y-4"
|
||||
style={{
|
||||
borderColor: theme.cardBorder,
|
||||
color: theme.textSecondary,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2 font-semibold">
|
||||
<span>Powered by</span>
|
||||
<span className="text-stone-900 dark:text-white font-black tracking-wider uppercase">
|
||||
MENULIO
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] opacity-70">
|
||||
© {new Date().getFullYear()} {restaurant.name}. Fiyatlara tüm vergiler dahildir.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
{/* Floating Quick Action Bar (Garson Çağır / Hesap İste / Başa Dön) */}
|
||||
<aside aria-label="Masa Servis İşlemleri" className="fixed bottom-5 left-1/2 -translate-x-1/2 z-40 max-w-sm w-full px-4 flex items-center justify-between gap-2 pointer-events-none">
|
||||
<div className="flex items-center gap-2 pointer-events-auto shadow-2xl rounded-full p-1 bg-stone-900/90 backdrop-blur-lg border border-stone-700 text-white">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
triggerServiceAction(
|
||||
tableNumber
|
||||
? `Masa ${tableNumber} için Garson Çağrıldı! Garsonunuz en kısa sürede masanızda olacaktır.`
|
||||
: "Garson çağrıldı! Garsonunuz hemen masanızda olacaktır.",
|
||||
)
|
||||
}
|
||||
className="px-3.5 py-2 rounded-full hover:bg-white/15 active:scale-95 transition-all text-xs font-bold flex items-center gap-1.5"
|
||||
>
|
||||
<span>👋</span> Garson Çağır
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
triggerServiceAction(
|
||||
tableNumber
|
||||
? `Masa ${tableNumber} için Hesap İsteği iletildi!`
|
||||
: "Hesap isteği iletildi!",
|
||||
)
|
||||
}
|
||||
className="px-3.5 py-2 rounded-full hover:bg-white/15 active:scale-95 transition-all text-xs font-bold flex items-center gap-1.5"
|
||||
>
|
||||
<span>💳</span> Hesap İste
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showBackToTop && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||
className="w-11 h-11 rounded-full bg-stone-900 text-white shadow-2xl flex items-center justify-center pointer-events-auto active:scale-90 transition-all border border-stone-700"
|
||||
aria-label="Başa Dön"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{/* Item Detail Modal */}
|
||||
{selectedItem && (
|
||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
|
||||
<div
|
||||
className="w-full max-w-lg rounded-t-3xl sm:rounded-3xl overflow-hidden shadow-2xl animate-slide-up flex flex-col max-h-[85vh]"
|
||||
style={{ backgroundColor: theme.cardBg, color: theme.textPrimary }}
|
||||
>
|
||||
{/* Modal Image */}
|
||||
{selectedItem.image_url ? (
|
||||
<div className="relative h-56 w-full bg-stone-900">
|
||||
<img
|
||||
src={selectedItem.image_url}
|
||||
alt={selectedItem.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedItem(null)}
|
||||
className="absolute top-4 right-4 w-9 h-9 rounded-full bg-black/60 text-white flex items-center justify-center backdrop-blur-md text-sm hover:bg-black/80"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedItem(null)}
|
||||
className="w-8 h-8 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 flex items-center justify-center text-sm"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-6 overflow-y-auto space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<h3 className="text-xl font-bold tracking-tight leading-snug">
|
||||
{selectedItem.name}
|
||||
</h3>
|
||||
<span
|
||||
className="text-xl font-black whitespace-nowrap"
|
||||
style={{ color: theme.config.primaryColor }}
|
||||
>
|
||||
₺{selectedItem.price.toFixed(0)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{selectedItem.description && (
|
||||
<p className="text-sm leading-relaxed" style={{ color: theme.textSecondary }}>
|
||||
{selectedItem.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Quality Badges */}
|
||||
<div className="pt-2 flex flex-wrap gap-2 text-xs">
|
||||
<span className="px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 font-semibold border border-emerald-200">
|
||||
🌱 Taze & Günlük
|
||||
</span>
|
||||
<span className="px-3 py-1 rounded-full bg-amber-50 text-amber-700 font-semibold border border-amber-200">
|
||||
⭐ Şefin İmzası
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="p-4 border-t" style={{ borderColor: theme.cardBorder }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedItem(null);
|
||||
triggerServiceAction(`"${selectedItem.name}" sipariş tercihleriniz garsona iletildi!`);
|
||||
}}
|
||||
className="w-full py-3.5 rounded-2xl font-bold text-white shadow-lg active:scale-98 transition-all flex items-center justify-center gap-2 text-sm"
|
||||
style={{ backgroundColor: theme.config.primaryColor }}
|
||||
>
|
||||
<span>➕</span> Garsona Sipariş Olarak Bildir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Restaurant Info & Contact Modal */}
|
||||
{showInfoModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
|
||||
<div
|
||||
className="w-full max-w-md rounded-t-3xl sm:rounded-3xl overflow-hidden shadow-2xl p-6 space-y-5 animate-slide-up"
|
||||
style={{ backgroundColor: theme.cardBg, color: theme.textPrimary }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-bold">Restoran Bilgileri</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowInfoModal(false)}
|
||||
className="w-8 h-8 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 flex items-center justify-center text-sm"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-sm">
|
||||
{restaurant.phone && (
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl bg-stone-50 dark:bg-stone-800/50">
|
||||
<span className="text-lg">📞</span>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-stone-400">Telefon</p>
|
||||
<a href={`tel:${restaurant.phone}`} className="font-semibold hover:underline">
|
||||
{restaurant.phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{restaurant.address && (
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl bg-stone-50 dark:bg-stone-800/50">
|
||||
<span className="text-lg">📍</span>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-stone-400">Adres</p>
|
||||
<p className="font-medium text-xs">{restaurant.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl bg-stone-50 dark:bg-stone-800/50">
|
||||
<span className="text-lg">🕒</span>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-stone-400">Çalışma Saatleri</p>
|
||||
<p className="font-semibold text-xs">Hergün 10:00 - 00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowInfoModal(false)}
|
||||
className="w-full py-3 rounded-xl font-bold bg-stone-900 text-white text-sm"
|
||||
>
|
||||
Kapat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user