feat(mobile): add QrTemplate3 Pizzeria, fix PDF export for component system
This commit is contained in:
AyrisAI
@@ -0,0 +1,416 @@
|
||||
import * as React from "react"
|
||||
import Svg, {
|
||||
SvgProps,
|
||||
Defs,
|
||||
LinearGradient,
|
||||
Stop,
|
||||
Pattern,
|
||||
Path,
|
||||
G,
|
||||
Rect,
|
||||
Ellipse,
|
||||
Circle,
|
||||
Text,
|
||||
TSpan,
|
||||
} from "react-native-svg"
|
||||
/* SVGR has dropped some elements not supported by react-native-svg: style */
|
||||
const SvgComponent = (props: SvgProps) => (
|
||||
<Svg width={400} height={650} {...props}>
|
||||
<Defs>
|
||||
<LinearGradient id="card-grad" x1="0%" x2="0%" y1="0%" y2="100%">
|
||||
<Stop offset="0%" stopColor="#fdfbf5" />
|
||||
<Stop offset="50%" stopColor="#faf4e6" />
|
||||
<Stop offset="100%" stopColor="#f7eed8" />
|
||||
</LinearGradient>
|
||||
<LinearGradient id="oven-fire" x1="0%" x2="0%" y1="100%" y2="0%">
|
||||
<Stop offset="0%" stopColor="#c0392b" />
|
||||
<Stop offset="50%" stopColor="#e67e22" />
|
||||
<Stop offset="100%" stopColor="#f1c40f" />
|
||||
</LinearGradient>
|
||||
<LinearGradient id="wine-grad" x1="0%" x2="0%" y1="0%" y2="100%">
|
||||
<Stop offset="0%" stopColor="#7b1123" />
|
||||
<Stop offset="100%" stopColor="#4a0512" />
|
||||
</LinearGradient>
|
||||
<Pattern
|
||||
id="checkered-border"
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<Path fill="#b92b27" d="M0 0h20v20H0z" />
|
||||
<Path fill="#fdf8ee" d="M0 0h10v10H0zm10 10h10v10H10z" />
|
||||
</Pattern>
|
||||
</Defs>
|
||||
<Path
|
||||
id="layer-background"
|
||||
fill="url(#checkered-border)"
|
||||
d="M0 0h400v650H0z"
|
||||
/>
|
||||
<G id="layer-card">
|
||||
<Rect
|
||||
width={356}
|
||||
height={606}
|
||||
x={22}
|
||||
y={22}
|
||||
fill="url(#card-grad)"
|
||||
stroke="#b92b27"
|
||||
strokeWidth={2}
|
||||
rx={20}
|
||||
/>
|
||||
<Rect
|
||||
width={344}
|
||||
height={594}
|
||||
x={28}
|
||||
y={28}
|
||||
fill="none"
|
||||
stroke="#8c6239"
|
||||
strokeOpacity={0.5}
|
||||
strokeWidth={0.8}
|
||||
rx={15}
|
||||
/>
|
||||
<Rect
|
||||
width={140}
|
||||
height={24}
|
||||
x={130}
|
||||
y={34}
|
||||
fill="#faf4e6"
|
||||
stroke="#8c6239"
|
||||
strokeWidth={1.2}
|
||||
rx={12}
|
||||
/>
|
||||
</G>
|
||||
<G id="layer-icons">
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#c5a880"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={1.5}
|
||||
d="M68 88q12-13 28-2 6 5 10 2m226 0q-12-13-28-2-6 5-10 2"
|
||||
/>
|
||||
<G id="pizza-oven" transform="translate(200 192)">
|
||||
<Rect
|
||||
width={88}
|
||||
height={6}
|
||||
x={-44}
|
||||
fill="#d7ccc8"
|
||||
stroke="#5d4037"
|
||||
rx={2}
|
||||
/>
|
||||
<Path
|
||||
fill="#d7ccc8"
|
||||
stroke="#5d4037"
|
||||
strokeWidth={1.5}
|
||||
d="M-40 0a40 38 0 0 1 80 0Z"
|
||||
/>
|
||||
<Path
|
||||
stroke="#8d6e63"
|
||||
d="m-30-25 7 6m6-15 4 8M0-38v9m17-5-4 8m17 1-7 6"
|
||||
/>
|
||||
<Path fill="#3e2723" stroke="#271c19" d="M-28 0a28 26 0 0 1 56 0Z" />
|
||||
<Path
|
||||
fill="url(#oven-fire)"
|
||||
d="M-18 0q3-16 12-10 6-12 12-2 9-6 12 12Z"
|
||||
/>
|
||||
<Path fill="#fff9c4" d="M-10 0q5-10 10-6 5-6 10 6Z" />
|
||||
</G>
|
||||
<G id="left-ingredients" transform="translate(108 185)">
|
||||
<Ellipse
|
||||
cx={-16}
|
||||
cy={6}
|
||||
fill="#d32f2f"
|
||||
stroke="#8e0000"
|
||||
strokeWidth={0.8}
|
||||
rx={14}
|
||||
ry={10}
|
||||
transform="rotate(-25 -16 6)"
|
||||
/>
|
||||
<Ellipse
|
||||
cx={-16}
|
||||
cy={6}
|
||||
fill="#e53935"
|
||||
rx={10}
|
||||
ry={6.5}
|
||||
transform="rotate(-25 -16 6)"
|
||||
/>
|
||||
<Ellipse
|
||||
cx={2}
|
||||
cy={7}
|
||||
fill="#c62828"
|
||||
stroke="#8e0000"
|
||||
strokeWidth={0.8}
|
||||
rx={13}
|
||||
ry={9}
|
||||
transform="rotate(-10 2 7)"
|
||||
/>
|
||||
<Ellipse
|
||||
cx={2}
|
||||
cy={7}
|
||||
fill="#e53935"
|
||||
rx={9}
|
||||
ry={5.5}
|
||||
transform="rotate(-10 2 7)"
|
||||
/>
|
||||
<Circle cx={2} cy={7} r={1.5} fill="#fdd835" />
|
||||
<Circle
|
||||
cx={16}
|
||||
cy={-2}
|
||||
r={14}
|
||||
fill="#e53935"
|
||||
stroke="#b71c1c"
|
||||
strokeWidth={0.8}
|
||||
/>
|
||||
<Ellipse cx={12} cy={-6} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
|
||||
<Path
|
||||
stroke="#2e7d32"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={1.5}
|
||||
d="M16-16v3m0 0-5 2m5-2 5 2m-5-2-3-2m3 2 3-2"
|
||||
/>
|
||||
</G>
|
||||
<G id="right-ingredients" transform="translate(290 182)">
|
||||
<Circle
|
||||
cx={-14}
|
||||
cy={2}
|
||||
r={15}
|
||||
fill="#e53935"
|
||||
stroke="#b71c1c"
|
||||
strokeWidth={0.8}
|
||||
/>
|
||||
<Ellipse cx={-18} cy={-3} fill="#ff8a80" opacity={0.6} rx={4} ry={2} />
|
||||
<Path
|
||||
stroke="#2e7d32"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={1.5}
|
||||
d="M-14-13v3m0 0-4 2m4-2 4 2"
|
||||
/>
|
||||
<Path
|
||||
fill="#2e7d32"
|
||||
stroke="#1b5e20"
|
||||
strokeWidth={0.8}
|
||||
d="M-2 0C8-16 26-12 24 2 22 14 6 10-2 0Z"
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#4caf50"
|
||||
strokeWidth={0.7}
|
||||
d="M-2 0q14-4 26 2"
|
||||
/>
|
||||
<Path
|
||||
fill="#388e3c"
|
||||
stroke="#1b5e20"
|
||||
strokeWidth={0.8}
|
||||
d="M8 6c10-6 24 4 18 16-8 6-18-4-18-16Z"
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#81c784"
|
||||
strokeWidth={0.7}
|
||||
d="M8 6q12 6 18 16"
|
||||
/>
|
||||
</G>
|
||||
<G id="footer-pizza-slice" transform="rotate(-10 3278.565 44.969)">
|
||||
<Path
|
||||
fill="#deac68"
|
||||
stroke="#8d6e63"
|
||||
strokeWidth={1.2}
|
||||
d="m0 0 46-18c4 8 6 32 0 40Z"
|
||||
/>
|
||||
<Path fill="#fbc02d" d="m2 0 40-15c3 7 5 25 0 33Z" />
|
||||
<Circle
|
||||
cx={28}
|
||||
cy={-5}
|
||||
r={5}
|
||||
fill="#c62828"
|
||||
stroke="#8e0000"
|
||||
strokeWidth={0.8}
|
||||
/>
|
||||
<Circle
|
||||
cx={32}
|
||||
cy={8}
|
||||
r={4.5}
|
||||
fill="#c62828"
|
||||
stroke="#8e0000"
|
||||
strokeWidth={0.8}
|
||||
/>
|
||||
<Circle
|
||||
cx={16}
|
||||
r={3.5}
|
||||
fill="#c62828"
|
||||
stroke="#8e0000"
|
||||
strokeWidth={0.8}
|
||||
/>
|
||||
<Ellipse
|
||||
cx={23}
|
||||
cy={4}
|
||||
fill="#2e7d32"
|
||||
rx={2}
|
||||
ry={4}
|
||||
transform="rotate(30 23 4)"
|
||||
/>
|
||||
<Ellipse
|
||||
cx={34}
|
||||
cy={-11}
|
||||
fill="#2e7d32"
|
||||
rx={2}
|
||||
ry={3}
|
||||
transform="rotate(-40 34 -11)"
|
||||
/>
|
||||
</G>
|
||||
<G id="footer-wine-glass" transform="translate(345 562)">
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#71717a"
|
||||
strokeWidth={1.2}
|
||||
d="M-14-24C-15-8-11 4 0 6 11 4 15-8 14-24Z"
|
||||
/>
|
||||
<Path
|
||||
fill="url(#wine-grad)"
|
||||
d="M-13-12C-11 0-7 4 0 5.5 7 4 11 0 13-12Z"
|
||||
/>
|
||||
<Ellipse cy={-12} fill="#991b1b" rx={13} ry={2} />
|
||||
<Path stroke="#71717a" strokeWidth={1.4} d="M0 6v22" />
|
||||
<Ellipse
|
||||
cy={28}
|
||||
fill="#e4e4e7"
|
||||
stroke="#71717a"
|
||||
strokeWidth={1.2}
|
||||
rx={11}
|
||||
ry={2}
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#fff"
|
||||
strokeLinecap="round"
|
||||
d="M-10-20c-2 8 1 18 6 23"
|
||||
opacity={0.6}
|
||||
/>
|
||||
</G>
|
||||
<G id="qr-corner-accents">
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#2e7d32"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={3}
|
||||
d="M78 227v-22h22"
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#b92b27"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={3}
|
||||
d="M322 227v-22h-22M78 423v22h22"
|
||||
/>
|
||||
<Path
|
||||
fill="none"
|
||||
stroke="#2e7d32"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={3}
|
||||
d="M322 423v22h-22"
|
||||
/>
|
||||
</G>
|
||||
</G>
|
||||
<G id="qr-placeholder" transform="translate(90 215)">
|
||||
<Rect
|
||||
width={220}
|
||||
height={220}
|
||||
fill="#fff"
|
||||
stroke="#e4e4e7"
|
||||
strokeWidth={2}
|
||||
rx={20}
|
||||
/>
|
||||
<Rect
|
||||
width={196}
|
||||
height={196}
|
||||
x={12}
|
||||
y={12}
|
||||
fill="#fafafa"
|
||||
stroke="#e4e4e7"
|
||||
strokeDasharray="4 3"
|
||||
rx={14}
|
||||
/>
|
||||
<Text
|
||||
x={110}
|
||||
y={115}
|
||||
fill="#71717a"
|
||||
dominantBaseline="middle"
|
||||
fontFamily='"Inter",Arial,sans-serif'
|
||||
fontSize={12}
|
||||
fontWeight={700}
|
||||
letterSpacing={0.5}
|
||||
textAnchor="middle"
|
||||
>
|
||||
{"QR KOD ALANI"}
|
||||
</Text>
|
||||
</G>
|
||||
<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>
|
||||
<Text
|
||||
x={200}
|
||||
y={96}
|
||||
className="font-brand-arc"
|
||||
fontSize={24}
|
||||
textAnchor="middle"
|
||||
>
|
||||
{"PIZZERIA"}
|
||||
</Text>
|
||||
<Text
|
||||
x={200}
|
||||
y={132}
|
||||
className="font-brand-arc"
|
||||
fontSize={31}
|
||||
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} className="font-cta" textAnchor="middle">
|
||||
{"MEN\xDCY\xDC G\xD6RMEK"}
|
||||
</Text>
|
||||
<Text x={200} y={494} className="font-cta" textAnchor="middle">
|
||||
{"\u0130\xC7\u0130N OKUTUN"}
|
||||
</Text>
|
||||
<Text x={200} y={546} textAnchor="middle">
|
||||
<TSpan className="font-footer-bold">{"WiFi: "}</TSpan>
|
||||
<TSpan className="font-footer-reg">{"GourmetBistro"}</TSpan>
|
||||
<TSpan fill="#a1a1aa" className="font-footer-reg">
|
||||
{" | "}
|
||||
</TSpan>
|
||||
<TSpan className="font-footer-bold">{"\u015Eifre: "}</TSpan>
|
||||
<TSpan className="font-footer-reg">{"lezzetli01"}</TSpan>
|
||||
</Text>
|
||||
<Text x={200} y={570} textAnchor="middle">
|
||||
<TSpan fill="#b92b27" className="font-footer-bold">
|
||||
{"B\u0130Z\u0130 TAK\u0130P ED\u0130N"}
|
||||
</TSpan>
|
||||
<TSpan fill="#a1a1aa" className="font-footer-reg">
|
||||
{" | "}
|
||||
</TSpan>
|
||||
<TSpan className="font-footer-reg">{"@gourmetbistro"}</TSpan>
|
||||
</Text>
|
||||
</G>
|
||||
</Svg>
|
||||
)
|
||||
export default SvgComponent
|
||||
Reference in New Issue
Block a user