94 lines
3.3 KiB
Vue
94 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { Folder, Plus } from 'lucide-vue-next';
|
|
import Heading from '@/components/Heading.vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { create, index, show } from '@/routes/projects';
|
|
import type { BreadcrumbItem, ProjectsIndexPageProps } from '@/types';
|
|
|
|
defineProps<ProjectsIndexPageProps>();
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Projects',
|
|
href: index(),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<Head title="Projects" />
|
|
|
|
<div class="flex flex-1 flex-col gap-6 p-4">
|
|
<div
|
|
class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
|
|
>
|
|
<Heading
|
|
title="Projects"
|
|
description="Create and browse project spaces that will later host boards, backlog, and settings."
|
|
/>
|
|
|
|
<Button as-child>
|
|
<Link :href="create()">
|
|
<Plus class="size-4" />
|
|
New project
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div
|
|
v-if="projects.length === 0"
|
|
class="rounded-xl border border-dashed px-6 py-10 text-center text-sm text-muted-foreground"
|
|
>
|
|
No projects exist yet. Create the first one to start building
|
|
out board, backlog, and settings areas.
|
|
</div>
|
|
|
|
<div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
<Link
|
|
v-for="project in projects"
|
|
:key="project.id"
|
|
:href="show(project.id)"
|
|
class="group block"
|
|
>
|
|
<Card
|
|
class="h-full border-border/80 transition-colors group-hover:border-primary/40"
|
|
>
|
|
<CardHeader class="gap-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="space-y-1">
|
|
<CardTitle>{{ project.name }}</CardTitle>
|
|
<CardDescription>
|
|
Project workspace entry point
|
|
</CardDescription>
|
|
</div>
|
|
|
|
<Badge variant="outline" class="px-2.5 py-1">
|
|
{{ project.key }}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent
|
|
class="flex items-center gap-2 text-sm text-muted-foreground"
|
|
>
|
|
<Folder class="size-4" />
|
|
Open board, backlog, and settings hub
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|