ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(qr-stands): set qr-4 as exclusive vector stand template

Browse Source
This commit is contained in:
AyrisAI
2026-08-20 23:25:19 +03:00
parent 4ce6505a4d
commit a0cb04b2c6
15 changed files with 243 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/QrStandGeneratorClient.tsx
+11 -38
View File
@@ -20,12 +20,12 @@ export function QrStandGeneratorClient({
slug = "kebapci-sinan-3",
categoriesList = [],
}: QrStandGeneratorClientProps) {
const [selectedKey, setSelectedKey] = useState<string>("urban");
const [selectedKey, setSelectedKey] = useState<string>("qr-4");
const [downloadingPng, setDownloadingPng] = useState(false);
const [downloadingPdf, setDownloadingPdf] = useState(false);
const standRef = useRef<HTMLDivElement>(null);
const activePreset: QrStandPreset = (QR_STAND_PRESETS[selectedKey] || QR_STAND_PRESETS.urban)!;
const activePreset: QrStandPreset = (QR_STAND_PRESETS[selectedKey] || Object.values(QR_STAND_PRESETS)[0])!;
const targetUrl = `https://menul.io/${slug}`;
const displayCategories =
@@ -208,70 +208,43 @@ export function QrStandGeneratorClient({
{activePreset.svgTemplateUrl ? (
<div
ref={standRef}
className="w-[360px] sm:w-[380px] aspect-[672/900] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10"
className="w-[360px] sm:w-[380px] aspect-[400/650] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10"
>
{/* SVG Template Vector Background Graphic */}
<img
src={activePreset.svgTemplateUrl}
alt={activePreset.name}
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
className="absolute inset-0 w-full h-full object-contain pointer-events-none"
/>
{/* Dynamic Restaurant Logo & Name Header Overlay */}
<div className="absolute top-[13%] left-0 right-0 flex flex-col items-center justify-center px-6 text-center z-10">
<div className="absolute top-[15.5%] left-0 right-0 flex flex-col items-center justify-center px-6 text-center z-10">
{logoUrl ? (
<img
src={logoUrl}
alt={restaurantName}
className="h-9 w-auto max-w-[130px] object-contain mb-1"
className="h-8 w-auto max-w-[120px] object-contain mb-1"
/>
) : null}
<span
className="font-black text-lg sm:text-xl tracking-wider uppercase font-['Montserrat'] leading-tight drop-shadow-md"
style={{ color: activePreset.accentText }}
className="font-black text-xl sm:text-2xl tracking-wider uppercase font-['Montserrat'] leading-tight drop-shadow-md bg-clip-text text-transparent bg-gradient-to-r from-[#D4AF37] to-[#FFD700]"
>
{restaurantName}
</span>
</div>
{/* Dynamic QR Code Canvas Overlay */}
<div className="absolute top-[37%] left-1/2 -translate-x-1/2 w-[52%] aspect-square rounded-2xl p-2.5 shadow-2xl flex items-center justify-center bg-[#f8f3eb] z-10 border border-black/10">
<div className="absolute top-[33.1%] left-1/2 -translate-x-1/2 w-[55%] aspect-square rounded-[20px] p-3 shadow-2xl flex items-center justify-center bg-white z-10 border border-zinc-200">
<QRCodeCanvas
value={targetUrl}
size={170}
bgColor={activePreset.qrBg || "#f8f3eb"}
fgColor={activePreset.qrColor || "#a64d2a"}
size={200}
bgColor={activePreset.qrBg || "#ffffff"}
fgColor={activePreset.qrColor || "#111111"}
level="H"
style={{ width: "100%", height: "100%" }}
includeMargin={false}
/>
</div>
{/* Dynamic Categories Overlay */}
<div className="absolute bottom-[8%] left-0 right-0 flex flex-col items-center justify-center px-6 text-center z-10">
<p
className="text-[11px] sm:text-xs tracking-wide mb-2 font-semibold"
style={{ color: activePreset.subText }}
>
Telefonunuzun kamerasını doğrultun
</p>
<div
className="flex flex-col gap-1 max-w-[200px] w-full font-['Montserrat'] font-extrabold uppercase tracking-widest text-xs sm:text-sm"
style={{ color: activePreset.headerText }}
>
{displayCategories.map((cat, idx) => (
<div key={idx} className="w-full">
<div className="py-0.5">{cat}</div>
{idx < displayCategories.length - 1 && (
<div
className="w-full h-[1px] my-0.5"
style={{ backgroundColor: activePreset.dividerColor }}
/>
)}
</div>
))}
</div>
</div>
</div>
) : (
<div