Rough in logocloud

components/Block/LogoCloud.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { BlockProps } from './types';
+
+const { $directus, $readItem } = useNuxtApp();
+
+const props = defineProps<BlockProps>();
+
+const { data: block } = useAsyncData(props.uuid, () =>
+	$directus.request(
+		$readItem('block_logocloud', props.uuid, {
+			fields: ['type', { logos: ['id', { directus_files_id: ['id', 'description'] }] }],
+		})
+	)
+);
+</script>
+
+<template>
+	<div v-if="block" class="block-logocloud-container">
+		<div class="block-logocloud">
+			<BaseDirectusImage
+				v-for="logo in block.logos"
+				:key="logo.id"
+				:uuid="logo.directus_files_id.id"
+				:alt="logo.directus_files_id.description ?? ''"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.block-logocloud-container {
+	container-type: inline-size;
+	grid-column: narrow !important;
+}
+
+.block-logocloud {
+	grid-template-columns: repeat(auto-fit, minmax(var(--space-28), 1fr));
+	justify-items: center;
+	align-items: center;
+	gap: var(--space-12);
+	display: grid;
+}
+
+// For pink color override
+// .block-logocloud {
+// 	filter: invert(0.5) sepia(0.8) saturate(0.8) hue-rotate(269deg);
+// }
+</style>

components/PageBuilder.vue

@@ -27,7 +27,7 @@ const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
 	block_hero_form: resolveComponent('BlockHeroForm'),
 	block_hero_headline: resolveComponent('BlockHeroHeadline'),
 	block_hero_rotator: resolveComponent('BlockHeroRotator'),
-	block_logocloud: 'div',
+	block_logocloud: resolveComponent('BlockLogoCloud'),
 	block_media_fullwidth: resolveComponent('BlockMediaFullWidth'),
 	block_pageheader: resolveComponent('BlockPageHeader'),
 	block_separator: 'div',

types/schema/blocks/block-logo-cloud.ts

@@ -2,13 +2,13 @@ import type { File } from '../system/index.js';
 
 export interface BlockLogoCloud {
 	id: string;
-	type: string | null;
+	type: 'ticker' | 'grid' | null;
 	logos: number[] | BlockLogoCloudLogo[];
 }
 
 export interface BlockLogoCloudLogo {
 	id: number;
 	block_logocloud_id: string | BlockLogoCloud | null;
-	directus_files_id: string | File | null;
+	directus_files_id: string | File;
 	sort: number | null;
 }

types/schema/schema.ts

@@ -4,6 +4,8 @@ import type {
 	BlockFeatureGrid,
 	BlockHeroForm,
 	BlockHeroHeadline,
+	BlockLogoCloud,
+	BlockLogoCloudLogo,
 	BlockMediaFullWidth,
 	BlockPageHeader,
 	BlockRichText,
@@ -47,6 +49,8 @@ export interface Schema {
 	block_featuregrid: BlockFeatureGrid[];
 	block_hero_form: BlockHeroForm[];
 	block_hero_headline: BlockHeroHeadline[];
+	block_logocloud: BlockLogoCloud[];
+	block_logocloud_logo: BlockLogoCloudLogo[];
 	block_media_fullwidth: BlockMediaFullWidth[];
 	block_pageheader: BlockPageHeader[];
 	block_richtext: BlockRichText[];