73 lines
2.4 KiB
Vue
73 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { KanbanSquare, ListTodo, Settings2 } from 'lucide-vue-next';
|
|
import { index as backlogIndex } from '@/routes/projects/backlog';
|
|
import { index as boardIndex } from '@/routes/projects/board';
|
|
import { index as settingsIndex } from '@/routes/projects/settings';
|
|
import type { ProjectTabsProps } from '@/types';
|
|
|
|
defineProps<ProjectTabsProps>();
|
|
</script>
|
|
|
|
<template>
|
|
<nav
|
|
aria-label="Project sections"
|
|
class="border-outline-variant/70 flex min-w-max items-center gap-1 border-b"
|
|
>
|
|
<Link
|
|
:href="backlogIndex(project.id)"
|
|
prefetch
|
|
:class="[
|
|
'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
|
|
active === 'backlog'
|
|
? 'text-primary'
|
|
: 'text-muted-foreground hover:text-foreground',
|
|
]"
|
|
>
|
|
<ListTodo class="size-4" />
|
|
Backlog
|
|
<span
|
|
v-if="active === 'backlog'"
|
|
class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
|
|
/>
|
|
</Link>
|
|
|
|
<Link
|
|
:href="boardIndex(project.id)"
|
|
prefetch
|
|
:class="[
|
|
'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
|
|
active === 'board'
|
|
? 'text-primary'
|
|
: 'text-muted-foreground hover:text-foreground',
|
|
]"
|
|
>
|
|
<KanbanSquare class="size-4" />
|
|
Board
|
|
<span
|
|
v-if="active === 'board'"
|
|
class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
|
|
/>
|
|
</Link>
|
|
|
|
<Link
|
|
v-if="canManageProject"
|
|
:href="settingsIndex(project.id)"
|
|
prefetch
|
|
:class="[
|
|
'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
|
|
active === 'settings'
|
|
? 'text-primary'
|
|
: 'text-muted-foreground hover:text-foreground',
|
|
]"
|
|
>
|
|
<Settings2 class="size-4" />
|
|
Settings
|
|
<span
|
|
v-if="active === 'settings'"
|
|
class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
|
|
/>
|
|
</Link>
|
|
</nav>
|
|
</template>
|