41 lines
986 B
Vue
41 lines
986 B
Vue
<script setup lang="ts">
|
|
import { tv, type VariantProps } from "tailwind-variants";
|
|
import type { SectionHeroSplitFragment } from "#graphql/operations";
|
|
|
|
const tvSectionHeroSplit = tv({
|
|
slots: {
|
|
base: "py-6",
|
|
container: "container flex flex-col items-center gap-6",
|
|
content: "flex-1",
|
|
media: "w-full basis-1/2",
|
|
},
|
|
variants: {
|
|
reverse: {
|
|
false: {
|
|
container: "lg:flex-row",
|
|
},
|
|
true: {
|
|
container: "lg:flex-row-reverse",
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
reverse: false,
|
|
},
|
|
});
|
|
|
|
const props = defineProps<SectionHeroSplitFragment>();
|
|
const classes = tvSectionHeroSplit({
|
|
reverse: props.reverse,
|
|
} as VariantProps<typeof tvSectionHeroSplit>);
|
|
</script>
|
|
|
|
<template>
|
|
<section :class="classes.base()">
|
|
<div :class="classes.container()">
|
|
<UiProse :content="content" :class="classes.content()" />
|
|
<AcfMedia :media="parseAcfMedia(props)" :class="classes.media()" />
|
|
</div>
|
|
</section>
|
|
</template>
|