refactor: simplify QR stand presets to single urban qr-1.svg template
This commit is contained in:
@@ -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.
|
Şablon seçin; QR kodunuz otomatik yerleşsin. Baskıya hazır A5 PDF veya PNG olarak indirin.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
{/* Horizontal Theme Selector */}
|
{/* Horizontal Theme Selector (rendered only if multiple themes exist) */}
|
||||||
<ScrollView
|
{Object.values(QR_STAND_PRESETS).length > 1 && (
|
||||||
horizontal
|
<ScrollView
|
||||||
showsHorizontalScrollIndicator={false}
|
horizontal
|
||||||
contentContainerStyle={{ gap: 10, paddingHorizontal: 4, marginBottom: 20 }}
|
showsHorizontalScrollIndicator={false}
|
||||||
>
|
contentContainerStyle={{ gap: 10, paddingHorizontal: 4, marginBottom: 20 }}
|
||||||
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
>
|
||||||
const isSelected = preset.key === selectedKey;
|
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
||||||
return (
|
const isSelected = preset.key === selectedKey;
|
||||||
<Pressable
|
return (
|
||||||
key={preset.key}
|
<Pressable
|
||||||
onPress={() => setSelectedKey(preset.key)}
|
key={preset.key}
|
||||||
style={{
|
onPress={() => setSelectedKey(preset.key)}
|
||||||
backgroundColor: isSelected ? "#1C1917" : "#FFFFFF",
|
|
||||||
borderWidth: 1.5,
|
|
||||||
borderColor: isSelected ? "#1C1917" : "#E7E5E4",
|
|
||||||
borderRadius: 14,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingVertical: 10,
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 8,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={{
|
style={{
|
||||||
width: 14,
|
backgroundColor: isSelected ? "#1C1917" : "#FFFFFF",
|
||||||
height: 14,
|
borderWidth: 1.5,
|
||||||
borderRadius: 7,
|
borderColor: isSelected ? "#1C1917" : "#E7E5E4",
|
||||||
backgroundColor: preset.plaqueColor,
|
borderRadius: 14,
|
||||||
borderWidth: 1,
|
paddingHorizontal: 16,
|
||||||
borderColor: "rgba(255,255,255,0.4)",
|
paddingVertical: 10,
|
||||||
}}
|
flexDirection: "row",
|
||||||
/>
|
alignItems: "center",
|
||||||
<Text
|
gap: 8,
|
||||||
style={{
|
|
||||||
fontSize: 13,
|
|
||||||
fontWeight: "700",
|
|
||||||
color: isSelected ? "#FFFFFF" : "#1C1917",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{preset.name}
|
<View
|
||||||
</Text>
|
style={{
|
||||||
</Pressable>
|
width: 14,
|
||||||
);
|
height: 14,
|
||||||
})}
|
borderRadius: 7,
|
||||||
</ScrollView>
|
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 */}
|
{/* Live Stand Preview Wrapped in ViewShot */}
|
||||||
<View
|
<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">
|
<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 */}
|
{/* Left Panel: Preset Selectors & Download Controls */}
|
||||||
<div className="w-full lg:w-96 flex flex-col gap-6">
|
<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">
|
{Object.values(QR_STAND_PRESETS).length > 1 && (
|
||||||
<div>
|
<div className="bg-stone-900/80 border border-stone-800 p-6 rounded-3xl space-y-4 shadow-xl">
|
||||||
<span className="text-xs font-bold uppercase tracking-wider text-amber-400">
|
<div>
|
||||||
1. Stant Teması Seçin
|
<span className="text-xs font-bold uppercase tracking-wider text-amber-400">
|
||||||
</span>
|
1. Stant Teması Seçin
|
||||||
<h1 className="text-xl sm:text-2xl font-extrabold text-white mt-1">
|
</span>
|
||||||
Masa Kartı Şablonları
|
<h1 className="text-xl sm:text-2xl font-extrabold text-white mt-1">
|
||||||
</h1>
|
Masa Kartı Şablonları
|
||||||
<p className="text-xs text-stone-400 mt-1 leading-relaxed">
|
</h1>
|
||||||
Restoranınızın konseptine uygun masa stant tasarımını seçin.
|
<p className="text-xs text-stone-400 mt-1 leading-relaxed">
|
||||||
</p>
|
Restoranınızın konseptine uygun masa stant tasarımını seçin.
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Presets List */}
|
{/* Presets List */}
|
||||||
<div className="space-y-2.5 pt-2">
|
<div className="space-y-2.5 pt-2">
|
||||||
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
{Object.values(QR_STAND_PRESETS).map((preset) => {
|
||||||
const isSelected = preset.key === selectedKey;
|
const isSelected = preset.key === selectedKey;
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={preset.key}
|
key={preset.key}
|
||||||
onClick={() => setSelectedKey(preset.key)}
|
onClick={() => setSelectedKey(preset.key)}
|
||||||
className={`w-full p-3.5 rounded-2xl border text-left transition-all flex items-center justify-between ${
|
className={`w-full p-3.5 rounded-2xl border text-left transition-all flex items-center justify-between ${
|
||||||
isSelected
|
isSelected
|
||||||
? "bg-amber-500/10 border-amber-500 text-amber-400 shadow-md shadow-amber-500/5"
|
? "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"
|
: "bg-stone-950/60 border-stone-800 text-stone-300 hover:border-stone-700"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className="w-4 h-4 rounded-full border border-white/20 shadow-sm"
|
className="w-4 h-4 rounded-full border border-white/20 shadow-sm"
|
||||||
style={{ background: preset.plaqueBg }}
|
style={{ background: preset.plaqueBg }}
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<div className="text-xs font-bold">{preset.name}</div>
|
<div className="text-xs font-bold">{preset.name}</div>
|
||||||
<div className="text-[10px] text-stone-400">{preset.categoryName}</div>
|
<div className="text-[10px] text-stone-400">{preset.categoryName}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{isSelected && <span className="text-xs font-bold">✓</span>}
|
||||||
{isSelected && <span className="text-xs font-bold">✓</span>}
|
</button>
|
||||||
</button>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{/* Action Download Buttons */}
|
{/* Action Download Buttons */}
|
||||||
<div className="bg-stone-900/80 border border-stone-800 p-6 rounded-3xl space-y-3.5 shadow-xl">
|
<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> = {
|
export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
|
||||||
urban: {
|
urban: {
|
||||||
key: "urban",
|
key: "urban",
|
||||||
name: "Urban Terracotta",
|
name: "The Urban Burger QR Stand",
|
||||||
categoryName: "Burger & Fast Casual",
|
categoryName: "Özel Masa Kartı Şablonu",
|
||||||
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",
|
|
||||||
bgGradient: "radial-gradient(circle at 50% 50%, #1c3e2b 0%, #0e2016 100%)",
|
bgGradient: "radial-gradient(circle at 50% 50%, #1c3e2b 0%, #0e2016 100%)",
|
||||||
plaqueBg: "linear-gradient(135deg, #a64d2a 0%, #8e3f20 100%)",
|
plaqueBg: "linear-gradient(135deg, #a64d2a 0%, #8e3f20 100%)",
|
||||||
plaqueColor: "#a64d2a",
|
plaqueColor: "#a64d2a",
|
||||||
@@ -56,76 +38,4 @@ export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
|
|||||||
categories: ["BURGERS", "FRIES", "SHAKES", "VEGAN OPTIONS"],
|
categories: ["BURGERS", "FRIES", "SHAKES", "VEGAN OPTIONS"],
|
||||||
svgTemplateUrl: "/qr-1.svg",
|
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