From ec38d63003d964f35da52dca6d67865b195da10b Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 13 Mar 2024 17:10:37 +0100
Subject: [PATCH] Edit prisma connection

---
 prisma/schema.prisma          |  6 +--
 src/components/Background.vue |  4 +-
 src/pages/talents.vue         | 76 ++++++++++++++++++-----------------
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 73d5dd9..5489f4d 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -3,9 +3,9 @@ generator client {
 }
 
 datasource db {
-  provider     = "mysql"
-  url          = env("PRISMA_URL")
-  relationMode = "prisma"
+  provider  = "postgresql"
+  url       = env("DATABASE_URL")
+  directUrl = env("DIRECT_URL")
 }
 
 model Maintenance {
diff --git a/src/components/Background.vue b/src/components/Background.vue
index 22e8ecb..1fc39c4 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const points = useState(() => Array.from({ length: 15 }).fill(0).map(() => [Math.random(), Math.random()]))
+const points = useState(() => Array.from({ length: 25 }).fill(0).map(() => [Math.random(), Math.random()]))
 
 const poly = computed(() => points.value.map(([x, y]) => `${x * 100}% ${y * 100}%`).join(', '))
 
@@ -23,7 +23,7 @@ onUnmounted(() => clearTimeout(timeout))
   <ClientOnly>
     <div class="bg sm:mx-8 absolute inset-0 z-20 transform-gpu blur-3xl overflow-hidden" aria-hidden="true">
       <div
-        class="aspect-[1.7] h-full w-full bg-gradient-to-r from-[rgb(var(--color-primary-DEFAULT))] to-white/10 lg:opacity-30 xs:opacity-50"
+        class="aspect-[1.7] h-2/3 w-full bg-gradient-to-r from-[rgb(var(--color-primary-DEFAULT))] to-white/10 lg:opacity-30 xs:opacity-50"
         :style="{ 'clip-path': `polygon(${poly})` }"
       />
     </div>
diff --git a/src/pages/talents.vue b/src/pages/talents.vue
index c76069d..50dc682 100644
--- a/src/pages/talents.vue
+++ b/src/pages/talents.vue
@@ -147,49 +147,51 @@ async function suggest() {
         </div>
       </UCard>
     </UModal>
-    <div v-if="getCategories" class="sticky z-40 top-[4.8rem] left-0 z-100 flex gap-2 w-full items-center justify-between">
-      <div class="flex gap-2 overflow-x-scroll sm:overflow-x-hidden bg-gray-100 dark:bg-gray-800 rounded-lg p-1 relative">
-        <ClientOnly>
+    <div class="sticky z-40 top-[4.55rem] left-0 z-100 bg-white pt-2">
+      <div v-if="getCategories" class="flex gap-2 w-full items-center justify-between">
+        <div class="flex gap-2 overflow-x-scroll sm:overflow-x-hidden bg-gray-100 dark:bg-gray-800 rounded-lg p-1 relative">
+          <ClientOnly>
+            <div
+              class="absolute duration-300 left-1 ease-out focus:outline-none"
+              :style="[getMarkerStyle]"
+            >
+              <div class="w-full h-full bg-white dark:bg-gray-900 rounded-md shadow-sm" />
+            </div>
+          </ClientOnly>
           <div
-            class="absolute duration-300 left-1 ease-out focus:outline-none"
-            :style="[getMarkerStyle]"
+            v-for="category in categories"
+            :id="category.slug"
+            :key="category.slug"
+            class="relative px-3 py-1 text-sm font-medium rounded-md h-8 text-gray-500 dark:text-gray-400 min-w-fit flex items-center justify-center w-full focus:outline-none transition-colors duration-200 ease-out cursor-pointer hover:text-black dark:hover:text-white"
+            :class="{ 'text-gray-900 dark:text-white relative': isCategory(category.slug) }"
+            @click.prevent="setCategory(category.slug)"
           >
-            <div class="w-full h-full bg-white dark:bg-gray-900 rounded-md shadow-sm" />
+            <p class="w-full">
+              {{ category.label }}
+            </p>
           </div>
-        </ClientOnly>
-        <div
-          v-for="category in categories"
-          :id="category.slug"
-          :key="category.slug"
-          class="relative px-3 py-1 text-sm font-medium rounded-md h-8 text-gray-500 dark:text-gray-400 min-w-fit flex items-center justify-center w-full focus:outline-none transition-colors duration-200 ease-out cursor-pointer hover:text-black dark:hover:text-white"
-          :class="{ 'text-gray-900 dark:text-white relative': isCategory(category.slug) }"
-          @click.prevent="setCategory(category.slug)"
-        >
-          <p class="w-full">
-            {{ category.label }}
-          </p>
         </div>
+        <UPopover>
+          <UButton
+            :icon="isFavorite ? 'i-mdi-filter-variant-remove' : 'i-mdi-filter-variant'"
+            color="primary"
+            variant="soft"
+            size="lg"
+          />
+          <template #panel>
+            <div
+              class="flex p-2 gap-2 items-center cursor-pointer select-none text-subtitle"
+              @click.prevent="toggleFavorite()"
+            >
+              <UIcon v-if="isFavorite" name="i-material-symbols-check-box-outline-rounded" />
+              <UIcon v-else name="i-material-symbols-check-box-outline-blank" />
+              <p>Show favorites only</p>
+            </div>
+          </template>
+        </UPopover>
       </div>
-      <UPopover>
-        <UButton
-          :icon="isFavorite ? 'i-mdi-filter-variant-remove' : 'i-mdi-filter-variant'"
-          color="primary"
-          variant="soft"
-          size="lg"
-        />
-        <template #panel>
-          <div
-            class="flex p-2 gap-2 items-center cursor-pointer select-none text-subtitle"
-            @click.prevent="toggleFavorite()"
-          >
-            <UIcon v-if="isFavorite" name="i-material-symbols-check-box-outline-rounded" />
-            <UIcon v-else name="i-material-symbols-check-box-outline-blank" />
-            <p>Show favorites only</p>
-          </div>
-        </template>
-      </UPopover>
+      <UDivider class="my-2" />
     </div>
-    <UDivider class="my-2" />
     <div v-if="talents && getCategories" class="mt-8">
       <div v-if="talents.length > 0 && !pending" class="grid grid-cols-1 gap-y-4 md:gap-x-12 md:gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
         <div