kamilcraft-api/resources/js/Share/ProjectsList.vue
2023-07-28 12:18:13 +02:00

37 lines
1.3 KiB
Vue

<script setup>
defineProps({
projects: {
type: Array,
required: true,
}
});
</script>
<template>
<section class="bg-gray-100 rounded-md p-4">
<header class="flex justify-between items-center pb-4">
<h2 class="text-2xl font-roboto font-light">Projekty</h2>
<InertiaLink as="button" href="/dashboard/project/create" class="bg-blue-400 hover:bg-blue-500 text-white px-2 py-1">Dodaj nowy</InertiaLink>
</header>
<ul v-if="projects.length" class="flex flex-col gap-2">
<li
v-for="(project, key) in projects"
:key="key"
>
<div class="flex items-center justify-between px-3 py-2 bg-white hover:bg-zinc-300 cursor-pointer">
<InertiaLink :href="`/dashboard/project/${project.id}`">{{ project.title }}</InertiaLink>
<div>
<InertiaLink
as="button"
class="px-2 py-1 bg-green-200"
:href="`/dashboard/project/${project.id}`">Edit</InertiaLink>
</div>
</div>
</li>
</ul>
<div v-else>
Empty
</div>
</section>
</template>