264 lines
7.6 KiB
TypeScript
264 lines
7.6 KiB
TypeScript
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 "./common";
|
||
|
||
const QrTemplate6 = ({
|
||
qrBase64,
|
||
fields,
|
||
hideQr,
|
||
...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 */}
|
||
{!hideQr && (
|
||
<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;
|