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

feat(mobile): integrate QrTemplate9 Vintage Table Menu with 9.jpeg background and live editing

Browse Source
This commit is contained in:
AyrisAI
2026-08-21 01:19:04 +03:00
parent 102a9a744b
commit d00b45ce72
6 changed files with 528 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/svgcomponentlist/9.tsx
+231
View File
@@ -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) => (
<Svg width={1024} height={1024} {...props}>
<Defs>
<Path id="a" fill="none" d="M330 260q182-115 364 0" />
</Defs>
<Path fill="#f8f6f0" d="M0 0h1024v1024H0z" />
<Image
width={1024}
height={1024}
href="xx.png"
preserveAspectRatio="none"
/>
<G transform="translate(362 428)">
<Rect
width={300}
height={300}
fill="#fff"
stroke="#d5cebe"
strokeWidth={1.5}
rx={24}
/>
<Rect
width={276}
height={276}
x={12}
y={12}
fill="#fafaf7"
stroke="#1e3246"
strokeDasharray="6 4"
strokeOpacity={0.35}
strokeWidth={1.5}
rx={16}
/>
<Circle
cx={150}
cy={132}
r={28}
fill="#f5efe6"
stroke="#1e3246"
strokeWidth={1.5}
/>
<Path
fill="none"
stroke="#1e3246"
strokeLinecap="round"
strokeWidth={1.9}
d="M142.4 116.8v11.4c0 3.8 5.7 3.8 5.7 0v-11.4m-2.85 0v11.4m0 3.8v15.2m9.5-30.4c4.75 3.8 4.75 15.2 0 17.1v13.3"
/>
<Text
x={150}
y={192}
fill="#1e3246"
fontFamily="Inter, Arial, sans-serif"
fontSize={14}
fontWeight={800}
letterSpacing={2}
textAnchor="middle"
>
{"QR KOD ALANI"}
</Text>
</G>
<G stroke="#a88b58" transform="translate(290 142)">
<Circle cx={-16} cy={-8} r={4.5} fill="none" strokeWidth={1.5} />
<Path strokeLinecap="round" strokeWidth={1.5} d="M-16-12v8m-4-4h8" />
<Path
fill="none"
strokeLinecap="round"
strokeWidth={1.5}
d="M0-12c4 0 8 6 8 12S4 12 0 12"
/>
<Path
fill="none"
strokeLinecap="round"
strokeWidth={1.2}
d="M-32 20c12 8 52 8 64 0"
/>
</G>
<G stroke="#1e3246">
<Path
fill="none"
strokeLinecap="round"
strokeWidth={3}
d="M390 780c-16-8-16-26-8-36"
/>
<Path
fill="#1e3246"
strokeLinejoin="round"
strokeWidth={1.5}
d="m374 750 8-6 6 8Z"
/>
</G>
<G stroke="#1e3246">
<Path
fill="none"
strokeLinecap="round"
strokeWidth={3}
d="M634 780c16-8 16-26 8-36"
/>
<Path
fill="#1e3246"
strokeLinejoin="round"
strokeWidth={1.5}
d="m650 750-8-6-6 8Z"
/>
</G>
<Text
x={290}
y={164}
fill="#1e3246"
fontFamily="'Arial Black', 'Impact', sans-serif"
fontSize={16}
fontWeight={900}
letterSpacing={1}
textAnchor="middle"
>
{"TABLE MENU"}
</Text>
<Text
x={290}
y={180}
fill="#8c7348"
fontFamily="Georgia, serif"
fontSize={9}
fontStyle="italic"
fontWeight={700}
letterSpacing={1}
textAnchor="middle"
>
{"EST. 2023"}
</Text>
<Text
x={364}
y={248}
fill="#1e3246"
fontFamily="'Arial Black', 'Impact', sans-serif"
fontSize={23}
fontWeight={900}
letterSpacing={1}
textAnchor="middle"
transform="rotate(-26 364 248)"
>
{"SIAT"}
</Text>
<Text
fill="#1e3246"
fontFamily="'Arial Black', 'Impact', sans-serif"
fontSize={52}
fontWeight={900}
letterSpacing={2}
>
<TextPath href="#a" startOffset="50%" textAnchor="middle">
{"\n SCAN TO\n "}
</TextPath>
</Text>
<Text
x={670}
y={244}
fill="#1e3246"
fontFamily="'Arial Black', 'Impact', sans-serif"
fontSize={25}
fontWeight={900}
letterSpacing={1}
textAnchor="middle"
transform="rotate(24 670 244)"
>
{"VIEW"}
</Text>
<Text
x={512}
y={320}
fill="#1e3246"
fontFamily="'Arial Black', 'Impact', sans-serif"
fontSize={82}
fontWeight={900}
letterSpacing={3}
textAnchor="middle"
>
{"OUR MENU"}
</Text>
<Text
x={512}
y={748}
fill="#1e3246"
fontFamily="'Arial Black', sans-serif"
fontSize={18.5}
fontWeight={900}
letterSpacing={1}
textAnchor="middle"
>
{"VIEW OUR"}
</Text>
<Text
x={512}
y={774}
fill="#1e3246"
fontFamily="'Arial Black', sans-serif"
fontSize={18.5}
fontWeight={900}
letterSpacing={1}
textAnchor="middle"
>
{"DELICIOUS MENU"}
</Text>
<Text
x={500}
y={894}
fill="#1e3246"
fontFamily="'Arial Black', 'Montserrat', sans-serif"
fontSize={18}
fontWeight={900}
letterSpacing={1.5}
textAnchor="middle"
>
{"WELCOME TO OUR TABLE"}
</Text>
</Svg>
)
const Memo = memo(SvgComponent)
export default Memo