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

feat(mobile): integrate QrTemplate5 with 5.png background image and dynamic texts

Browse Source
This commit is contained in:
AyrisAI
2026-08-21 00:52:26 +03:00
parent d2846ed628
commit b72846bd91
6 changed files with 361 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/assets/templates/5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

apps/mobile/src/components/qr-templates/QrTemplate5.tsx
+188
View File
@@ -0,0 +1,188 @@
import * as React from "react";
import Svg, {
Image,
G,
Rect,
Path,
Text,
} from "react-native-svg";
import type { QrTemplateProps } from "./index";
// eslint-disable-next-line @typescript-eslint/no-require-imports
const bgImage = require("../../../assets/templates/5.png");
const QrTemplate5 = ({
qrBase64,
restaurantName = "THE URBAN FORK",
subtitle = "FRESH FLAVORS DAILY",
tableNo = "MASA NO: 01",
ctaText = "DİJİTAL MENÜYÜ GÖRÜNTÜLE",
wifiText = "WiFi: UrbanFork | Şifre: urban2026",
socialText = "@theurbanfork",
fontFamily = "System, -apple-system, Roboto, Arial, sans-serif",
showTableNo = true,
showSubtitle = true,
showCta = true,
showWifi = true,
showSocial = true,
...props
}: QrTemplateProps) => (
<Svg width={300} height={394.7} viewBox="0 0 380 500" {...props}>
{/* PNG Arka Plan */}
<Image
width={380}
height={500}
href={bgImage}
preserveAspectRatio="none"
/>
{/* QR Placeholder / Live QR */}
<G transform="translate(108 206)">
<Rect
width={164}
height={164}
fill="#fff"
stroke="#dce5ea"
strokeWidth={1.2}
rx={16}
/>
<Path
fill="none"
stroke="#003554"
strokeLinecap="round"
strokeWidth={3}
d="M6 30V12a6 6 0 0 1 6-6h18m128 24V12a6 6 0 0 0-6-6h-18M6 134v18a6 6 0 0 0 6 6h18m128-24v18a6 6 0 0 1-6 6h-18"
/>
{qrBase64 ? (
<Image
href={`data:image/png;base64,${qrBase64}`}
x={12}
y={12}
width={140}
height={140}
/>
) : (
<>
<Rect
width={140}
height={140}
x={12}
y={12}
fill="#fafcfd"
stroke="#003554"
strokeDasharray="4 3"
strokeOpacity={0.2}
rx={10}
/>
<Text
x={82}
y={87}
fill="#003554"
fontFamily="Inter, Arial, sans-serif"
fontSize={11}
fontWeight={700}
letterSpacing={1}
textAnchor="middle"
>
{"QR KOD ALANI"}
</Text>
</>
)}
</G>
{/* Metinler */}
<G fill="#003554" textAnchor="middle">
{/* Masa Numarası */}
{showTableNo && tableNo ? (
<Text
x={190}
y={40}
fill="#003554"
fontFamily={fontFamily}
fontSize={11}
fontWeight={800}
letterSpacing={1.5}
>
{tableNo}
</Text>
) : null}
{/* Restoran Başlığı */}
{restaurantName ? (
<Text
x={190}
y={86}
fill="#003554"
fontFamily={fontFamily}
fontSize={24}
fontWeight={900}
letterSpacing={1}
>
{restaurantName}
</Text>
) : null}
{/* Yönlendirme (CTA) */}
{showCta && ctaText ? (
<Text
x={190}
y={160}
fill="#003554"
fontFamily={fontFamily}
fontSize={13}
fontWeight={800}
letterSpacing={0.5}
>
{ctaText}
</Text>
) : null}
{/* Slogan */}
{showSubtitle && subtitle ? (
<Text
x={190}
y={402}
fill="#003554"
fontFamily={fontFamily}
fontSize={14}
fontWeight={900}
letterSpacing={0.8}
>
{subtitle}
</Text>
) : null}
{/* WiFi */}
{showWifi && wifiText ? (
<Text
x={190}
y={430}
fill="#003554"
fontFamily="System, -apple-system, Roboto, sans-serif"
fontSize={10}
fontWeight={700}
letterSpacing={0.2}
>
{wifiText}
</Text>
) : null}
{/* Sosyal Medya */}
{showSocial && socialText ? (
<Text
x={190}
y={454}
fill="#003554"
fontFamily="System, -apple-system, Roboto, sans-serif"
fontSize={10}
fontWeight={700}
letterSpacing={0.2}
>
{socialText}
</Text>
) : null}
</G>
</Svg>
);
export default QrTemplate5;
apps/mobile/src/components/qr-templates/index.ts
+3
View File
@@ -4,6 +4,7 @@ import QrTemplate1 from "./QrTemplateLumiere";
import QrTemplate2 from "./QrTemplate2"; import QrTemplate2 from "./QrTemplate2";
import QrTemplate3 from "./QrTemplate3"; import QrTemplate3 from "./QrTemplate3";
import QrTemplate4 from "./QrTemplate4"; import QrTemplate4 from "./QrTemplate4";
import QrTemplate5 from "./QrTemplate5";
export interface QrCustomTextConfig { export interface QrCustomTextConfig {
restaurantName?: string; restaurantName?: string;
@@ -63,6 +64,7 @@ export const COMPONENT_TEMPLATES: Record<
"qr-2": QrTemplate2, "qr-2": QrTemplate2,
"qr-3": QrTemplate3, "qr-3": QrTemplate3,
"qr-4": QrTemplate4, "qr-4": QrTemplate4,
"qr-5": QrTemplate5,
}; };
// Her template'in aspect ratio'su (width/height) // Her template'in aspect ratio'su (width/height)
@@ -71,4 +73,5 @@ export const TEMPLATE_ASPECT_RATIOS: Record<string, number> = {
"qr-2": 400 / 650, // 400x650 = standart kart "qr-2": 400 / 650, // 400x650 = standart kart
"qr-3": 400 / 650, // 400x650 = standart kart "qr-3": 400 / 650, // 400x650 = standart kart
"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
}; };
apps/mobile/svgcomponentlist/5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

apps/mobile/svgcomponentlist/5.tsx
+156
View File
@@ -0,0 +1,156 @@
import Svg, { SvgProps, Image, G, Rect, Path, Text } from "react-native-svg"
import { memo } from "react"
const SvgComponent = (props: SvgProps) => (
<Svg width={380} height={500} {...props}>
<Image
width={380}
height={500}
href="arka_plan_rengini_deg\u0306is\u0327_202608210045 1.jpg"
preserveAspectRatio="none"
/>
<G transform="translate(108 206)">
<Rect
width={164}
height={164}
fill="#fff"
stroke="#dce5ea"
strokeWidth={1.2}
rx={16}
/>
<Path
fill="none"
stroke="#003554"
strokeLinecap="round"
strokeWidth={3}
d="M6 30V12a6 6 0 0 1 6-6h18m128 24V12a6 6 0 0 0-6-6h-18M6 134v18a6 6 0 0 0 6 6h18m128-24v18a6 6 0 0 1-6 6h-18"
/>
<Rect
width={140}
height={140}
x={12}
y={12}
fill="#fafcfd"
stroke="#003554"
strokeDasharray="4 3"
strokeOpacity={0.2}
rx={10}
/>
<Text
x={82}
y={87}
fill="#003554"
fontFamily="Inter, Arial, sans-serif"
fontSize={11}
fontWeight={700}
letterSpacing={1}
textAnchor="middle"
>
{"QR KOD ALANI"}
</Text>
</G>
<G fill="#003554" textAnchor="middle">
<Text
x={190}
y={50}
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={13}
fontWeight={900}
letterSpacing={2}
>
{"THE"}
</Text>
<Text
x={190}
y={80}
fontFamily="'Arial Black', 'Impact', sans-serif"
fontSize={27}
fontWeight={900}
letterSpacing={0.5}
>
{"URBAN"}
</Text>
<Text
x={190}
y={110}
fontFamily="'Arial Black', 'Impact', sans-serif"
fontSize={27}
fontWeight={900}
letterSpacing={0.5}
>
{"FORK"}
</Text>
<Text
x={190}
y={148}
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={15.5}
fontWeight={900}
letterSpacing={0.2}
>
{"SCAN TO VIEW"}
</Text>
<Text
x={190}
y={172}
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={15.5}
fontWeight={900}
letterSpacing={0.2}
>
{"DIGITAL MENU"}
</Text>
<Text
x={190}
y={402}
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={15.5}
fontWeight={900}
letterSpacing={0.8}
>
{"FRESH FLAVORS DAILY"}
</Text>
<Text
x={190}
y={420}
fontFamily="Inter, Arial, sans-serif"
fontSize={8.5}
fontWeight={600}
letterSpacing={0.2}
>
{"Contactless ordering to scancnal bresers"}
</Text>
<Text
x={190}
y={432}
fontFamily="Inter, Arial, sans-serif"
fontSize={8.5}
fontWeight={600}
letterSpacing={0.2}
>
{"and enstand mes with your menu."}
</Text>
<Text
x={190}
y={454}
fontFamily="'Arial Black', Inter, sans-serif"
fontSize={10}
fontWeight={900}
letterSpacing={0.2}
>
{"contactless ordering"}
</Text>
<Text
x={190}
y={468}
fontFamily="'Arial Black', Inter, sans-serif"
fontSize={10}
fontWeight={900}
letterSpacing={0.2}
>
{"scan with camera"}
</Text>
</G>
</Svg>
)
const Memo = memo(SvgComponent)
export default Memo
packages/shared/src/qr-stands.ts
+14
View File
@@ -76,4 +76,18 @@ export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
subText: "#71717a", subText: "#71717a",
dividerColor: "rgba(197, 155, 75, 0.3)", dividerColor: "rgba(197, 155, 75, 0.3)",
}, },
"qr-5": {
key: "qr-5",
name: "The Urban Fork (QR-5)",
categoryName: "Özel Masa Kartı",
svgTemplateUrl: "/qr-5.svg",
aspectRatio: "380/500",
bgGradient: "radial-gradient(circle at 50% 50%, #e0f2fe 0%, #bae6fd 100%)",
plaqueColor: "#003554",
borderAccent: "#003554",
accentText: "#003554",
headerText: "#003554",
subText: "#0284c7",
dividerColor: "rgba(0, 53, 84, 0.3)",
},
}; };