mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-14 12:14:42 +01:00
34 lines
791 B
Vue
34 lines
791 B
Vue
<script setup lang="ts">
|
|
import type {Skill} from '~~/types'
|
|
|
|
defineProps({
|
|
skill: Object as PropType<Skill>,
|
|
})
|
|
|
|
const { $colorMode } = useNuxtApp()
|
|
const isLight = computed(() => $colorMode.value === 'light')
|
|
</script>
|
|
|
|
<template>
|
|
<li
|
|
v-if="skill"
|
|
class="flex items-center gap-2 rounded-md px-2 py-3 duration-300 md:hover:bg-gray-100 md:dark:hover:bg-neutral-800"
|
|
>
|
|
<div class="flex items-center">
|
|
<UIcon
|
|
v-if="isLight"
|
|
:name="skill.icon.light ? skill.icon.light : skill.icon"
|
|
dynamic
|
|
size="20"
|
|
/>
|
|
<UIcon
|
|
v-else
|
|
:name="skill.icon.dark ? skill.icon.dark : skill.icon"
|
|
dynamic
|
|
size="20"
|
|
/>
|
|
</div>
|
|
<span class="text-sm text-subtitle">{{ skill.name }}</span>
|
|
</li>
|
|
</template>
|