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

feat(qr-stands): clean SVG template renderer with exact QR placement and no redundant overlays

Browse Source
This commit is contained in:
AyrisAI
2026-08-20 23:39:56 +03:00
parent eb0b5d1886
commit f768b92873
3 changed files with 47 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/QrStandGeneratorClient.tsx
+11 -40
View File
@@ -29,7 +29,7 @@ export function QrStandGeneratorClient({
const targetUrl = `https://menul.io/${slug}`;
const displayCategories =
categoriesList.length > 0 ? categoriesList.slice(0, 4) : activePreset.categories;
categoriesList.length > 0 ? categoriesList.slice(0, 4) : (activePreset.categories || []);
async function handleDownloadPng() {
if (!standRef.current) return;
@@ -139,7 +139,7 @@ export function QrStandGeneratorClient({
<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 }}
style={{ background: preset.plaqueBg || preset.plaqueColor || "#1A1A1E" }}
/>
<div>
<div className="text-xs font-bold">{preset.name}</div>
@@ -208,51 +208,22 @@ export function QrStandGeneratorClient({
{activePreset.svgTemplateUrl ? (
<div
ref={standRef}
className={`w-[360px] sm:w-[380px] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10 ${
activePreset.aspectRatio === "672/900" ? "aspect-[672/900]" : "aspect-[400/650]"
}`}
className="w-[360px] sm:w-[380px] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10 aspect-[400/650]"
>
{/* Exact 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 left-0 right-0 flex flex-col items-center justify-center px-6 text-center z-10 ${
activePreset.aspectRatio === "672/900" ? "top-[13%]" : "top-[15.5%]"
}`}
>
{logoUrl ? (
<img
src={logoUrl}
alt={restaurantName}
className="h-8 w-auto max-w-[120px] object-contain mb-1"
/>
) : null}
<span
className="font-black text-xl sm:text-2xl tracking-wider uppercase font-['Montserrat'] leading-tight drop-shadow-md"
style={{ color: activePreset.accentText }}
>
{restaurantName}
</span>
</div>
{/* Dynamic QR Code Canvas Overlay */}
<div
className={`absolute left-1/2 -translate-x-1/2 rounded-[20px] p-3 shadow-2xl flex items-center justify-center bg-white z-10 border border-zinc-200 ${
activePreset.aspectRatio === "672/900"
? "top-[37%] w-[52%] aspect-square"
: "top-[33.1%] w-[55%] aspect-square"
}`}
>
{/* Dynamic QR Code Canvas Overlay - Fills the QR Code Box Exactly */}
<div className="absolute top-[33.08%] left-1/2 -translate-x-1/2 w-[55%] aspect-square rounded-[20px] p-3 shadow-xl flex items-center justify-center bg-white z-10 border border-zinc-200">
<QRCodeCanvas
value={targetUrl}
size={200}
bgColor={activePreset.qrBg || "#ffffff"}
fgColor={activePreset.qrColor || "#111111"}
size={220}
bgColor="#ffffff"
fgColor="#111111"
level="H"
style={{ width: "100%", height: "100%" }}
includeMargin={false}
@@ -264,8 +235,8 @@ export function QrStandGeneratorClient({
ref={standRef}
className="w-[360px] sm:w-[380px] min-h-[660px] rounded-[2.5rem] p-7 flex flex-col items-center text-center relative shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2"
style={{
background: activePreset.plaqueBg,
borderColor: activePreset.borderAccent,
background: activePreset.plaqueBg || activePreset.plaqueColor || "#1A1A1E",
borderColor: activePreset.borderAccent || "#D4AF37",
}}
>
{/* Inner Line Accent */}