232 lines
6.2 KiB
TypeScript
232 lines
6.2 KiB
TypeScript
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
|