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

feat(mobile): integrate QrTemplate8 Emerald & Gold Special with 8.jpeg background and live editing

Browse Source
This commit is contained in:
AyrisAI
2026-08-21 01:10:40 +03:00
parent b0645c0ac3
commit 102a9a744b
6 changed files with 387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/assets/templates/8.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 666 KiB

apps/mobile/src/components/qr-templates/QrTemplate8.tsx
+209
View File
@@ -0,0 +1,209 @@
import * as React from "react";
import Svg, {
G,
Path,
Circle,
Rect,
Text,
Image,
} from "react-native-svg";
import { type QrTemplateProps, getFontFamily, renderSvgLines } from "./index";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const template8Bg = require("../../../assets/templates/8.jpeg");
const QrTemplate8 = ({
qrBase64,
fields,
...props
}: QrTemplateProps) => {
const rName = fields?.restaurantName;
const sub = fields?.subtitle;
const table = fields?.tableNo;
const cta = fields?.ctaText;
const wifi = fields?.wifiText;
const social = fields?.socialText;
const rNameFont = getFontFamily(rName?.fontId, "System, -apple-system, Roboto, sans-serif");
const subFont = getFontFamily(sub?.fontId, "System, -apple-system, Roboto, sans-serif");
const ctaFont = getFontFamily(cta?.fontId, "System, -apple-system, Roboto, sans-serif");
const infoFont = getFontFamily(wifi?.fontId, "System, -apple-system, Roboto, sans-serif");
return (
<Svg width={300} height={300} viewBox="0 0 1024 1024" {...props}>
<Path fill="#0c4443" d="M0 0h1024v1024H0z" />
<Image
width={1024}
height={1024}
href={template8Bg}
preserveAspectRatio="none"
/>
{/* QR Alanı (Merkez) */}
<G transform="translate(348 305)">
<Rect
width={328}
height={336}
fill="#f9f5eb"
stroke="#d1a752"
strokeWidth={1.5}
rx={16}
/>
<Rect
width={304}
height={312}
x={12}
y={12}
fill="#faf8f2"
stroke="#0c4443"
strokeDasharray="6 4"
strokeOpacity={0.3}
strokeWidth={1.5}
rx={12}
/>
{qrBase64 ? (
<Image
href={`data:image/png;base64,${qrBase64}`}
x={18}
y={18}
width={292}
height={300}
/>
) : (
<>
<Circle cx={164} cy={148} r={28} fill="#0c4443" />
<G fill="#d1a752">
<Path d="M164 132.6c4.4 6.6 4.4 15.4 0 24.2-4.4-8.8-4.4-17.6 0-24.2" />
<Path d="M161.8 150.2c-8.8-4.4-13.2 4.4-6.6 8.8 6.6 0 8.8-6.6 6.6-8.8m4.4 0c8.8-4.4 13.2 4.4 6.6 8.8-6.6 0-8.8-6.6-6.6-8.8" />
</G>
<Text
x={164}
y={218}
fill="#0c4443"
fontFamily="System, -apple-system, Roboto, sans-serif"
fontSize={14}
fontWeight={800}
letterSpacing={2}
textAnchor="middle"
>
{"QR KOD ALANI"}
</Text>
</>
)}
</G>
{/* Üst Çizgiler & OR Ayracı */}
<Path
stroke="#d1a752"
strokeLinecap="round"
strokeWidth={2}
d="M210 188h240"
/>
<Text
x={512}
y={194}
fill="#d1a752"
fontFamily="System, -apple-system, Roboto, sans-serif"
fontSize={24}
fontWeight={900}
letterSpacing={2}
textAnchor="middle"
>
{"OR"}
</Text>
<Path
stroke="#d1a752"
strokeLinecap="round"
strokeWidth={2}
d="M574 188h240"
/>
{/* Masa Numarası (En Üst) */}
{table?.visible !== false &&
renderSvgLines({
text: table?.text || "MASA NO: 01",
x: 512,
y: 70,
offsetY: table?.offsetY,
fill: "#d1a752",
fontFamily: infoFont,
fontSize: table?.fontSize ? table.fontSize * 1.8 : 22,
fontWeight: 800,
letterSpacing: 2,
})}
{/* Restoran Başlığı / Üst Başlık */}
{rName?.visible !== false &&
renderSvgLines({
text: rName?.text || "EXPLORE OUR MENU",
x: 512,
y: 136,
offsetY: rName?.offsetY,
fill: "#fff",
fontFamily: rNameFont,
fontSize: rName?.fontSize ? rName.fontSize * 1.8 : 50,
fontWeight: 900,
letterSpacing: 2,
})}
{/* Slogan / Alt Başlık */}
{sub?.visible !== false &&
renderSvgLines({
text: sub?.text || "THE DAILY SPECIALS",
x: 512,
y: 242,
offsetY: sub?.offsetY,
fill: "#d1a752",
fontFamily: subFont,
fontSize: sub?.fontSize ? sub.fontSize * 1.8 : 42,
fontWeight: 900,
letterSpacing: 2,
})}
{/* CTA Metni */}
{cta?.visible !== false &&
renderSvgLines({
text: cta?.text || "SCAN TO VIEW OUR\nFULL MENU & SPECIALS",
x: 512,
y: 730,
offsetY: cta?.offsetY,
fill: "#fff",
fontFamily: ctaFont,
fontSize: cta?.fontSize ? cta.fontSize * 1.8 : 28,
fontWeight: 900,
letterSpacing: 1,
lineHeight: 38,
})}
{/* WiFi / Sipariş Bilgisi */}
{wifi?.visible !== false &&
renderSvgLines({
text: wifi?.text || "SCAN TO ORDER & BROWSE",
x: 512,
y: 846,
offsetY: wifi?.offsetY,
fill: "#d1a752",
fontFamily: infoFont,
fontSize: wifi?.fontSize ? wifi.fontSize * 1.8 : 22,
fontWeight: 900,
letterSpacing: 1.5,
})}
{/* Sosyal Medya */}
{social?.visible !== false &&
renderSvgLines({
text: social?.text || "@menulio.app",
x: 512,
y: 916,
offsetY: social?.offsetY,
fill: "#e5c378",
fontFamily: infoFont,
fontSize: social?.fontSize ? social.fontSize * 1.8 : 20,
fontWeight: 700,
letterSpacing: 1,
})}
</Svg>
);
};
export default QrTemplate8;
apps/mobile/src/components/qr-templates/index.tsx
+5
View File
@@ -6,8 +6,10 @@ import QrTemplate3 from "./QrTemplate3";
import QrTemplate4 from "./QrTemplate4"; import QrTemplate4 from "./QrTemplate4";
import QrTemplate5 from "./QrTemplate5"; import QrTemplate5 from "./QrTemplate5";
import QrTemplate6 from "./QrTemplate6"; import QrTemplate6 from "./QrTemplate6";
import QrTemplate8 from "./QrTemplate8";
export interface TextItemConfig { export interface TextItemConfig {
text: string; text: string;
fontSize?: number; fontSize?: number;
fontId?: string; fontId?: string;
@@ -127,6 +129,7 @@ export const COMPONENT_TEMPLATES: Record<
"qr-4": QrTemplate4, "qr-4": QrTemplate4,
"qr-5": QrTemplate5, "qr-5": QrTemplate5,
"qr-6": QrTemplate6, "qr-6": QrTemplate6,
"qr-8": QrTemplate8,
}; };
// Her template'in aspect ratio'su (width/height) // Her template'in aspect ratio'su (width/height)
@@ -137,4 +140,6 @@ export const TEMPLATE_ASPECT_RATIOS: Record<string, number> = {
"qr-4": 400 / 580, // 400x580 = zarif altın çerçeve "qr-4": 400 / 580, // 400x580 = zarif altın çerçeve
"qr-5": 380 / 500, // 380x500 = PNG arka planlı modern kart "qr-5": 380 / 500, // 380x500 = PNG arka planlı modern kart
"qr-6": 400 / 580, // 400x580 = taş & ızgara vintage stant "qr-6": 400 / 580, // 400x580 = taş & ızgara vintage stant
"qr-8": 1, // 1024x1024 = 1:1 Emerald Gold Özel Tasarım
}; };
apps/mobile/svgcomponentlist/8.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 666 KiB

apps/mobile/svgcomponentlist/8.tsx
+158
View File
@@ -0,0 +1,158 @@
import Svg, {
SvgProps,
Path,
Image,
G,
Rect,
Circle,
Text,
} from "react-native-svg"
import { memo } from "react"
const SvgComponent = (props: SvgProps) => (
<Svg width={1024} height={1024} {...props}>
<Path fill="#0c4443" d="M0 0h1024v1024H0z" />
<Image
width={1024}
height={1024}
href="8.jpeg"
preserveAspectRatio="none"
/>
<G transform="translate(348 305)">
<Rect
width={328}
height={336}
fill="#f9f5eb"
stroke="#d1a752"
strokeWidth={1.5}
rx={16}
/>
<Rect
width={304}
height={312}
x={12}
y={12}
fill="#faf8f2"
stroke="#0c4443"
strokeDasharray="6 4"
strokeOpacity={0.3}
strokeWidth={1.5}
rx={12}
/>
<Circle cx={164} cy={148} r={28} fill="#0c4443" />
<G fill="#d1a752">
<Path d="M164 132.6c4.4 6.6 4.4 15.4 0 24.2-4.4-8.8-4.4-17.6 0-24.2" />
<Path d="M161.8 150.2c-8.8-4.4-13.2 4.4-6.6 8.8 6.6 0 8.8-6.6 6.6-8.8m4.4 0c8.8-4.4 13.2 4.4 6.6 8.8-6.6 0-8.8-6.6-6.6-8.8" />
</G>
<Text
x={164}
y={218}
fill="#0c4443"
fontFamily="Inter, Arial, sans-serif"
fontSize={14}
fontWeight={800}
letterSpacing={2}
textAnchor="middle"
>
{"QR KOD ALANI"}
</Text>
</G>
<Text
x={512}
y={142}
fill="#fff"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={52}
fontWeight={900}
letterSpacing={2}
textAnchor="middle"
>
{"EXPLORE OUR MENU"}
</Text>
<Path
stroke="#d1a752"
strokeLinecap="round"
strokeWidth={2}
d="M210 188h240"
/>
<Text
x={512}
y={194}
fill="#d1a752"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={24}
fontWeight={900}
letterSpacing={2}
textAnchor="middle"
>
{"OR"}
</Text>
<Path
stroke="#d1a752"
strokeLinecap="round"
strokeWidth={2}
d="M574 188h240"
/>
<Text
x={512}
y={242}
fill="#d1a752"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={44}
fontWeight={900}
letterSpacing={2}
textAnchor="middle"
>
{"THE DAILY SPECIALS"}
</Text>
<Text
x={512}
y={738}
fill="#fff"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={28}
fontWeight={900}
letterSpacing={1}
textAnchor="middle"
>
{"SCAN TO VIEW OUR"}
</Text>
<Text
x={512}
y={776}
fill="#fff"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={28}
fontWeight={900}
letterSpacing={1}
textAnchor="middle"
>
{"FULL MENU & SPECIALS"}
</Text>
<Text
x={512}
y={842}
fill="#d1a752"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={21}
fontWeight={900}
letterSpacing={1.5}
textAnchor="middle"
>
{"SCAN TO ORDER"}
</Text>
<Text
x={512}
y={872}
fill="#d1a752"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={21}
fontWeight={900}
letterSpacing={1.5}
textAnchor="middle"
>
{"& BROWSE"}
</Text>
</Svg>
)
const Memo = memo(SvgComponent)
export default Memo
packages/shared/src/qr-stands.ts
+15
View File
@@ -104,5 +104,20 @@ export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
subText: "#c59b58", subText: "#c59b58",
dividerColor: "rgba(197, 155, 88, 0.3)", dividerColor: "rgba(197, 155, 88, 0.3)",
}, },
"qr-8": {
key: "qr-8",
name: "Emerald & Gold Special (QR-8)",
categoryName: "Özel Kare Masa Kartı",
svgTemplateUrl: "/qr-8.svg",
aspectRatio: "1/1",
bgGradient: "radial-gradient(circle at 50% 50%, #0c4443 0%, #062423 100%)",
plaqueColor: "#f9f5eb",
borderAccent: "#d1a752",
accentText: "#d1a752",
headerText: "#ffffff",
subText: "#d1a752",
dividerColor: "rgba(209, 167, 82, 0.4)",
},
}; };