button with image
This commit is contained in:
@ -1,41 +1,26 @@
|
||||
<template>
|
||||
<div
|
||||
class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap"
|
||||
>
|
||||
<button
|
||||
:class="[
|
||||
'h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
|
||||
type === 'fill'
|
||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
||||
: type === 'border'
|
||||
<div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
|
||||
<button :class="[
|
||||
'h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
|
||||
type === 'fill'
|
||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
||||
: type === 'border'
|
||||
? 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border'
|
||||
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
full && 'w-full'
|
||||
]"
|
||||
>
|
||||
full && 'w-full'
|
||||
]">
|
||||
<slot />
|
||||
</button>
|
||||
<div
|
||||
v-if="arrow"
|
||||
:class="[
|
||||
'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
|
||||
type === 'fill'
|
||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
||||
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
]"
|
||||
>
|
||||
<svg
|
||||
class=""
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 26 26"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<div v-if="arrow" :class="[
|
||||
'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
|
||||
type === 'fill'
|
||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
||||
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
]">
|
||||
<svg class="" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
29
components/ui/ImgWrapper.vue
Normal file
29
components/ui/ImgWrapper.vue
Normal file
@ -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>
|
Reference in New Issue
Block a user