Ajout de conf front (Nuxt, useApi, tailwind) (!2)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/2
Reviewed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: AUTIN Tristan <tristan@yuno.malio.fr>
Co-committed-by: AUTIN Tristan <tristan@yuno.malio.fr>

frontend/app.vue

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

frontend/composables/useApi.ts

@@ -0,0 +1,44 @@
+import type { FetchOptions } from 'ofetch'
+import { $fetch, FetchError } from 'ofetch'
+
+export type AnyObject = Record<string, unknown>
+
+export type ApiClient = {
+  get<T>(url: string, query?: AnyObject, options?: FetchOptions<'json'>): Promise<T>
+  post<T>(url: string, body?: AnyObject, options?: FetchOptions<'json'>): Promise<T>
+  put<T>(url: string, body?: AnyObject, options?: FetchOptions<'json'>): Promise<T>
+  patch<T>(url: string, body?: AnyObject, options?: FetchOptions<'json'>): Promise<T>
+  delete<T>(url: string, query?: AnyObject, options?: FetchOptions<'json'>): Promise<T>
+}
+
+export const useApi = (): ApiClient => {
+  const config = useRuntimeConfig()
+  const baseURL = config.public.apiBase ?? '/api'
+  const client = $fetch.create({ baseURL })
+
+  const request = <T>(
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
+    url: string,
+    options: FetchOptions<'json'> = {}
+  ) => {
+    return client<T>(url, { ...options, method })
+  }
+
+  return {
+    get<T>(url: string, query: AnyObject = {}, options: FetchOptions<'json'> = {}) {
+      return request<T>('GET', url, { ...options, query })
+    },
+    post<T>(url: string, body: AnyObject = {}, options: FetchOptions<'json'> = {}) {
+      return request<T>('POST', url, { ...options, body })
+    },
+    put<T>(url: string, body: AnyObject = {}, options: FetchOptions<'json'> = {}) {
+      return request<T>('PUT', url, { ...options, body })
+    },
+    patch<T>(url: string, body: AnyObject = {}, options: FetchOptions<'json'> = {}) {
+      return request<T>('PATCH', url, { ...options, body })
+    },
+    delete<T>(url: string, query: AnyObject = {}, options: FetchOptions<'json'> = {}) {
+      return request<T>('DELETE', url, { ...options, query })
+    }
+  }
+}

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'
+        }
+      }
+    }
+  }
+}