diff --git a/apps/mobile/src/components/qr-templates/QrTemplate4.tsx b/apps/mobile/src/components/qr-templates/QrTemplate4.tsx new file mode 100644 index 0000000..4876a2e --- /dev/null +++ b/apps/mobile/src/components/qr-templates/QrTemplate4.tsx @@ -0,0 +1,279 @@ +import * as React from "react"; +import Svg, { + Defs, + G, + Path, + Circle, + Use, + Rect, + Text, + Image, +} from "react-native-svg"; +import type { QrTemplateProps } from "./index"; + +const QrTemplate4 = ({ + qrBase64, + restaurantName = "THE CRIMSON PETAL", + subtitle = "FINE DINING EXPERIENCE", + tableNo = "MASA NO: 01", + ctaText = "MENÜYÜ GÖRMEK İÇİN OKUTUN", + wifiText = "WiFi: CrimsonGuest | Şifre: petal2026", + socialText = "@thecrimsonpetal", + fontFamily = "Georgia, 'Times New Roman', serif", + showTableNo = true, + showSubtitle = true, + showCta = true, + showWifi = true, + showSocial = true, + ...props +}: QrTemplateProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* QR Placeholder / Live QR */} + + + {qrBase64 ? ( + + ) : ( + <> + + + {"QR KOD ALANI"} + + + )} + + + {/* Metinler */} + + {/* Masa No */} + {showTableNo && tableNo ? ( + + {tableNo} + + ) : null} + + {/* Restoran Başlığı */} + {restaurantName ? ( + + {restaurantName} + + ) : null} + + {/* Slogan */} + {showSubtitle && subtitle ? ( + + {subtitle} + + ) : null} + + {/* CTA Metni */} + {showCta && ctaText ? ( + + {ctaText} + + ) : null} + + {/* WiFi Bilgisi */} + {showWifi && wifiText ? ( + + {wifiText} + + ) : null} + + {/* Sosyal Medya */} + {showSocial && socialText ? ( + + {socialText} + + ) : null} + + +); + +export default QrTemplate4; diff --git a/apps/mobile/src/components/qr-templates/index.ts b/apps/mobile/src/components/qr-templates/index.ts index fd176e2..0a6ac47 100644 --- a/apps/mobile/src/components/qr-templates/index.ts +++ b/apps/mobile/src/components/qr-templates/index.ts @@ -3,6 +3,7 @@ import type { SvgProps } from "react-native-svg"; import QrTemplate1 from "./QrTemplateLumiere"; import QrTemplate2 from "./QrTemplate2"; import QrTemplate3 from "./QrTemplate3"; +import QrTemplate4 from "./QrTemplate4"; export interface QrCustomTextConfig { restaurantName?: string; @@ -24,12 +25,33 @@ export interface QrTemplateProps extends SvgProps, QrCustomTextConfig { qrBase64?: string; } +// Türkçe karakterleri (İ, ı, Ş, ş, Ğ, ğ, Ü, ü, Ö, ö, Ç, ç) eksiksiz destekleyen sistem fontları export const FONT_OPTIONS = [ - { id: "sans", label: "Modern Sans", fontFamily: "System, -apple-system, Arial, sans-serif" }, - { id: "serif", label: "Zarif Serif", fontFamily: "Georgia, 'Times New Roman', serif" }, - { id: "didot", label: "Lüks Didot", fontFamily: "Didot, 'Playfair Display', Georgia, serif" }, - { id: "palatino", label: "Klasik Kitap", fontFamily: "Palatino, 'Palatino Linotype', serif" }, - { id: "trebuchet", label: "Dinamik", fontFamily: "'Trebuchet MS', Helvetica, sans-serif" }, + { + id: "sans", + label: "Modern Sans (Sistem)", + fontFamily: "System, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif", + }, + { + id: "serif", + label: "Zarif Serif (Georgia)", + fontFamily: "Georgia, 'Times New Roman', serif", + }, + { + id: "times", + label: "Klasik (Times New Roman)", + fontFamily: "'Times New Roman', Times, Georgia, serif", + }, + { + id: "palatino", + label: "Lüks Palatino", + fontFamily: "Palatino, 'Palatino Linotype', Georgia, serif", + }, + { + id: "trebuchet", + label: "Dinamik (Trebuchet)", + fontFamily: "'Trebuchet MS', 'Segoe UI', Arial, sans-serif", + }, ]; // Yeni component eklemek için buraya import edip COMPONENT_TEMPLATES'e kaydet @@ -40,6 +62,7 @@ export const COMPONENT_TEMPLATES: Record< "qr-1": QrTemplate1, "qr-2": QrTemplate2, "qr-3": QrTemplate3, + "qr-4": QrTemplate4, }; // Her template'in aspect ratio'su (width/height) @@ -47,6 +70,5 @@ export const TEMPLATE_ASPECT_RATIOS: Record = { "qr-1": 1, // 600x600 = 1:1 "qr-2": 400 / 650, // 400x650 = standart kart "qr-3": 400 / 650, // 400x650 = standart kart + "qr-4": 400 / 580, // 400x580 = zarif altın çerçeve }; - - diff --git a/apps/mobile/svgcomponentlist/4.tsx b/apps/mobile/svgcomponentlist/4.tsx new file mode 100644 index 0000000..77f7f3f --- /dev/null +++ b/apps/mobile/svgcomponentlist/4.tsx @@ -0,0 +1,237 @@ +import Svg, { + SvgProps, + Defs, + G, + Path, + Circle, + Use, + Rect, + Text, +} from "react-native-svg" +import { memo } from "react" +const SvgComponent = (props: SvgProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {"QR KOD ALANI"} + + + + + {"THE"} + + + {"CRIMSON"} + + + {"PETAL"} + + + {"FINE DINING EXPERIENCE"} + + + {"SCAN FOR"} + + + {"OUR MENU"} + + + {"contactless ordering"} + + + {"scan with camera"} + + + +) +const Memo = memo(SvgComponent) +export default Memo diff --git a/packages/shared/src/qr-stands.ts b/packages/shared/src/qr-stands.ts index 9d7988b..d1a85a5 100644 --- a/packages/shared/src/qr-stands.ts +++ b/packages/shared/src/qr-stands.ts @@ -22,66 +22,9 @@ export interface QrStandPreset { export const QR_STAND_PRESETS: Record = { "qr-1": { key: "qr-1", - name: "Gourmet Bistro Stand (QR-1)", + name: "Lumière Restaurant (QR-1)", categoryName: "Özel Masa Kartı", svgTemplateUrl: "/qr-1.svg", - aspectRatio: "400/650", - bgGradient: "radial-gradient(circle at 50% 50%, #1A1A1E 0%, #0C0C0E 100%)", - plaqueColor: "#1A1A1E", - borderAccent: "#D4AF37", - accentText: "#D4AF37", - headerText: "#FFFFFF", - subText: "#8E8E93", - dividerColor: "rgba(212, 175, 55, 0.3)", - }, - - "qr-4": { - key: "qr-4", - name: "Gourmet Gold Luxury Stand (QR-4)", - categoryName: "Özel Masa Kartı", - svgTemplateUrl: "/qr-4.svg", - aspectRatio: "400/650", - bgGradient: "radial-gradient(circle at 50% 50%, #451A03 0%, #1c0a02 100%)", - plaqueColor: "#000000", - borderAccent: "#D4AF37", - accentText: "#FFD700", - headerText: "#FFFFFF", - subText: "#A1A1AA", - dividerColor: "rgba(212, 175, 55, 0.3)", - }, - "qr-5": { - key: "qr-5", - name: "L'Atelier Fine Dining Stand (QR-5)", - categoryName: "Özel Masa Kartı", - svgTemplateUrl: "/qr-5.svg", - aspectRatio: "400/650", - bgGradient: "radial-gradient(circle at 50% 50%, #171F2C 0%, #0B0E14 100%)", - plaqueColor: "#121721", - borderAccent: "#D4AF37", - accentText: "#E5C378", - headerText: "#F9F6F0", - subText: "#94A3B8", - dividerColor: "rgba(212, 175, 55, 0.3)", - }, - "qr-6": { - key: "qr-6", - name: "Vintage Parşömen Stand (QR-6)", - categoryName: "Özel Masa Kartı", - svgTemplateUrl: "/qr-6.svg", - aspectRatio: "400/650", - bgGradient: "radial-gradient(circle at 50% 50%, #252C36 0%, #1A1F28 100%)", - plaqueColor: "#252C36", - borderAccent: "#D4AF37", - accentText: "#D4AF37", - headerText: "#1A1A1A", - subText: "#6B5A3E", - dividerColor: "rgba(212, 175, 55, 0.3)", - }, - "qr-lumiere": { - key: "qr-lumiere", - name: "Lumière Restaurant (QR-L)", - categoryName: "Özel Masa Kartı", - svgTemplateUrl: "/qr-lumiere.svg", aspectRatio: "1/1", bgGradient: "radial-gradient(circle at 50% 50%, #132034 0%, #0b0d13 100%)", plaqueColor: "#132034", @@ -93,7 +36,7 @@ export const QR_STAND_PRESETS: Record = { }, "qr-2": { key: "qr-2", - name: "The Daily Grind (QR-2)", + name: "The Daily Grind Cafe (QR-2)", categoryName: "Özel Masa Kartı", svgTemplateUrl: "/qr-2.svg", aspectRatio: "400/650", @@ -119,7 +62,18 @@ export const QR_STAND_PRESETS: Record = { subText: "#5d4037", dividerColor: "rgba(185, 43, 39, 0.3)", }, + "qr-4": { + key: "qr-4", + name: "The Crimson Petal (QR-4)", + categoryName: "Özel Masa Kartı", + svgTemplateUrl: "/qr-4.svg", + aspectRatio: "400/580", + bgGradient: "radial-gradient(circle at 50% 50%, #fafafa 0%, #f0f0f0 100%)", + plaqueColor: "#fdfdfd", + borderAccent: "#c59b4b", + accentText: "#c59b4b", + headerText: "#111111", + subText: "#71717a", + dividerColor: "rgba(197, 155, 75, 0.3)", + }, }; - - -