diff --git a/apps/mobile/assets/templates/9.jpeg b/apps/mobile/assets/templates/9.jpeg new file mode 100644 index 0000000..179e91a Binary files /dev/null and b/apps/mobile/assets/templates/9.jpeg differ diff --git a/apps/mobile/src/components/qr-templates/QrTemplate9.tsx b/apps/mobile/src/components/qr-templates/QrTemplate9.tsx new file mode 100644 index 0000000..42ae81d --- /dev/null +++ b/apps/mobile/src/components/qr-templates/QrTemplate9.tsx @@ -0,0 +1,278 @@ +import * as React from "react"; +import Svg, { + Defs, + G, + Path, + Circle, + Rect, + Text, + TextPath, + Image, +} from "react-native-svg"; +import { type QrTemplateProps, getFontFamily, renderSvgLines } from "./index"; + +// eslint-disable-next-line @typescript-eslint/no-var-requires +const template9Bg = require("../../../assets/templates/9.jpeg"); + +const QrTemplate9 = ({ + 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 ( + + + + + + + + + {/* QR Alanı (Merkez) */} + + + + + {qrBase64 ? ( + + ) : ( + <> + + + + {"QR KOD ALANI"} + + + )} + + + {/* Üst Amblem & Rozet */} + + + + + + + + {/* Masa Numarası / Rozet Metni */} + {table?.visible !== false && + renderSvgLines({ + text: table?.text || "TABLE MENU\nEST. 2026", + x: 290, + y: 164, + offsetY: table?.offsetY, + fill: "#1e3246", + fontFamily: infoFont, + fontSize: table?.fontSize ? table.fontSize * 1.3 : 15, + fontWeight: 900, + letterSpacing: 1, + lineHeight: 18, + })} + + {/* Sol / Sağ Yönelticiler (SIAT / VIEW) */} + + {"SCAN"} + + + {"VIEW"} + + + {/* Kavisli Üst Yazı */} + {sub?.visible !== false && ( + + + {sub?.text || "DIGITAL MENU"} + + + )} + + {/* Restoran Başlığı / Ana Başlık */} + {rName?.visible !== false && + renderSvgLines({ + text: rName?.text || "OUR MENU", + x: 512, + y: 326, + offsetY: rName?.offsetY, + fill: "#1e3246", + fontFamily: rNameFont, + fontSize: rName?.fontSize ? rName.fontSize * 2.4 : 76, + fontWeight: 900, + letterSpacing: 3, + })} + + {/* Yönlendirici Oklar */} + + + + + + + + + + {/* CTA Metni */} + {cta?.visible !== false && + renderSvgLines({ + text: cta?.text || "VIEW OUR\nDELICIOUS MENU", + x: 512, + y: 752, + offsetY: cta?.offsetY, + fill: "#1e3246", + fontFamily: ctaFont, + fontSize: cta?.fontSize ? cta.fontSize * 1.6 : 20, + fontWeight: 900, + letterSpacing: 1, + lineHeight: 28, + })} + + {/* Alt Bilgi / Karşılama & WiFi */} + {wifi?.visible !== false && + renderSvgLines({ + text: wifi?.text || "WELCOME TO OUR TABLE", + x: 500, + y: 894, + offsetY: wifi?.offsetY, + fill: "#1e3246", + fontFamily: infoFont, + fontSize: wifi?.fontSize ? wifi.fontSize * 1.5 : 18, + fontWeight: 900, + letterSpacing: 1.5, + })} + + {/* Sosyal Medya */} + {social?.visible !== false && + renderSvgLines({ + text: social?.text || "@menulio.table", + x: 500, + y: 934, + offsetY: social?.offsetY, + fill: "#a88b58", + fontFamily: infoFont, + fontSize: social?.fontSize ? social.fontSize * 1.5 : 16, + fontWeight: 700, + letterSpacing: 1, + })} + + ); +}; + +export default QrTemplate9; diff --git a/apps/mobile/src/components/qr-templates/index.tsx b/apps/mobile/src/components/qr-templates/index.tsx index 867bc15..07cd9af 100644 --- a/apps/mobile/src/components/qr-templates/index.tsx +++ b/apps/mobile/src/components/qr-templates/index.tsx @@ -7,9 +7,9 @@ import QrTemplate4 from "./QrTemplate4"; import QrTemplate5 from "./QrTemplate5"; import QrTemplate6 from "./QrTemplate6"; import QrTemplate8 from "./QrTemplate8"; +import QrTemplate9 from "./QrTemplate9"; export interface TextItemConfig { - text: string; fontSize?: number; fontId?: string; @@ -130,6 +130,7 @@ export const COMPONENT_TEMPLATES: Record< "qr-5": QrTemplate5, "qr-6": QrTemplate6, "qr-8": QrTemplate8, + "qr-9": QrTemplate9, }; // Her template'in aspect ratio'su (width/height) @@ -141,5 +142,7 @@ export const TEMPLATE_ASPECT_RATIOS: Record = { "qr-5": 380 / 500, // 380x500 = PNG arka planlı modern kart "qr-6": 400 / 580, // 400x580 = taş & ızgara vintage stant "qr-8": 1, // 1024x1024 = 1:1 Emerald Gold Özel Tasarım + "qr-9": 1, // 1024x1024 = 1:1 Vintage Table Menu Özel Tasarım }; + diff --git a/apps/mobile/svgcomponentlist/9.jpeg b/apps/mobile/svgcomponentlist/9.jpeg new file mode 100644 index 0000000..179e91a Binary files /dev/null and b/apps/mobile/svgcomponentlist/9.jpeg differ diff --git a/apps/mobile/svgcomponentlist/9.tsx b/apps/mobile/svgcomponentlist/9.tsx new file mode 100644 index 0000000..e6919e0 --- /dev/null +++ b/apps/mobile/svgcomponentlist/9.tsx @@ -0,0 +1,231 @@ +import Svg, { + SvgProps, + Defs, + Path, + Image, + G, + Rect, + Circle, + Text, + TextPath, +} from "react-native-svg" +import { memo } from "react" +const SvgComponent = (props: SvgProps) => ( + + + + + + + + + + + + + {"QR KOD ALANI"} + + + + + + + + + + + + + + + + + + {"TABLE MENU"} + + + {"EST. 2023"} + + + {"SIAT"} + + + + {"\n SCAN TO\n "} + + + + {"VIEW"} + + + {"OUR MENU"} + + + {"VIEW OUR"} + + + {"DELICIOUS MENU"} + + + {"WELCOME TO OUR TABLE"} + + +) +const Memo = memo(SvgComponent) +export default Memo diff --git a/packages/shared/src/qr-stands.ts b/packages/shared/src/qr-stands.ts index a5ae4d3..cbdec9f 100644 --- a/packages/shared/src/qr-stands.ts +++ b/packages/shared/src/qr-stands.ts @@ -118,6 +118,21 @@ export const QR_STAND_PRESETS: Record = { subText: "#d1a752", dividerColor: "rgba(209, 167, 82, 0.4)", }, + "qr-9": { + key: "qr-9", + name: "Vintage Table Menu (QR-9)", + categoryName: "Özel Kare Masa Kartı", + svgTemplateUrl: "/qr-9.svg", + aspectRatio: "1/1", + bgGradient: "radial-gradient(circle at 50% 50%, #f8f6f0 0%, #e2ded5 100%)", + plaqueColor: "#ffffff", + borderAccent: "#d5cebe", + accentText: "#1e3246", + headerText: "#1e3246", + subText: "#a88b58", + dividerColor: "rgba(30, 50, 70, 0.2)", + }, }; +