button with image

components/ui/ImgWrapper.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="hidden md:block">
+        <svg width="100%" height="100%" viewBox="0 0 870 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <clipPath id="customClip">
+                    <path
+                        d="M20 0.5H847.666C858.366 0.5 867.067 9.12193 867.165 19.8213L869.315 254.821C869.415 265.66 860.656 274.5 849.816 274.5H653C641.678 274.5 632.5 283.678 632.5 295V330C632.5 340.77 623.77 349.5 613 349.5H20C9.23045 349.5 0.5 340.77 0.5 330V20C0.5 9.23045 9.23045 0.5 20 0.5Z" />
+                </clipPath>
+            </defs>
+
+            <image :href="src" clip-path="url(#customClip)" preserveAspectRatio="xMidYMid slice" width="100%"
+                height="100%" />
+
+            <foreignObject x="640" y="280" width="calc(100% - 640px - 1px)" height="calc(100% - 280px)">
+                <slot name="button"></slot>
+            </foreignObject>
+        </svg>
+    </div>
+    <div class="block md:hidden">
+        <img :src="src" width="100%" height="100%" class="object-contain rounded-2xl my-4" />
+        <div class="flex justify-center">
+            <slot name="button"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ src: string }>()
+</script>