36 lines
779 B
Vue
36 lines
779 B
Vue
<script setup lang="ts">
|
|
import { tv } from "tailwind-variants";
|
|
|
|
import type { AcfMediaFragment } from "#graphql/types";
|
|
|
|
const props = defineProps<{ media: AcfMediaFragment }>();
|
|
|
|
const tvAcfMedia = tv({
|
|
slots: {
|
|
image: "w-full",
|
|
},
|
|
variants: {
|
|
aspectRatio: {
|
|
square: { image: "aspect-[1/1]" },
|
|
video: { image: "aspect-video" },
|
|
portrait: { image: "aspect-[2/3]" },
|
|
auto: { image: "aspect-auto" },
|
|
},
|
|
objectFit: {
|
|
cover: { image: "object-cover" },
|
|
contain: { image: "object-contain" },
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
aspectRatio: "auto",
|
|
objectFit: "cover",
|
|
},
|
|
});
|
|
|
|
const classes = tvAcfMedia(props.media);
|
|
</script>
|
|
|
|
<template>
|
|
<AcfImage :image="media.image.node" :class="classes.image()" />
|
|
</template>
|