diff --git a/apps/mobile/assets/templates/8.jpeg b/apps/mobile/assets/templates/8.jpeg new file mode 100644 index 0000000..fc41ff8 Binary files /dev/null and b/apps/mobile/assets/templates/8.jpeg differ diff --git a/apps/mobile/src/components/qr-templates/QrTemplate8.tsx b/apps/mobile/src/components/qr-templates/QrTemplate8.tsx new file mode 100644 index 0000000..1cb4834 --- /dev/null +++ b/apps/mobile/src/components/qr-templates/QrTemplate8.tsx @@ -0,0 +1,209 @@ +import * as React from "react"; +import Svg, { + G, + Path, + Circle, + Rect, + Text, + Image, +} from "react-native-svg"; +import { type QrTemplateProps, getFontFamily, renderSvgLines } from "./index"; + +// eslint-disable-next-line @typescript-eslint/no-var-requires +const template8Bg = require("../../../assets/templates/8.jpeg"); + +const QrTemplate8 = ({ + 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 Çizgiler & OR Ayracı */} + + + {"OR"} + + + + {/* Masa Numarası (En Üst) */} + {table?.visible !== false && + renderSvgLines({ + text: table?.text || "MASA NO: 01", + x: 512, + y: 70, + offsetY: table?.offsetY, + fill: "#d1a752", + fontFamily: infoFont, + fontSize: table?.fontSize ? table.fontSize * 1.8 : 22, + fontWeight: 800, + letterSpacing: 2, + })} + + {/* Restoran Başlığı / Üst Başlık */} + {rName?.visible !== false && + renderSvgLines({ + text: rName?.text || "EXPLORE OUR MENU", + x: 512, + y: 136, + offsetY: rName?.offsetY, + fill: "#fff", + fontFamily: rNameFont, + fontSize: rName?.fontSize ? rName.fontSize * 1.8 : 50, + fontWeight: 900, + letterSpacing: 2, + })} + + {/* Slogan / Alt Başlık */} + {sub?.visible !== false && + renderSvgLines({ + text: sub?.text || "THE DAILY SPECIALS", + x: 512, + y: 242, + offsetY: sub?.offsetY, + fill: "#d1a752", + fontFamily: subFont, + fontSize: sub?.fontSize ? sub.fontSize * 1.8 : 42, + fontWeight: 900, + letterSpacing: 2, + })} + + {/* CTA Metni */} + {cta?.visible !== false && + renderSvgLines({ + text: cta?.text || "SCAN TO VIEW OUR\nFULL MENU & SPECIALS", + x: 512, + y: 730, + offsetY: cta?.offsetY, + fill: "#fff", + fontFamily: ctaFont, + fontSize: cta?.fontSize ? cta.fontSize * 1.8 : 28, + fontWeight: 900, + letterSpacing: 1, + lineHeight: 38, + })} + + {/* WiFi / Sipariş Bilgisi */} + {wifi?.visible !== false && + renderSvgLines({ + text: wifi?.text || "SCAN TO ORDER & BROWSE", + x: 512, + y: 846, + offsetY: wifi?.offsetY, + fill: "#d1a752", + fontFamily: infoFont, + fontSize: wifi?.fontSize ? wifi.fontSize * 1.8 : 22, + fontWeight: 900, + letterSpacing: 1.5, + })} + + {/* Sosyal Medya */} + {social?.visible !== false && + renderSvgLines({ + text: social?.text || "@menulio.app", + x: 512, + y: 916, + offsetY: social?.offsetY, + fill: "#e5c378", + fontFamily: infoFont, + fontSize: social?.fontSize ? social.fontSize * 1.8 : 20, + fontWeight: 700, + letterSpacing: 1, + })} + + ); +}; + +export default QrTemplate8; diff --git a/apps/mobile/src/components/qr-templates/index.tsx b/apps/mobile/src/components/qr-templates/index.tsx index 65c4956..867bc15 100644 --- a/apps/mobile/src/components/qr-templates/index.tsx +++ b/apps/mobile/src/components/qr-templates/index.tsx @@ -6,8 +6,10 @@ import QrTemplate3 from "./QrTemplate3"; import QrTemplate4 from "./QrTemplate4"; import QrTemplate5 from "./QrTemplate5"; import QrTemplate6 from "./QrTemplate6"; +import QrTemplate8 from "./QrTemplate8"; export interface TextItemConfig { + text: string; fontSize?: number; fontId?: string; @@ -127,6 +129,7 @@ export const COMPONENT_TEMPLATES: Record< "qr-4": QrTemplate4, "qr-5": QrTemplate5, "qr-6": QrTemplate6, + "qr-8": QrTemplate8, }; // Her template'in aspect ratio'su (width/height) @@ -137,4 +140,6 @@ export const TEMPLATE_ASPECT_RATIOS: Record = { "qr-4": 400 / 580, // 400x580 = zarif altın çerçeve "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 }; + diff --git a/apps/mobile/svgcomponentlist/8.jpeg b/apps/mobile/svgcomponentlist/8.jpeg new file mode 100644 index 0000000..fc41ff8 Binary files /dev/null and b/apps/mobile/svgcomponentlist/8.jpeg differ diff --git a/apps/mobile/svgcomponentlist/8.tsx b/apps/mobile/svgcomponentlist/8.tsx new file mode 100644 index 0000000..a79892b --- /dev/null +++ b/apps/mobile/svgcomponentlist/8.tsx @@ -0,0 +1,158 @@ +import Svg, { + SvgProps, + Path, + Image, + G, + Rect, + Circle, + Text, +} from "react-native-svg" +import { memo } from "react" +const SvgComponent = (props: SvgProps) => ( + + + + + + + + + + + + + {"QR KOD ALANI"} + + + + {"EXPLORE OUR MENU"} + + + + {"OR"} + + + + {"THE DAILY SPECIALS"} + + + {"SCAN TO VIEW OUR"} + + + {"FULL MENU & SPECIALS"} + + + {"SCAN TO ORDER"} + + + {"& BROWSE"} + + +) +const Memo = memo(SvgComponent) +export default Memo diff --git a/packages/shared/src/qr-stands.ts b/packages/shared/src/qr-stands.ts index 2d32249..a5ae4d3 100644 --- a/packages/shared/src/qr-stands.ts +++ b/packages/shared/src/qr-stands.ts @@ -104,5 +104,20 @@ export const QR_STAND_PRESETS: Record = { subText: "#c59b58", dividerColor: "rgba(197, 155, 88, 0.3)", }, + "qr-8": { + key: "qr-8", + name: "Emerald & Gold Special (QR-8)", + categoryName: "Özel Kare Masa Kartı", + svgTemplateUrl: "/qr-8.svg", + aspectRatio: "1/1", + bgGradient: "radial-gradient(circle at 50% 50%, #0c4443 0%, #062423 100%)", + plaqueColor: "#f9f5eb", + borderAccent: "#d1a752", + accentText: "#d1a752", + headerText: "#ffffff", + subText: "#d1a752", + dividerColor: "rgba(209, 167, 82, 0.4)", + }, }; +