<template>
  <NuxtLayout name="default">
    <h1 class="text-4xl text-highlighted font-bold mb-8">
      {{ $t('pages.projects.name') }}
    </h1>
    <div class="flex flex-wrap gap-4 justify-center">
      <UiSingleProject v-for="project in projects" :key="project.name" :project="project" />
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
import type { Project, ProjectsWrapper } from '~/types/project';

const { getJsonData } = useDataJson('projects');
const projects$ = await getJsonData<ProjectsWrapper>();
const projects: ComputedRef<Project[]> = computed(() => (projects$?.value ? projects$.value.projects : []));
</script>
