refactor: simplify QR stand presets to single urban qr-1.svg template
This commit is contained in:
AyrisAI
@@ -283,53 +283,55 @@ export default function QrScreen() {
|
||||
Şablon seçin; QR kodunuz otomatik yerleşsin. Baskıya hazır A5 PDF veya PNG olarak indirin.
|
||||
</Text>
|
||||
|
||||
{/* Horizontal Theme Selector */}
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={{ gap: 10, paddingHorizontal: 4, marginBottom: 20 }}
|
||||
>
|
||||
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
||||
const isSelected = preset.key === selectedKey;
|
||||
return (
|
||||
<Pressable
|
||||
key={preset.key}
|
||||
onPress={() => setSelectedKey(preset.key)}
|
||||
style={{
|
||||
backgroundColor: isSelected ? "#1C1917" : "#FFFFFF",
|
||||
borderWidth: 1.5,
|
||||
borderColor: isSelected ? "#1C1917" : "#E7E5E4",
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
{/* Horizontal Theme Selector (rendered only if multiple themes exist) */}
|
||||
{Object.values(QR_STAND_PRESETS).length > 1 && (
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={{ gap: 10, paddingHorizontal: 4, marginBottom: 20 }}
|
||||
>
|
||||
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
||||
const isSelected = preset.key === selectedKey;
|
||||
return (
|
||||
<Pressable
|
||||
key={preset.key}
|
||||
onPress={() => setSelectedKey(preset.key)}
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
backgroundColor: preset.plaqueColor,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255,255,255,0.4)",
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: "700",
|
||||
color: isSelected ? "#FFFFFF" : "#1C1917",
|
||||
backgroundColor: isSelected ? "#1C1917" : "#FFFFFF",
|
||||
borderWidth: 1.5,
|
||||
borderColor: isSelected ? "#1C1917" : "#E7E5E4",
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
{preset.name}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
<View
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 7,
|
||||
backgroundColor: preset.plaqueColor,
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255,255,255,0.4)",
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: "700",
|
||||
color: isSelected ? "#FFFFFF" : "#1C1917",
|
||||
}}
|
||||
>
|
||||
{preset.name}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{/* Live Stand Preview Wrapped in ViewShot */}
|
||||
<View
|
||||
|
||||
@@ -108,49 +108,51 @@ export function QrStandGeneratorClient({
|
||||
<main className="flex-1 max-w-6xl w-full mx-auto p-4 sm:p-8 flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center">
|
||||
{/* Left Panel: Preset Selectors & Download Controls */}
|
||||
<div className="w-full lg:w-96 flex flex-col gap-6">
|
||||
<div className="bg-stone-900/80 border border-stone-800 p-6 rounded-3xl space-y-4 shadow-xl">
|
||||
<div>
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-amber-400">
|
||||
1. Stant Teması Seçin
|
||||
</span>
|
||||
<h1 className="text-xl sm:text-2xl font-extrabold text-white mt-1">
|
||||
Masa Kartı Şablonları
|
||||
</h1>
|
||||
<p className="text-xs text-stone-400 mt-1 leading-relaxed">
|
||||
Restoranınızın konseptine uygun masa stant tasarımını seçin.
|
||||
</p>
|
||||
</div>
|
||||
{Object.values(QR_STAND_PRESETS).length > 1 && (
|
||||
<div className="bg-stone-900/80 border border-stone-800 p-6 rounded-3xl space-y-4 shadow-xl">
|
||||
<div>
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-amber-400">
|
||||
1. Stant Teması Seçin
|
||||
</span>
|
||||
<h1 className="text-xl sm:text-2xl font-extrabold text-white mt-1">
|
||||
Masa Kartı Şablonları
|
||||
</h1>
|
||||
<p className="text-xs text-stone-400 mt-1 leading-relaxed">
|
||||
Restoranınızın konseptine uygun masa stant tasarımını seçin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Presets List */}
|
||||
<div className="space-y-2.5 pt-2">
|
||||
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
||||
const isSelected = preset.key === selectedKey;
|
||||
return (
|
||||
<button
|
||||
key={preset.key}
|
||||
onClick={() => setSelectedKey(preset.key)}
|
||||
className={`w-full p-3.5 rounded-2xl border text-left transition-all flex items-center justify-between ${
|
||||
isSelected
|
||||
? "bg-amber-500/10 border-amber-500 text-amber-400 shadow-md shadow-amber-500/5"
|
||||
: "bg-stone-950/60 border-stone-800 text-stone-300 hover:border-stone-700"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-4 h-4 rounded-full border border-white/20 shadow-sm"
|
||||
style={{ background: preset.plaqueBg }}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-xs font-bold">{preset.name}</div>
|
||||
<div className="text-[10px] text-stone-400">{preset.categoryName}</div>
|
||||
{/* Presets List */}
|
||||
<div className="space-y-2.5 pt-2">
|
||||
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
||||
const isSelected = preset.key === selectedKey;
|
||||
return (
|
||||
<button
|
||||
key={preset.key}
|
||||
onClick={() => setSelectedKey(preset.key)}
|
||||
className={`w-full p-3.5 rounded-2xl border text-left transition-all flex items-center justify-between ${
|
||||
isSelected
|
||||
? "bg-amber-500/10 border-amber-500 text-amber-400 shadow-md shadow-amber-500/5"
|
||||
: "bg-stone-950/60 border-stone-800 text-stone-300 hover:border-stone-700"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-4 h-4 rounded-full border border-white/20 shadow-sm"
|
||||
style={{ background: preset.plaqueBg }}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-xs font-bold">{preset.name}</div>
|
||||
<div className="text-[10px] text-stone-400">{preset.categoryName}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isSelected && <span className="text-xs font-bold">✓</span>}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{isSelected && <span className="text-xs font-bold">✓</span>}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Download Buttons */}
|
||||
<div className="bg-stone-900/80 border border-stone-800 p-6 rounded-3xl space-y-3.5 shadow-xl">
|
||||
|
||||
@@ -21,26 +21,8 @@ export interface QrStandPreset {
|
||||
export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
|
||||
urban: {
|
||||
key: "urban",
|
||||
name: "Urban Terracotta",
|
||||
categoryName: "Burger & Fast Casual",
|
||||
bgGradient: "radial-gradient(circle at 50% 50%, #1a3a29 0%, #0e2016 100%)",
|
||||
plaqueBg: "linear-gradient(135deg, #a64d2a 0%, #8e3f20 100%)",
|
||||
plaqueColor: "#a64d2a",
|
||||
borderAccent: "rgba(255, 255, 255, 0.15)",
|
||||
qrBg: "#f8f3eb",
|
||||
qrColor: "#a64d2a",
|
||||
logoBorder: "#f5be72",
|
||||
logoBg: "rgba(166, 77, 42, 0.8)",
|
||||
accentText: "#f5be72",
|
||||
headerText: "#ffffff",
|
||||
subText: "rgba(255, 255, 255, 0.9)",
|
||||
dividerColor: "rgba(255, 255, 255, 0.25)",
|
||||
categories: ["BURGERS", "FRIES", "SHAKES", "VEGAN OPTIONS"],
|
||||
},
|
||||
"custom-svg-1": {
|
||||
key: "custom-svg-1",
|
||||
name: "Urban Premium SVG",
|
||||
categoryName: "Özel SVG Vektör Şablon",
|
||||
name: "The Urban Burger QR Stand",
|
||||
categoryName: "Özel Masa Kartı Şablonu",
|
||||
bgGradient: "radial-gradient(circle at 50% 50%, #1c3e2b 0%, #0e2016 100%)",
|
||||
plaqueBg: "linear-gradient(135deg, #a64d2a 0%, #8e3f20 100%)",
|
||||
plaqueColor: "#a64d2a",
|
||||
@@ -56,76 +38,4 @@ export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
|
||||
categories: ["BURGERS", "FRIES", "SHAKES", "VEGAN OPTIONS"],
|
||||
svgTemplateUrl: "/qr-1.svg",
|
||||
},
|
||||
"la-maison": {
|
||||
key: "la-maison",
|
||||
name: "La Maison Gold",
|
||||
categoryName: "Fine Dining & Steakhouse",
|
||||
bgGradient: "radial-gradient(circle at 50% 50%, #18181b 0%, #09090b 100%)",
|
||||
plaqueBg: "linear-gradient(135deg, #1c1917 0%, #0c0a09 100%)",
|
||||
plaqueColor: "#1c1917",
|
||||
borderAccent: "rgba(200, 169, 107, 0.4)",
|
||||
qrBg: "#faf8f5",
|
||||
qrColor: "#1c1917",
|
||||
logoBorder: "#c8a96b",
|
||||
logoBg: "rgba(28, 25, 23, 0.9)",
|
||||
accentText: "#c8a96b",
|
||||
headerText: "#ffffff",
|
||||
subText: "#d6d3d1",
|
||||
dividerColor: "rgba(200, 169, 107, 0.3)",
|
||||
categories: ["BAŞLANGIÇLAR", "ANA YEMEKLER", "ŞARAPLAR", "TATLILAR"],
|
||||
},
|
||||
nordic: {
|
||||
key: "nordic",
|
||||
name: "Nordic Minimal",
|
||||
categoryName: "Kafe, Fırın & Kahve",
|
||||
bgGradient: "radial-gradient(circle at 50% 50%, #e7e5e4 0%, #d6d3d1 100%)",
|
||||
plaqueBg: "linear-gradient(135deg, #ffffff 0%, #f5f5f4 100%)",
|
||||
plaqueColor: "#ffffff",
|
||||
borderAccent: "rgba(0, 0, 0, 0.08)",
|
||||
qrBg: "#18181b",
|
||||
qrColor: "#ffffff",
|
||||
logoBorder: "#18181b",
|
||||
logoBg: "#ffffff",
|
||||
accentText: "#18181b",
|
||||
headerText: "#18181b",
|
||||
subText: "#78716c",
|
||||
dividerColor: "rgba(0, 0, 0, 0.12)",
|
||||
categories: ["ESPRESSO BARI", "FROZEN & İÇECEK", "KRUVASAN", "TATLILAR"],
|
||||
},
|
||||
bistro: {
|
||||
key: "bistro",
|
||||
name: "Classic Bistro",
|
||||
categoryName: "Pizzeria & İtalyan",
|
||||
bgGradient: "radial-gradient(circle at 50% 50%, #3f1212 0%, #240a0a 100%)",
|
||||
plaqueBg: "linear-gradient(135deg, #8b1e1e 0%, #6e1616 100%)",
|
||||
plaqueColor: "#8b1e1e",
|
||||
borderAccent: "rgba(255, 235, 200, 0.2)",
|
||||
qrBg: "#fffbeb",
|
||||
qrColor: "#8b1e1e",
|
||||
logoBorder: "#f59e0b",
|
||||
logoBg: "rgba(139, 30, 30, 0.85)",
|
||||
accentText: "#fbbf24",
|
||||
headerText: "#fffbeb",
|
||||
subText: "#fef3c7",
|
||||
dividerColor: "rgba(255, 235, 200, 0.3)",
|
||||
categories: ["ODUN ATEŞİ PİZZA", "MAKARNALAR", "SALATALAR", "TİRAMİSU"],
|
||||
},
|
||||
neon: {
|
||||
key: "neon",
|
||||
name: "Neon Sapphire",
|
||||
categoryName: "Bar, Pub & Nightlife",
|
||||
bgGradient: "radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%)",
|
||||
plaqueBg: "linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%)",
|
||||
plaqueColor: "#1e1b4b",
|
||||
borderAccent: "rgba(99, 102, 241, 0.4)",
|
||||
qrBg: "#e0e7ff",
|
||||
qrColor: "#312e81",
|
||||
logoBorder: "#818cf8",
|
||||
logoBg: "rgba(30, 27, 75, 0.9)",
|
||||
accentText: "#818cf8",
|
||||
headerText: "#ffffff",
|
||||
subText: "#c7d2fe",
|
||||
dividerColor: "rgba(99, 102, 241, 0.3)",
|
||||
categories: ["İMKAN KOKTEYLLER", "BİRALAR", "ATIŞTIRMALIKLAR", "MÜZİK & ETKİNLİK"],
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user