feat: Initial AcfLayout field

wp-content/themes/headless/app/components/acf/AcfLayout.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+
+import type { AcfLayoutFragment } from "#graphql/types";
+
+const props = defineProps<{ layout: AcfLayoutFragment }>();
+
+const tvLayoutVariants = tv({
+  slots: {
+    base: "",
+    inner: "",
+  },
+  variants: {
+    display: {
+      block: { inner: "block" },
+      flex: { inner: "flex flex-col gap-6" },
+      grid: { inner: "grid" },
+    },
+
+    color: {
+      default: { base: "bg-default" },
+      muted: { base: "bg-muted" },
+      inverted: { base: "bg-inverted text-inverted" },
+      primary: { base: "bg-primary text-inverted" },
+    },
+
+    container: {
+      default: { inner: "container" },
+      xl: { inner: "container-xl" },
+      lg: { inner: "container-lg" },
+      md: { inner: "container-md" },
+      sm: { inner: "container-sm" },
+      fluid: { inner: "container-fluid" },
+      none: { inner: "container-none" },
+    },
+
+    verticalPadding: {
+      none: { base: "py-0" },
+      sm: { base: "py-6" },
+      md: { base: "py-12" },
+      lg: { base: "py-24" },
+    },
+  },
+  defaultVariants: {
+    display: "block",
+    color: "default",
+    container: "default",
+    verticalPadding: "md",
+  },
+});
+
+const { base, inner } = tvLayoutVariants(props.layout);
+</script>
+
+<template>
+  <section :class="base()">
+    <div :class="inner()">
+      <slot />
+    </div>
+  </section>
+</template>