woodpecker/web/src/components/atomic/ListItem.vue
2024-12-26 13:06:17 +01:00

21 lines
569 B
Vue

<template>
<component
:is="to ? 'router-link' : clickable ? 'button' : 'div'"
:to="to"
class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
:class="{
'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
}"
>
<slot />
</component>
</template>
<script lang="ts" setup>
import type { RouteLocationRaw } from 'vue-router';
defineProps<{
clickable?: boolean;
to?: RouteLocationRaw;
}>();
</script>