Merge pull request #35 from web3privacy/dk/images-&-images-fix

Dk/images & images fix

components/Card.vue

@@ -40,16 +40,18 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
         h="48px lg:64px"
         :class="switcher ? '' : 'lg:max-w-full! lg:w-full '"
       >
-        <NuxtImg
+        <ClientOnly>
-          :src="project?.image || '/no-image-1-1.svg'"
+          <NuxtImg
-          class="w-full h-auto"
+            :src="project?.image || '/no-image-1-1.svg'"
-          max-h="md:64px 48px"
+            class="w-full h-auto"
-          max-w="md:64px 48px"
+            max-h="md:64px 48px"
-          self-center
+            max-w="md:64px 48px"
-          z-10
+            self-center
-          object-fit
+            z-10
-          bg="#121212"
+            object-fit
-        />
+            bg="#121212"
+          />
+        </ClientOnly>
         <div
           flex
           flex-col

components/CategorySelectBox.vue

@@ -27,6 +27,7 @@ function onOptionSelected(value: string | number) {
     <div class="relative font-700 font-24px">
       <HeadlessListboxButton
         class="relative cursor-pointer py-6px px-14px text-left border-2px bg-app-white text-app-black text-xs sm:text-sm sm:leading-6"
+        :class="{ 'text-app-danger!': isOptionSelected?.value === 'sunset' }"
       >
         <span class="block truncate mr-8px font">{{ isOptionSelected?.label }} <span
           v-if="titleShowCount"
@@ -58,7 +59,7 @@ function onOptionSelected(value: string | number) {
           >
             <li
               class="w-full relative cursor-pointer select-none py-8px p-16px bg-app-black text-app-white"
-              :class="[active ? 'text-app-white' : 'text-app-white']"
+              :class="[active ? 'text-app-white' : 'text-app-white', { 'text-app-danger!': option.value === 'sunset' }]"
             >
               <span
                 class="block truncate"

components/Project/ProjectGrid.vue

@@ -49,7 +49,6 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
         items-center
         gap-x-12px
         w-full
-        mb="8px lg:16px"
       >
         <h2
           text="app-white 16px lg:24px"
@@ -148,6 +147,7 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
         gap-16px
         text-white
         w-full
+        mb="8px lg:24px"
       >
         <Card
           v-for="project in group.projects"

components/Project/ProjectHeading.vue

@@ -25,14 +25,25 @@ const logo = props.project?.logos?.at(0)?.url
     items-center
     lg:gap-32px
   >
-    <NuxtImg
+    <ClientOnly>
-      max-w-200px
+      <div
-      max-h-200px
+        max-w-200px
-      shrink
+        max-h-200px
-      border="1px app-text-grey"
+        shrink
-      :src="logo ?? '/no-image-1-1.svg'"
+        relative
-      class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] "
+      >
-    />
+        <NuxtImg
+          border="1px app-text-grey"
+          :src="logo ?? '/no-image-1-1.svg'"
+          class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] "
+        />
+        <div flex items-center gap-4px absolute top-12px right-12px bg-app-danger text-12px leading-16px font-bold px-8px py-4px rounded-full v-if="project.sunset">
+          <UnoIcon i-material-symbols-dangerous text-16px />
+          SUNSET
+          <p></p>
+        </div>
+      </div>
+    </ClientOnly>
     <div
       grow
       w-full
@@ -216,7 +227,14 @@ const logo = props.project?.logos?.at(0)?.url
               {{ project.percentage }} %
             </div>
           </div>
-          <div col-span-4 flex items-center justify-center w-full v-if="selectedMobileRating && !isLargeScreen">
+          <div
+            v-if="selectedMobileRating && !isLargeScreen"
+            col-span-4
+            flex
+            items-center
+            justify-center
+            w-full
+          >
             <ProjectRating
               :rating="selectedMobileRating"
               :percentage="selectedMobileRating.points"

composables/useData.ts

@@ -51,9 +51,9 @@ export const useData = defineStore('data', () => {
       const data = await $fetch<{
         categories: Category[]
         projects: Project[]
-        project_phase: { id: string, name: string }[]
+        phases: { id: string, name: string }[]
-        asset_custody_type: { id: string, name: string }[]
+        custodys: { id: string, name: string }[]
-        sign_in_type_requirments: { id: string, name: string }[]
+        requirements: { id: string, name: string }[]
         usecases: Usecase[]
         ecosystems: Ecosystem[]
         assets: Asset[]
@@ -73,9 +73,9 @@ export const useData = defineStore('data', () => {
       features.value = data.features
       ranks.value = data.ranks
 
-      projectPhase.value = data.project_phase?.map(p => ({ id: p.id.toLowerCase(), name: p.name }))
+      projectPhase.value = data.phases?.map(p => ({ id: p.id.toLowerCase(), name: p.name }))
-      assetCustody.value = data.asset_custody_type.map(a => ({ id: a.id.toLowerCase(), name: a.name }))
+      assetCustody.value = data.custodys.map(a => ({ id: a.id.toLowerCase(), name: a.name }))
-      signInRequirments.value = data.sign_in_type_requirments.map(s => ({ id: s.id.toLowerCase(), name: s.name }))
+      signInRequirments.value = data.requirements.map(s => ({ id: s.id.toLowerCase(), name: s.name }))
     }
     catch (e) {
       console.error(e)
@@ -129,7 +129,7 @@ export const useData = defineStore('data', () => {
         selectedCategoryId.value !== 'all' ? project.categories.includes(selectedCategoryId.value) : true,
       )
       .filter(project =>
-        selectedUsecaseId.value !== 'all' ? project.usecases?.map(u => u.toLowerCase()).includes(selectedUsecaseId.value.toLowerCase()) : true,
+        selectedUsecaseId.value !== 'all' ? selectedUsecaseId.value === 'sunset' ? project.sunset : project.usecases?.map(u => u.toLowerCase()).includes(selectedUsecaseId.value.toLowerCase()) : true,
       )
       .filter(project =>
         selectedEcosystemId.value !== 'all' ? project.ecosystem?.map(e => e.toLowerCase()).includes(selectedEcosystemId.value.toLowerCase()) : true,
@@ -204,7 +204,7 @@ export const useData = defineStore('data', () => {
       }
     }).sort((a, b) => b.projects.length - a.projects.length)
 
-    return groupedProjects
+    return groupedProjects.filter(group => group.projects.length > 0)
   })
 
   const filteredProjectsCount = computed(() => filteredProjects.value.length)

layouts/default.vue

@@ -124,7 +124,6 @@ watch([scrollY, top, y], (newValues, oldValues) => {
               />
             </div>
           </div>
-          {{ selectedAssetsUsedId }}
           <slot />
         </div>
       </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "develitesse-nuxt",
   "private": true,
-  "packageManager": "pnpm@9.10.0",
+  "packageManager": "pnpm@9.11.0",
   "scripts": {
     "build": "nuxt build",
     "cleanup": "nuxt cleanup",