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">
|
||||
|
||||
Reference in New Issue
Block a user