feat : Ajout d'un layout default.vue + Ajout de la couleur primary dans la conf tailwind.config.ts +Ajout d'un composable pour gérer les appels API (GET, POST)

frontend/app.vue

@@ -1,3 +1,5 @@
 <template>
-    <NuxtPage/>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

frontend/composables/useApi.ts

@@ -0,0 +1,42 @@
+import type { FetchOptions } from 'ofetch'
+import { $fetch, FetchError } from 'ofetch'
+
+export type ApiClient = {
+  get<T>(path: string, options?: FetchOptions<'json'>): Promise<T>
+  post<T>(path: string, body?: unknown, options?: FetchOptions<'json'>): Promise<T>
+}
+
+export const useApi = (): ApiClient => {
+  const config = useRuntimeConfig()
+  const baseURL = config.public.apiBase ?? '/api'
+  const client = $fetch.create({ baseURL })
+
+  return {
+    get<T>(path: string, options?: FetchOptions<'json'>) {
+      return client<T>(path, { ...options, method: 'GET' })
+    },
+    post<T>(path: string, body?: unknown, options?: FetchOptions<'json'>) {
+      return client<T>(path, { ...options, method: 'POST', body })
+    }
+  }
+}
+
+export const getApiStatus = (error: unknown): number | null => {
+  if (error && typeof error === 'object') {
+    if (error instanceof FetchError) {
+      return error.status ?? error.response?.status ?? null
+    }
+
+    const maybeResponse = (error as { response?: { status?: number } }).response
+    if (typeof maybeResponse?.status === 'number') {
+      return maybeResponse.status
+    }
+
+    const maybeStatus = (error as { status?: number }).status
+    if (typeof maybeStatus === 'number') {
+      return maybeStatus
+    }
+  }
+
+  return null
+}

frontend/layouts/default.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="min-h-screen bg-white text-neutral-900">
+        <header class="w-full border-b border-neutral-200 bg-primary-500">
+            <div class="flex w-full items-center px-6 py-4">
+                <NuxtLink to="/" class="flex items-center gap-3">
+          <span
+              class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
+          >
+            LOGO
+          </span>
+                </NuxtLink>
+                <nav class="mx-8 flex gap-8 text-2xl font-bold uppercase text-white">
+                    <NuxtLink to="/" custom v-slot="{ href, navigate, isExactActive }">
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="isExactActive ? 'opacity-100' : 'opacity-50'"
+                        >
+                            Accueil
+                        </a>
+                    </NuxtLink>
+                    <NuxtLink to="/reception" custom v-slot="{ href, navigate, isActive }">
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="isActive ? 'opacity-100' : 'opacity-50'"
+                        >
+                            Reception
+                        </a>
+                    </NuxtLink>
+                </nav>
+            </div>
+        </header>
+        <main class="mx-auto w-full max-w-[1050px] px-6 pt-[90px] pb-0">
+            <slot/>
+        </main>
+    </div>
+</template>

frontend/nuxt.config.ts

@@ -3,6 +3,11 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   ssr: false,
   modules: ['@nuxtjs/tailwindcss'],
+  runtimeConfig: {
+    public: {
+      apiBase: process.env.NUXT_PUBLIC_API_BASE
+    }
+  },
   typescript: {
     strict: true
   }

frontend/tailwind.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f6f9ea',
+          100: '#eaf2cf',
+          200: '#d6e3a4',
+          300: '#c1d47a',
+          400: '#afc85a',
+          500: '#9ebb43',
+          600: '#7e9735',
+          700: '#607228',
+          800: '#414d1a',
+          900: '#24290d'
+        }
+      }
+    }
+  }
+}