Working on arthome

app/components/old/Application.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { AppType } from '~~/types/types'
+
+defineProps<{
+  title: string
+  apps: AppType[]
+}>()
+</script>
+
+<template>
+  <section>
+    <h1 class="font-bold text-xl mb-4">
+      {{ title }}
+    </h1>
+    <div v-if="apps" class="grid grid-cols-1 auto-rows-auto sm:grid-cols-3 md:grid-cols-5 gap-4">
+      <ULink v-for="app in apps" :key="app.name" :to="app.url" class="relative" target="_blank">
+        <div v-show="app.primary === true" class="absolute flex h-4 w-4 -right-2 -top-2">
+          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+          <span class="relative inline-flex rounded-full h-4 w-4 bg-green-500" />
+        </div>
+        <UCard
+          :ui="{ body: { base: 'h-full' }, background: 'h-full duration-300 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800' }"
+        >
+          <div class="flex gap-4 items-center h-full">
+            <UBadge :color="app.color" class="p-2" variant="soft">
+              <UIcon :name="app.icon" size="32" />
+            </UBadge>
+            <div class="flex flex-col gap-1">
+              <div v-if="app.nuxt" class="text-xl flex gap-1 items-center">
+                <div class="flex">
+                  <p>{{ app.name }}</p>
+                  <p :class="`text-${app.color}-400 font-medium`">
+                    {{ app.nuxt }}
+                  </p>
+                </div>
+              </div>
+              <div v-else :class="`text-${app.color}-400`" class="text-xl font-medium">
+                <p>{{ app.name }}</p>
+              </div>
+              <div class="flex gap-2 mt-1">
+                <UBadge
+                  v-for="tag in app.tags"
+                  :key="tag.name"
+                  :color="tag.color"
+                  :label="tag.name"
+                  variant="soft"
+                />
+              </div>
+            </div>
+          </div>
+        </UCard>
+      </ULink>
+    </div>
+  </section>
+</template>

app/components/old/Map.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+const config = useRuntimeConfig()
+
+const coordinates = ref<[number, number]>([2.179040, 48.877419])
+const zoom = ref(11)
+</script>
+
+<template>
+  <ClientOnly>
+    <UCard :ui="{ base: 'h-72 md:col-span-2', body: { padding: '' } }">
+      <div class="relative">
+        <MapboxMap
+          :options="{
+            accessToken: config.public.mapbox.accessToken,
+            style: config.public.mapbox.style,
+            center: coordinates,
+            zoom,
+            projection: 'globe',
+          }"
+          class="absolute h-72"
+          map-id="map"
+        >
+          <MapboxDefaultMarker
+            :lnglat="coordinates"
+            :options="{
+              color: '#808080',
+              size: 1.5,
+            }"
+            marker-id="marker"
+          />
+        </MapboxMap>
+      </div>
+    </UCard>
+  </ClientOnly>
+</template>
+
+<style>
+.mapboxgl-control-container {
+  display: none !important;
+}
+
+.mapboxgl-canvas {
+  border-radius: 1rem;
+}
+</style>

app/components/old/Weather.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { WeatherType } from '~~/types/types'
+
+const { data: weather } = await useFetch<WeatherType>('/api/weather')
+</script>
+
+<template>
+  <section>
+    <UCard v-if="weather" :ui="{ base: 'h-full' }">
+      <template #header>
+        <div class="flex items-center gap-2 text-blue-600 dark:text-blue-300">
+          <UIcon name="i-ph:cloud-duotone" size="24" />
+          <h3 class="font-bold text-lg">
+            Météo
+          </h3>
+        </div>
+      </template>
+      <template #default>
+        <div class="flex items-center h-full">
+          <p class="text-lg h-full">
+            Il fait actuellement
+            <span class="text-blue-600 dark:text-blue-300">{{ weather.weather }}</span>
+            à
+            <span>{{ weather.city }}</span>,
+            avec une température de
+            <span class="text-blue-600 dark:text-blue-300">{{ weather.temp }}
+            </span>
+            °C
+          </p>
+        </div>
+      </template>
+    </UCard>
+  </section>
+</template>