arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-01-14 12:14:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve small details

Browse Source
This commit is contained in:
Arthur Danjou
2023-08-20 23:32:09 +02:00
parent 4432d36abf
commit 02ddb76d39
3 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/composables/useTalents.ts
View File

@@ -7,8 +7,13 @@ export async function useTalents() {
data: getCategories,
} = await $trpc.talents.getCategories.useQuery()
function getCategoryById(id: number) {
return getCategories.value?.find(category => category.id === id)?.name || 'Not Found'
}
return {
getTalents,
getCategories,
getCategoryById,
}
}

11
src/pages/talents.vue
View File

@@ -9,7 +9,7 @@ const talents = ref<Talent[]>()
const currentFavorite = ref<boolean>(false)
const currentCategory = ref('all')
const { getCategories, getTalents } = await useTalents()
const { getCategories, getTalents, getCategoryById } = await useTalents()
talents.value = await getTalents(currentCategory.value, currentFavorite.value)
@@ -106,7 +106,7 @@ function getColor() {
class="group relative flex flex-col justify-between"
>
<div class="flex gap-6 items-center">
<img :src="talent.logo" class="h-8 w-8 rounded-md">
<img :src="talent.logo" class="z-20 h-8 w-8 rounded-md">
<div>
<h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
<div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
@@ -127,6 +127,13 @@ function getColor() {
</p>
</div>
</div>
<div class="flex gap-2 z-10">
<span
v-for="category in talent.categories"
:key="category"
class="text-[.7rem] px-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
>{{ getCategoryById(category.categoryId) }}</span>
</div>
<p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
<UIcon name="i-ph-link-bold" />
<span class="ml-2">{{ talent.website.replace('https://', '') }}</span>

2
src/pages/work.vue
View File

@@ -47,7 +47,7 @@ const { data: projects } = await useProjects()
<span
v-for="tag in project.tags"
:key="tag"
class="text-xs p-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
class="text-[.7rem] px-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
>{{ tag }}</span>
</div>
<p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor()">