ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): add full text editing, show/hide switches and font family selector for QR stands

Browse Source
This commit is contained in:
AyrisAI
2026-08-21 00:36:14 +03:00
parent 932c174b5f
commit 4dbb68a73a
5 changed files with 712 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/src/app/menu/qr.tsx
+354 -1
View File
@@ -6,7 +6,9 @@ import {
Pressable,
ScrollView,
Share,
Switch,
Text,
TextInput,
View,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
@@ -17,7 +19,13 @@ import * as Print from "expo-print";
import { QR_STAND_PRESETS, type QrStandPreset } from "@menulio/shared";
import { api } from "@/lib/api";
import { getActiveRestaurant, type ActiveRestaurant } from "@/lib/active-restaurant";
import { COMPONENT_TEMPLATES, TEMPLATE_ASPECT_RATIOS } from "@/components/qr-templates";
import {
COMPONENT_TEMPLATES,
TEMPLATE_ASPECT_RATIOS,
FONT_OPTIONS,
type QrCustomTextConfig,
} from "@/components/qr-templates";
interface QrResponse {
id: string;
@@ -41,6 +49,21 @@ export default function QrScreen() {
);
const [exportingPng, setExportingPng] = useState(false);
const [exportingPdf, setExportingPdf] = useState(false);
const [showCustomizePanel, setShowCustomizePanel] = useState(false);
const [selectedFontId, setSelectedFontId] = useState<string>("didot");
const [customText, setCustomText] = useState<QrCustomTextConfig>({
restaurantName: "Gourmet Bistro",
subtitle: "RESTAURANT & BAR | MODERN CUISINE",
tableNo: "MASA NO: 01",
ctaText: "MENÜYÜ GÖRMEK İÇİN OKUTUN",
wifiText: "WiFi: Gourmet_Guest | Şifre: lezzetli01",
socialText: "@gourmetbistro",
showTableNo: true,
showSubtitle: true,
showCta: true,
showWifi: true,
showSocial: true,
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const viewShotRef = useRef<any>(null);
@@ -48,6 +71,10 @@ export default function QrScreen() {
const activePreset: QrStandPreset =
QR_STAND_PRESETS[selectedKey] || availablePresets[0] || Object.values(QR_STAND_PRESETS)[0]!;
const activeFont =
FONT_OPTIONS.find((f) => f.id === selectedFontId)?.fontFamily ||
"'Playfair Display', Georgia, serif";
// Component-based template sistemi
const TemplateComponent =
COMPONENT_TEMPLATES[selectedKey] ?? Object.values(COMPONENT_TEMPLATES)[0];
@@ -56,6 +83,7 @@ export default function QrScreen() {
const displayHeight = Math.round(displayWidth / aspectRatio);
useEffect(() => {
(async () => {
const activeRest = await getActiveRestaurant();
@@ -71,6 +99,10 @@ export default function QrScreen() {
const restDetail = await api.get<{ name?: string }>(`/restaurants/${activeRest.restaurantId}`);
if (restDetail?.name) {
setRestaurantName(restDetail.name);
setCustomText((prev) => ({
...prev,
restaurantName: restDetail.name,
}));
}
} catch {
// fallback
@@ -83,6 +115,7 @@ export default function QrScreen() {
})();
}, []);
async function handleCopy() {
if (!qr?.targetUrl) return;
await Clipboard.setStringAsync(qr.targetUrl);
@@ -322,12 +355,332 @@ export default function QrScreen() {
qrBase64={qr.pngBase64}
width={displayWidth}
height={displayHeight}
restaurantName={customText.restaurantName}
subtitle={customText.subtitle}
tableNo={customText.tableNo}
ctaText={customText.ctaText}
wifiText={customText.wifiText}
socialText={customText.socialText}
fontFamily={activeFont}
showTableNo={customText.showTableNo}
showSubtitle={customText.showSubtitle}
showCta={customText.showCta}
showWifi={customText.showWifi}
showSocial={customText.showSocial}
/>
) : null}
</View>
</ViewShot>
</View>
{/* Metin & Font Özelleştirme Kartı (Açılır/Kapanır) */}
<View
style={{
backgroundColor: "#18181B",
borderRadius: 20,
borderWidth: 1,
borderColor: "rgba(255, 255, 255, 0.08)",
padding: 16,
marginBottom: 20,
}}
>
<Pressable
onPress={() => setShowCustomizePanel(!showCustomizePanel)}
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
<View
style={{
width: 32,
height: 32,
borderRadius: 8,
backgroundColor: "rgba(212, 175, 55, 0.15)",
alignItems: "center",
justifyContent: "center",
}}
>
<Ionicons name="text-outline" size={18} color="#D4AF37" />
</View>
<View>
<Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "700" }}>
Metin ve Yazı Tipi Özelleştir
</Text>
<Text style={{ color: "#A1A1AA", fontSize: 12 }}>
İstediğiniz alanları düzenleyin veya kaldırın
</Text>
</View>
</View>
<Ionicons
name={showCustomizePanel ? "chevron-up" : "chevron-down"}
size={20}
color="#A1A1AA"
/>
</Pressable>
{showCustomizePanel && (
<View style={{ marginTop: 16, gap: 16, borderTopWidth: 1, borderTopColor: "rgba(255,255,255,0.06)", paddingTop: 16 }}>
{/* Yazı Tipi (Font) Seçici */}
<View>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700", marginBottom: 8, letterSpacing: 0.5 }}>
YAZI TİPİ (FONT)
</Text>
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
{FONT_OPTIONS.map((f) => {
const isSelected = f.id === selectedFontId;
return (
<Pressable
key={f.id}
onPress={() => setSelectedFontId(f.id)}
style={{
backgroundColor: isSelected ? "#D4AF37" : "#242429",
paddingHorizontal: 14,
paddingVertical: 8,
borderRadius: 10,
borderWidth: 1,
borderColor: isSelected ? "#D4AF37" : "rgba(255,255,255,0.08)",
}}
>
<Text
style={{
color: isSelected ? "#0C0C0E" : "#FFFFFF",
fontSize: 12,
fontWeight: isSelected ? "700" : "500",
}}
>
{f.label}
</Text>
</Pressable>
);
})}
</ScrollView>
</View>
{/* Alan 1: Restoran Başlığı */}
<View style={{ gap: 6 }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
RESTORAN BAŞLIĞI
</Text>
<TextInput
value={customText.restaurantName}
onChangeText={(t) => setCustomText((p) => ({ ...p, restaurantName: t }))}
placeholder="Restoran Adı"
placeholderTextColor="#71717A"
style={{
backgroundColor: "#121215",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.1)",
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 10,
color: "#FFFFFF",
fontSize: 14,
}}
/>
</View>
{/* Alan 2: Slogan / Alt Başlık */}
<View style={{ gap: 6 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
SLOGAN / ALT BAŞLIK
</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
<Text style={{ color: "#71717A", fontSize: 11 }}>
{customText.showSubtitle ? "Göster" : "Gizle"}
</Text>
<Switch
value={customText.showSubtitle}
onValueChange={(v) => setCustomText((p) => ({ ...p, showSubtitle: v }))}
trackColor={{ false: "#27272A", true: "#D4AF37" }}
thumbColor="#FFFFFF"
ios_backgroundColor="#27272A"
/>
</View>
</View>
{customText.showSubtitle && (
<TextInput
value={customText.subtitle}
onChangeText={(t) => setCustomText((p) => ({ ...p, subtitle: t }))}
placeholder="Slogan / Açıklama"
placeholderTextColor="#71717A"
style={{
backgroundColor: "#121215",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.1)",
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 10,
color: "#FFFFFF",
fontSize: 14,
}}
/>
)}
</View>
{/* Alan 3: Masa Numarası */}
<View style={{ gap: 6 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
MASA NUMARASI
</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
<Text style={{ color: "#71717A", fontSize: 11 }}>
{customText.showTableNo ? "Göster" : "Gizle"}
</Text>
<Switch
value={customText.showTableNo}
onValueChange={(v) => setCustomText((p) => ({ ...p, showTableNo: v }))}
trackColor={{ false: "#27272A", true: "#D4AF37" }}
thumbColor="#FFFFFF"
ios_backgroundColor="#27272A"
/>
</View>
</View>
{customText.showTableNo && (
<TextInput
value={customText.tableNo}
onChangeText={(t) => setCustomText((p) => ({ ...p, tableNo: t }))}
placeholder="Örn: MASA NO: 01"
placeholderTextColor="#71717A"
style={{
backgroundColor: "#121215",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.1)",
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 10,
color: "#FFFFFF",
fontSize: 14,
}}
/>
)}
</View>
{/* Alan 4: Yönlendirme (CTA) */}
<View style={{ gap: 6 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
YÖNLENDİRME (CTA) METNİ
</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
<Text style={{ color: "#71717A", fontSize: 11 }}>
{customText.showCta ? "Göster" : "Gizle"}
</Text>
<Switch
value={customText.showCta}
onValueChange={(v) => setCustomText((p) => ({ ...p, showCta: v }))}
trackColor={{ false: "#27272A", true: "#D4AF37" }}
thumbColor="#FFFFFF"
ios_backgroundColor="#27272A"
/>
</View>
</View>
{customText.showCta && (
<TextInput
value={customText.ctaText}
onChangeText={(t) => setCustomText((p) => ({ ...p, ctaText: t }))}
placeholder="Örn: MENÜYÜ GÖRMEK İÇİN OKUTUN"
placeholderTextColor="#71717A"
style={{
backgroundColor: "#121215",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.1)",
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 10,
color: "#FFFFFF",
fontSize: 14,
}}
/>
)}
</View>
{/* Alan 5: WiFi Bilgileri */}
<View style={{ gap: 6 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
WIFI BİLGİSİ
</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
<Text style={{ color: "#71717A", fontSize: 11 }}>
{customText.showWifi ? "Göster" : "Gizle"}
</Text>
<Switch
value={customText.showWifi}
onValueChange={(v) => setCustomText((p) => ({ ...p, showWifi: v }))}
trackColor={{ false: "#27272A", true: "#D4AF37" }}
thumbColor="#FFFFFF"
ios_backgroundColor="#27272A"
/>
</View>
</View>
{customText.showWifi && (
<TextInput
value={customText.wifiText}
onChangeText={(t) => setCustomText((p) => ({ ...p, wifiText: t }))}
placeholder="Örn: WiFi: Bistro | Şifre: 12345"
placeholderTextColor="#71717A"
style={{
backgroundColor: "#121215",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.1)",
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 10,
color: "#FFFFFF",
fontSize: 14,
}}
/>
)}
</View>
{/* Alan 6: Sosyal Medya / İletişim */}
<View style={{ gap: 6 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
SOSYAL MEDYA / İLETİŞİM
</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
<Text style={{ color: "#71717A", fontSize: 11 }}>
{customText.showSocial ? "Göster" : "Gizle"}
</Text>
<Switch
value={customText.showSocial}
onValueChange={(v) => setCustomText((p) => ({ ...p, showSocial: v }))}
trackColor={{ false: "#27272A", true: "#D4AF37" }}
thumbColor="#FFFFFF"
ios_backgroundColor="#27272A"
/>
</View>
</View>
{customText.showSocial && (
<TextInput
value={customText.socialText}
onChangeText={(t) => setCustomText((p) => ({ ...p, socialText: t }))}
placeholder="Örn: @menulio"
placeholderTextColor="#71717A"
style={{
backgroundColor: "#121215",
borderWidth: 1,
borderColor: "rgba(255,255,255,0.1)",
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 10,
color: "#FFFFFF",
fontSize: 14,
}}
/>
)}
</View>
</View>
)}
</View>
{/* Output Action Buttons */}
<View style={{ width: "100%", gap: 10 }}>
{/* PDF Download Button */}
apps/mobile/src/components/qr-templates/QrTemplate2.tsx
+103 -65
View File
@@ -1,6 +1,5 @@
import * as React from "react";
import Svg, {
SvgProps,
Path,
Rect,
Circle,
@@ -9,12 +8,24 @@ import Svg, {
Text,
Image,
} from "react-native-svg";
import type { QrTemplateProps } from "./index";
interface QrTemplate2Props extends SvgProps {
qrBase64?: string;
}
const QrTemplate2 = ({ qrBase64, ...props }: QrTemplate2Props) => (
const QrTemplate2 = ({
qrBase64,
restaurantName = "The Daily Grind",
subtitle = "COFFEE & KITCHEN",
tableNo = "MASA NO: 04",
ctaText = "MENÜYÜ GÖRMEK İÇİN OKUTUN",
wifiText = "WiFi: DailyGrind | Şifre: coffee2026",
socialText = "@dailygrind",
fontFamily = "'Playfair Display', Georgia, serif",
showTableNo = true,
showSubtitle = true,
showCta = true,
showWifi = true,
showSocial = true,
...props
}: QrTemplateProps) => (
<Svg
viewBox="0 0 400 650"
width={300}
@@ -117,7 +128,7 @@ const QrTemplate2 = ({ qrBase64, ...props }: QrTemplate2Props) => (
/>
</G>
{/* Kahve Çekirdekleri (arka plan süsü) */}
{/* Kahve Çekirdekleri */}
<G stroke="#3a2312" strokeWidth={1.2} transform="rotate(-20 1741.206 -8.75) scale(.8)">
<Ellipse fill="#cbb296" rx={9} ry={6.5} />
<Path fill="none" d="M-7 0q7 3 7 0t7 0" />
@@ -196,11 +207,12 @@ const QrTemplate2 = ({ qrBase64, ...props }: QrTemplate2Props) => (
{/* Metinler */}
<G textAnchor="middle">
{/* Üst Tag / Takı */}
<Text
x={200}
y={70}
fill="#3a2312"
fontFamily="'Playfair Display', Georgia, serif"
fontFamily={fontFamily}
fontSize={14}
fontStyle="italic"
fontWeight={700}
@@ -208,72 +220,98 @@ const QrTemplate2 = ({ qrBase64, ...props }: QrTemplate2Props) => (
>
{"THE"}
</Text>
<Text
x={200}
y={114}
fill="#2c1a0e"
fontFamily="'Playfair Display', Georgia, serif"
fontSize={34}
fontWeight={800}
letterSpacing={0.5}
>
{"The Daily Grind"}
</Text>
<Text
x={200}
y={146}
fill="#3a2312"
fontFamily="Inter, Arial, sans-serif"
fontSize={13}
fontWeight={800}
letterSpacing={3}
>
{"COFFEE & KITCHEN"}
</Text>
<Text
x={200}
y={488}
fill="#2c1a0e"
fontFamily="Inter, Arial, sans-serif"
fontSize={19}
fontWeight={900}
letterSpacing={1.5}
>
{"SCAN TO VIEW MENU"}
</Text>
<Text
x={200}
y={520}
fill="#3a2312"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={700}
letterSpacing={0.5}
>
{"DAILY GRIND CAFE | WIFI: DAILY_GRIND_GUEST"}
</Text>
<Text
x={200}
y={542}
fill="#8c6239"
fontFamily="Inter, Arial, sans-serif"
fontSize={9}
fontWeight={600}
letterSpacing={1}
>
{"\u015E\u0130FRE: coffee2026 \u2022 MASA NO: 04"}
</Text>
{/* Restoran Adı */}
{restaurantName ? (
<Text
x={200}
y={114}
fill="#2c1a0e"
fontFamily={fontFamily}
fontSize={30}
fontWeight={800}
letterSpacing={0.5}
>
{restaurantName}
</Text>
) : null}
{/* Slogan */}
{showSubtitle && subtitle ? (
<Text
x={200}
y={146}
fill="#3a2312"
fontFamily="Inter, Arial, sans-serif"
fontSize={12}
fontWeight={700}
letterSpacing={2.5}
>
{subtitle}
</Text>
) : null}
{/* CTA */}
{showCta && ctaText ? (
<Text
x={200}
y={488}
fill="#2c1a0e"
fontFamily={fontFamily}
fontSize={16}
fontWeight={800}
letterSpacing={1.2}
>
{ctaText}
</Text>
) : null}
{/* WiFi */}
{showWifi && wifiText ? (
<Text
x={200}
y={520}
fill="#3a2312"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={700}
letterSpacing={0.5}
>
{wifiText}
</Text>
) : null}
{/* Masa No & Sosyal */}
{showTableNo || showSocial ? (
<Text
x={200}
y={544}
fill="#8c6239"
fontFamily="Inter, Arial, sans-serif"
fontSize={10}
fontWeight={600}
letterSpacing={1}
>
{[
showTableNo && tableNo ? tableNo : "",
showSocial && socialText ? socialText : "",
]
.filter(Boolean)
.join(" • ")}
</Text>
) : null}
<Text
x={200}
y={611}
fill="#3a2312"
fontFamily="'Playfair Display', Georgia, serif"
fontFamily={fontFamily}
fontSize={11}
fontStyle="italic"
fontWeight={700}
letterSpacing={2}
>
{"EST. 2018"}
{"EST. 2026"}
</Text>
</G>
</Svg>
apps/mobile/src/components/qr-templates/QrTemplate3.tsx
+125 -102
View File
@@ -1,6 +1,5 @@
import * as React from "react";
import Svg, {
SvgProps,
Defs,
LinearGradient,
Stop,
@@ -11,15 +10,26 @@ import Svg, {
Ellipse,
Circle,
Text,
TSpan,
Image,
} from "react-native-svg";
import type { QrTemplateProps } from "./index";
interface QrTemplate3Props extends SvgProps {
qrBase64?: string;
}
const QrTemplate3 = ({ qrBase64, ...props }: QrTemplate3Props) => (
const QrTemplate3 = ({
qrBase64,
restaurantName = "BELLA NAPOLI",
subtitle = "AUTENTICA CUCINA ITALIANA",
tableNo = "MASA NO: 01",
ctaText = "MENÜYÜ GÖRMEK İÇİN OKUTUN",
wifiText = "WiFi: GourmetBistro | Şifre: lezzetli01",
socialText = "@gourmetbistro",
fontFamily = "'Playfair Display', Georgia, serif",
showTableNo = true,
showSubtitle = true,
showCta = true,
showWifi = true,
showSocial = true,
...props
}: QrTemplateProps) => (
<Svg
viewBox="0 0 400 650"
width={300}
@@ -78,16 +88,18 @@ const QrTemplate3 = ({ qrBase64, ...props }: QrTemplate3Props) => (
strokeWidth={0.8}
rx={15}
/>
<Rect
width={140}
height={24}
x={130}
y={34}
fill="#faf4e6"
stroke="#8c6239"
strokeWidth={1.2}
rx={12}
/>
{showTableNo && tableNo ? (
<Rect
width={140}
height={24}
x={130}
y={34}
fill="#faf4e6"
stroke="#8c6239"
strokeWidth={1.2}
rx={12}
/>
) : null}
</G>
{/* İkonlar */}
@@ -243,102 +255,113 @@ const QrTemplate3 = ({ qrBase64, ...props }: QrTemplate3Props) => (
{/* Metinler */}
<G id="layer-texts">
<Text
x={200}
y={50}
fill="#18181b"
fontFamily="Inter, Arial, sans-serif"
fontSize={11}
fontWeight={800}
letterSpacing={1.2}
textAnchor="middle"
>
{"MASA NO: 01"}
</Text>
{/* Masa No */}
{showTableNo && tableNo ? (
<Text
x={200}
y={50}
fill="#18181b"
fontFamily="Inter, Arial, sans-serif"
fontSize={11}
fontWeight={800}
letterSpacing={1.2}
textAnchor="middle"
>
{tableNo}
</Text>
) : null}
<Text
x={200}
y={96}
fill="#3e2723"
fontFamily="'Playfair Display', Georgia, serif"
fontFamily={fontFamily}
fontSize={24}
textAnchor="middle"
>
{"PIZZERIA"}
</Text>
<Text
x={200}
y={132}
fill="#18181b"
fontFamily="'Playfair Display', Georgia, serif"
fontSize={31}
fontWeight={700}
letterSpacing={1}
textAnchor="middle"
>
{"BELLA NAPOLI"}
</Text>
<Text
x={200}
y={222}
fill="#2e7d32"
fontFamily="Inter, Arial, sans-serif"
fontSize={11.5}
fontWeight={800}
letterSpacing={1.8}
textAnchor="middle"
>
{"AUTENTICA CUCINA ITALIANA"}
</Text>
<Text
x={200}
y={474}
fill="#b92b27"
fontFamily="Inter, Arial, sans-serif"
fontSize={13}
fontWeight={700}
letterSpacing={1.5}
textAnchor="middle"
>
{"MENÜYÜ GÖRMEK"}
</Text>
<Text
x={200}
y={494}
fill="#b92b27"
fontFamily="Inter, Arial, sans-serif"
fontSize={13}
fontWeight={700}
letterSpacing={1.5}
textAnchor="middle"
>
{"İÇİN OKUTUN"}
</Text>
<Text
x={200}
y={546}
fill="#3e2723"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={700}
textAnchor="middle"
>
{"WiFi: GourmetBistro | Şifre: lezzetli01"}
</Text>
<Text
x={200}
y={570}
fill="#b92b27"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={700}
letterSpacing={0.5}
textAnchor="middle"
>
{"BİZİ TAKİP EDİN | @gourmetbistro"}
</Text>
{/* Restoran Adı */}
{restaurantName ? (
<Text
x={200}
y={132}
fill="#18181b"
fontFamily={fontFamily}
fontSize={28}
fontWeight={700}
letterSpacing={1}
textAnchor="middle"
>
{restaurantName}
</Text>
) : null}
{/* Slogan */}
{showSubtitle && subtitle ? (
<Text
x={200}
y={222}
fill="#2e7d32"
fontFamily="Inter, Arial, sans-serif"
fontSize={11.5}
fontWeight={800}
letterSpacing={1.8}
textAnchor="middle"
>
{subtitle}
</Text>
) : null}
{/* CTA */}
{showCta && ctaText ? (
<Text
x={200}
y={474}
fill="#b92b27"
fontFamily={fontFamily}
fontSize={14}
fontWeight={700}
letterSpacing={1.2}
textAnchor="middle"
>
{ctaText}
</Text>
) : null}
{/* WiFi */}
{showWifi && wifiText ? (
<Text
x={200}
y={546}
fill="#3e2723"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={700}
textAnchor="middle"
>
{wifiText}
</Text>
) : null}
{/* Sosyal Medya */}
{showSocial && socialText ? (
<Text
x={200}
y={570}
fill="#b92b27"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={700}
letterSpacing={0.5}
textAnchor="middle"
>
{socialText}
</Text>
) : null}
</G>
</Svg>
);
export default QrTemplate3;
apps/mobile/src/components/qr-templates/QrTemplateLumiere.tsx
+101 -62
View File
@@ -1,6 +1,5 @@
import * as React from "react";
import Svg, {
SvgProps,
Path,
Rect,
Circle,
@@ -8,12 +7,24 @@ import Svg, {
Text,
Image,
} from "react-native-svg";
import type { QrTemplateProps } from "./index";
interface QrTemplateLumiereProps extends SvgProps {
qrBase64?: string;
}
const QrTemplate1 = ({ qrBase64, ...props }: QrTemplateLumiereProps) => (
const QrTemplateLumiere = ({
qrBase64,
restaurantName = "LUMIÈRE",
subtitle = "RESTAURANT & BAR | MODERN CUISINE",
tableNo = "MASA NO: 01",
ctaText = "MENÜYÜ GÖRMEK İÇİN OKUTUN",
wifiText = "WiFi: Lumiere_Guest | Şifre: lumiere2026",
socialText = "Rezervasyon: 0212 555 0199",
fontFamily = "'Playfair Display', Georgia, serif",
showTableNo = true,
showSubtitle = true,
showCta = true,
showWifi = true,
showSocial = true,
...props
}: QrTemplateProps) => (
<Svg
viewBox="0 0 600 600"
width={300}
@@ -78,6 +89,7 @@ const QrTemplate1 = ({ qrBase64, ...props }: QrTemplateLumiereProps) => (
d="M560 532a18 18 0 0 0-28 28"
/>
<Circle cx={548} cy={548} r={2} fill="#d4af37" />
{/* Merkez amblem */}
<G transform="translate(300 85)">
<Path
@@ -97,6 +109,7 @@ const QrTemplate1 = ({ qrBase64, ...props }: QrTemplateLumiereProps) => (
/>
<Circle cy={10} r={1.8} fill="#d4af37" />
</G>
{/* Yatay çizgi */}
<Path
stroke="#d4af37"
@@ -104,6 +117,7 @@ const QrTemplate1 = ({ qrBase64, ...props }: QrTemplateLumiereProps) => (
strokeWidth={0.8}
d="M120 198h360"
/>
{/* QR Placeholder / Gerçek QR */}
<G transform="translate(190 215)">
<Rect
@@ -149,65 +163,90 @@ const QrTemplate1 = ({ qrBase64, ...props }: QrTemplateLumiereProps) => (
</>
)}
</G>
{/* Metinler */}
<G textAnchor="middle">
<Text
x={300}
y={152}
fill="#d4af37"
fontFamily="'Playfair Display', 'Cinzel', 'Didot', Georgia, serif"
fontSize={38}
fontWeight={500}
letterSpacing={6}
>
{"LUMI\xC8RE"}
</Text>
<Text
x={300}
y={180}
fill="#e5c378"
fontFamily="Inter, Arial, sans-serif"
fontSize={11}
fontWeight={600}
letterSpacing={4}
>
{"RESTAURANT & BAR | MODERN CUISINE"}
</Text>
<Text
x={300}
y={472}
fill="#d4af37"
fontFamily="Inter, Arial, sans-serif"
fontSize={13}
fontWeight={600}
letterSpacing={3}
>
{"SCAN WITH CAMERA"}
</Text>
<Text
x={300}
y={508}
fill="#e2ddd2"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={400}
letterSpacing={1.2}
>
{"Reservations: LumiereDining.com | 240-555-0199"}
</Text>
<Text
x={300}
y={528}
fill="#c5a059"
fontFamily="Inter, Arial, sans-serif"
fontSize={9.5}
fontWeight={500}
letterSpacing={1.8}
>
{"TABLE 01 \u2022 WIFI: Lumiere_Guest"}
</Text>
{/* Restoran Adı */}
{restaurantName ? (
<Text
x={300}
y={150}
fill="#d4af37"
fontFamily={fontFamily}
fontSize={32}
fontWeight={700}
letterSpacing={4}
>
{restaurantName}
</Text>
) : null}
{/* Slogan / Alt Başlık */}
{showSubtitle && subtitle ? (
<Text
x={300}
y={180}
fill="#e5c378"
fontFamily="Inter, Arial, sans-serif"
fontSize={11}
fontWeight={600}
letterSpacing={3}
>
{subtitle}
</Text>
) : null}
{/* CTA / Yönlendirme */}
{showCta && ctaText ? (
<Text
x={300}
y={472}
fill="#d4af37"
fontFamily={fontFamily}
fontSize={13}
fontWeight={700}
letterSpacing={2}
>
{ctaText}
</Text>
) : null}
{/* Sosyal / İletişim */}
{showSocial && socialText ? (
<Text
x={300}
y={508}
fill="#e2ddd2"
fontFamily="Inter, Arial, sans-serif"
fontSize={10.5}
fontWeight={500}
letterSpacing={1}
>
{socialText}
</Text>
) : null}
{/* Masa No & WiFi */}
{showTableNo || showWifi ? (
<Text
x={300}
y={528}
fill="#c5a059"
fontFamily="Inter, Arial, sans-serif"
fontSize={10}
fontWeight={600}
letterSpacing={1}
>
{[
showTableNo && tableNo ? tableNo : "",
showWifi && wifiText ? wifiText : "",
]
.filter(Boolean)
.join(" • ")}
</Text>
) : null}
</G>
</Svg>
);
export default QrTemplate1;
export default QrTemplateLumiere;
apps/mobile/src/components/qr-templates/index.ts
+29 -4
View File
@@ -1,27 +1,52 @@
import type React from "react";
import type { SvgProps } from "react-native-svg";
import QrTemplateLumiere from "./QrTemplateLumiere";
import QrTemplate1 from "./QrTemplateLumiere";
import QrTemplate2 from "./QrTemplate2";
import QrTemplate3 from "./QrTemplate3";
export interface QrTemplateProps extends SvgProps {
export interface QrCustomTextConfig {
restaurantName?: string;
subtitle?: string;
tableNo?: string;
ctaText?: string;
wifiText?: string;
socialText?: string;
fontFamily?: string;
// Görünürlük anahtarları
showTableNo?: boolean;
showSubtitle?: boolean;
showCta?: boolean;
showWifi?: boolean;
showSocial?: boolean;
}
export interface QrTemplateProps extends SvgProps, QrCustomTextConfig {
qrBase64?: string;
}
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" },
];
// Yeni component eklemek için buraya import edip COMPONENT_TEMPLATES'e kaydet
export const COMPONENT_TEMPLATES: Record<
string,
React.FC<QrTemplateProps>
> = {
"qr-lumiere": QrTemplateLumiere,
"qr-1": QrTemplate1,
"qr-2": QrTemplate2,
"qr-3": QrTemplate3,
};
// Her template'in aspect ratio'su (width/height)
export const TEMPLATE_ASPECT_RATIOS: Record<string, number> = {
"qr-lumiere": 1, // 600x600 = 1:1
"qr-1": 1, // 600x600 = 1:1
"qr-2": 400 / 650, // 400x650 = standart kart
"qr-3": 400 / 650, // 400x650 = standart kart
};