feat(mobile): integrate QrTemplate5 with 5.png background image and dynamic texts
This commit is contained in:
AyrisAI
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
@@ -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;
|
||||
@@ -4,6 +4,7 @@ import QrTemplate1 from "./QrTemplateLumiere";
|
||||
import QrTemplate2 from "./QrTemplate2";
|
||||
import QrTemplate3 from "./QrTemplate3";
|
||||
import QrTemplate4 from "./QrTemplate4";
|
||||
import QrTemplate5 from "./QrTemplate5";
|
||||
|
||||
export interface QrCustomTextConfig {
|
||||
restaurantName?: string;
|
||||
@@ -63,6 +64,7 @@ export const COMPONENT_TEMPLATES: Record<
|
||||
"qr-2": QrTemplate2,
|
||||
"qr-3": QrTemplate3,
|
||||
"qr-4": QrTemplate4,
|
||||
"qr-5": QrTemplate5,
|
||||
};
|
||||
|
||||
// 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-3": 400 / 650, // 400x650 = standart kart
|
||||
"qr-4": 400 / 580, // 400x580 = zarif altın çerçeve
|
||||
"qr-5": 380 / 500, // 380x500 = PNG arka planlı modern kart
|
||||
};
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
@@ -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
|
||||
@@ -76,4 +76,18 @@ export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
|
||||
subText: "#71717a",
|
||||
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)",
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user