feat: AcfMedia component (image + aspect + object-fit)

wp-content/themes/moonshine/app/components/acf/AcfMedia.vue

@@ -0,0 +1,36 @@
+<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>