Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 11 Packages Wiki Activity Actions

content text and dynamic zone components

Browse source
This commit is contained in:
Julian Krauser 2024-11-03 13:13:36 +01:00
parent 44b55d9bbb
commit 3df3ba4ebc
22 changed files with 202 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

13
components/dynamicZone/ColumnImageText.vue
View file

@ -1,11 +1,22 @@
<template>
<p>{{ data }}</p>
<div class="flex flex-row gap-4">
<NuxtPicture
loading="lazy"
class="w-1/2 min-w-[50%] h-fit object-cover object-center"
:class="data?.image_left ? 'order-0' : 'order-1'"
:src="baseUrl + data?.image.url"
:imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
/>
<FieldContent :data="data?.text" />
</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneColumnImageText from "../../types/component/dynamicZoneColumnImageText";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<DynamicZoneColumnImageText>,
});

5
components/dynamicZone/DualColumnText.vue
View file

@ -1,5 +1,8 @@
<template>
<p>{{ data }}</p>
<div class="flex flex-row gap-4">
<FieldContent :data="data?.left_side" />
<FieldContent :data="data?.right_side" />
</div>
</template>
<script setup lang="ts">

9
components/dynamicZone/FullImage.vue
View file

@ -1,11 +1,18 @@
<template>
<p>{{ data }}</p>
<NuxtPicture
loading="lazy"
class="w-1/2 min-w-[50%] h-fit object-cover object-center mx-auto"
:src="baseUrl + data?.image.url"
:imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
/>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<DynamicZoneFullImage>,
});

2
components/dynamicZone/FullText.vue
View file

@ -1,5 +1,5 @@
<template>
<p>{{ data }}</p>
<FieldContent :data="data?.text" />
</template>
<script setup lang="ts">

12
components/dynamicZone/Gallery.vue
View file

@ -1,11 +1,21 @@
<template>
<p>{{ data }}</p>
<div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
<NuxtPicture
v-for="img in data?.images"
loading="lazy"
class="w-fit h-48 object-cover object-center"
:src="baseUrl + img.url"
:imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
/>
</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneGallery from "../../types/component/dynamicZoneGallery";
const baseUrl = useStrapiUrl().replace("/api", "");
defineProps({
data: Object as PropType<DynamicZoneGallery>,
});