feat(mobile): add QrTemplate6 Stonehearth Grill, modal text editor and vertical positioning (offsetY) controls
This commit is contained in:
AyrisAI
@@ -0,0 +1,260 @@
|
||||
import * as React from "react";
|
||||
import Svg, {
|
||||
Defs,
|
||||
G,
|
||||
Path,
|
||||
Circle,
|
||||
Rect,
|
||||
Use,
|
||||
Text,
|
||||
Image,
|
||||
} from "react-native-svg";
|
||||
import { type QrTemplateProps, getFontFamily, renderSvgLines } from "./index";
|
||||
|
||||
const QrTemplate6 = ({
|
||||
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, "Georgia, 'Times New Roman', serif");
|
||||
const subFont = getFontFamily(sub?.fontId, "System, -apple-system, Roboto, sans-serif");
|
||||
const ctaFont = getFontFamily(cta?.fontId, "Georgia, 'Times New Roman', serif");
|
||||
const infoFont = getFontFamily(wifi?.fontId, "System, -apple-system, Roboto, sans-serif");
|
||||
|
||||
return (
|
||||
<Svg width={300} height={435} viewBox="0 0 400 580" {...props}>
|
||||
<Defs>
|
||||
<G id="b6">
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#c59b58"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={1.2}
|
||||
d="M0 0c10 25 12 55 5 85"
|
||||
/>
|
||||
<Path
|
||||
fill="#f4efe6"
|
||||
stroke="#c59b58"
|
||||
strokeWidth={1.1}
|
||||
d="M3 15c-11-5-15 9-1 9 4 0 4-6 1-9Z"
|
||||
/>
|
||||
<Path
|
||||
fill="#f4efe6"
|
||||
stroke="#9e4d28"
|
||||
strokeWidth={1.1}
|
||||
d="M5 22c11-6 17 6 3 10-4 0-4-6-3-10Zm2 20c-12-6-17 8-3 10 4 0 4-6 3-10Z"
|
||||
/>
|
||||
<Path
|
||||
fill="#f4efe6"
|
||||
stroke="#c59b58"
|
||||
strokeWidth={1.1}
|
||||
d="M8 50c12-6 16 8 2 12-4 0-4-7-2-12ZM6 70c-10-5-14 8-2 10 3 0 4-6 2-10Z"
|
||||
/>
|
||||
<Path
|
||||
fill="#f4efe6"
|
||||
stroke="#9e4d28"
|
||||
strokeWidth={1.1}
|
||||
d="M5 78c11-4 15 8 3 12-4 0-4-6-3-12Z"
|
||||
/>
|
||||
<Circle cx={-10} cy={18} r={1.5} fill="#c59b58" />
|
||||
<Circle cx={18} cy={46} r={1.5} fill="#9e4d28" />
|
||||
</G>
|
||||
<G id="a6">
|
||||
<Path
|
||||
fill="#a64423"
|
||||
d="M0-18C4-12 8-6 8 0c6-4 8 6 4 12 4-2 6 4 2 8S2 26 0 26s-10-2-14-6-2-10 2-8c-4-6-2-16 4-12 0-6 4-12 8-18"
|
||||
/>
|
||||
<Path
|
||||
fill="#f4efe6"
|
||||
d="M-4 4v8c0 3 2 4 4 4v8c2-8 4-9 4-12V4H3v7c0 2-1.5 3-3 3s-3-1-3-3V4Z"
|
||||
/>
|
||||
<Path stroke="#f4efe6" d="M0 4v8" />
|
||||
</G>
|
||||
</Defs>
|
||||
<Path fill="#434b54" d="M0 0h400v580H0z" />
|
||||
<Rect
|
||||
width={360}
|
||||
height={548}
|
||||
x={20}
|
||||
y={16}
|
||||
fill="#f6efe3"
|
||||
stroke="#122a42"
|
||||
strokeWidth={1.5}
|
||||
rx={16}
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#122a42"
|
||||
strokeWidth={1.2}
|
||||
d="M46 32h308a12 12 0 0 1 12 12v492a12 12 0 0 1-12 12H46a12 12 0 0 1-12-12V44a12 12 0 0 1 12-12Z"
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#122a42"
|
||||
strokeWidth={1.2}
|
||||
d="M34 46a12 12 0 0 0 12-12m320 12a12 12 0 0 1-12-12M34 534a12 12 0 0 1 12 12m320-12a12 12 0 0 0-12 12"
|
||||
/>
|
||||
<Path stroke="#c59b58" d="M34 135h332M34 500h332" />
|
||||
<Use href="#a6" transform="matrix(.85 0 0 .85 200 52)" />
|
||||
<Use href="#b6" transform="matrix(.8 0 0 .8 42 42)" />
|
||||
<Use href="#b6" transform="matrix(-.8 0 0 .8 358 42)" />
|
||||
<Use href="#b6" transform="matrix(.95 0 0 .95 40 185)" />
|
||||
<Use href="#b6" transform="matrix(-.95 0 0 .95 360 185)" />
|
||||
<Use href="#a6" transform="matrix(.65 0 0 .65 68 320)" />
|
||||
<Use href="#a6" transform="matrix(.65 0 0 .65 332 320)" />
|
||||
<Use href="#b6" transform="matrix(.95 0 0 .95 40 360)" />
|
||||
<Use href="#b6" transform="matrix(-.95 0 0 .95 360 360)" />
|
||||
|
||||
{/* QR Placeholder / Gerçek QR */}
|
||||
<G transform="translate(95 205)">
|
||||
<Path
|
||||
fill="#fdfbf7"
|
||||
stroke="#122a42"
|
||||
strokeWidth={3}
|
||||
d="M0 0h210v210H0z"
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#c59b58"
|
||||
strokeWidth={1.5}
|
||||
d="M4 4h202v202H4z"
|
||||
/>
|
||||
{qrBase64 ? (
|
||||
<Image
|
||||
href={`data:image/png;base64,${qrBase64}`}
|
||||
x={10}
|
||||
y={10}
|
||||
width={190}
|
||||
height={190}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Path
|
||||
fill="#faf8f5"
|
||||
stroke="#122a42"
|
||||
strokeDasharray="4 3"
|
||||
d="M12 12h186v186H12z"
|
||||
/>
|
||||
<Circle
|
||||
cx={105}
|
||||
cy={95}
|
||||
r={16}
|
||||
fill="#f6efe3"
|
||||
stroke="#c59b58"
|
||||
strokeWidth={1.2}
|
||||
/>
|
||||
<Use href="#a6" transform="matrix(.45 0 0 .45 105 93)" />
|
||||
<Text
|
||||
x={105}
|
||||
y={128}
|
||||
fill="#122a42"
|
||||
fontFamily="System, sans-serif"
|
||||
fontSize={11}
|
||||
fontWeight="bold"
|
||||
letterSpacing={1.5}
|
||||
textAnchor="middle"
|
||||
>
|
||||
{"QR KOD ALANI"}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</G>
|
||||
|
||||
{/* Metinler */}
|
||||
<G textAnchor="middle">
|
||||
{/* Masa Numarası */}
|
||||
{table?.visible !== false &&
|
||||
renderSvgLines({
|
||||
text: table?.text || "MASA NO: 01",
|
||||
x: 200,
|
||||
y: 36,
|
||||
offsetY: table?.offsetY,
|
||||
fill: "#122a42",
|
||||
fontFamily: infoFont,
|
||||
fontSize: table?.fontSize || 10,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 1.5,
|
||||
})}
|
||||
|
||||
{/* Restoran Başlığı */}
|
||||
{rName?.visible !== false &&
|
||||
renderSvgLines({
|
||||
text: rName?.text || "THE STONEHEARTH GRILL",
|
||||
x: 200,
|
||||
y: 84,
|
||||
offsetY: rName?.offsetY,
|
||||
fill: "#a64423",
|
||||
fontFamily: rNameFont,
|
||||
fontSize: rName?.fontSize || 19,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 1.5,
|
||||
})}
|
||||
|
||||
{/* Slogan */}
|
||||
{sub?.visible !== false &&
|
||||
renderSvgLines({
|
||||
text: sub?.text || "SCAN. ORDER. ENJOY.",
|
||||
x: 200,
|
||||
y: 118,
|
||||
offsetY: sub?.offsetY,
|
||||
fill: "#122a42",
|
||||
fontFamily: subFont,
|
||||
fontSize: sub?.fontSize || 10,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 2,
|
||||
})}
|
||||
|
||||
{/* CTA */}
|
||||
{cta?.visible !== false &&
|
||||
renderSvgLines({
|
||||
text: cta?.text || "VIEW OUR MENU & ORDER ONLINE",
|
||||
x: 200,
|
||||
y: 160,
|
||||
offsetY: cta?.offsetY,
|
||||
fill: "#122a42",
|
||||
fontFamily: ctaFont,
|
||||
fontSize: cta?.fontSize || 13,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 0.5,
|
||||
})}
|
||||
|
||||
{/* WiFi */}
|
||||
{wifi?.visible !== false &&
|
||||
renderSvgLines({
|
||||
text: wifi?.text || "FREE WIFI: StonehearthGuest | PW: Grill720",
|
||||
x: 200,
|
||||
y: 524,
|
||||
offsetY: wifi?.offsetY,
|
||||
fill: "#222",
|
||||
fontFamily: infoFont,
|
||||
fontSize: wifi?.fontSize || 9,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 0.2,
|
||||
})}
|
||||
|
||||
{/* Sosyal Medya */}
|
||||
{social?.visible !== false &&
|
||||
renderSvgLines({
|
||||
text: social?.text || "Follow Us @StonehearthGrill",
|
||||
x: 200,
|
||||
y: 540,
|
||||
offsetY: social?.offsetY,
|
||||
fill: "#222",
|
||||
fontFamily: infoFont,
|
||||
fontSize: social?.fontSize || 9,
|
||||
fontWeight: "bold",
|
||||
letterSpacing: 0.2,
|
||||
})}
|
||||
</G>
|
||||
</Svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default QrTemplate6;
|
||||
Reference in New Issue
Block a user