37 lines
933 B
Vue
37 lines
933 B
Vue
<script setup lang="ts">
|
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
import type { AcfMediaFragment } from "#graphql/operations";
|
|
|
|
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 props = defineProps<{ media?: AcfMediaFragment }>();
|
|
const classes = tvAcfMedia({
|
|
aspectRatio: props.media?.aspectRatio,
|
|
objectFit: props.media?.objectFit,
|
|
} as VariantProps<typeof tvAcfMedia>);
|
|
</script>
|
|
|
|
<template>
|
|
<AcfImage v-if="media?.image?.node" :image="media.image.node" :class="classes.image()" />
|
|
</template>
|