eewing
49 lines
1.7 KiB
Svelte
49 lines
1.7 KiB
Svelte
<script lang="ts">
|
||
import { Button } from "$lib/components/ui/button";
|
||
import { Card, CardContent } from "$lib/components/ui/card";
|
||
|
||
let { data }: { data: { transactions: { id: string }[] } } = $props();
|
||
const transactions = $derived(data?.transactions ?? []);
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>Transactions – Stackq</title>
|
||
</svelte:head>
|
||
|
||
<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
|
||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<a href="/" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to main">Back</a>
|
||
<h1 class="text-xl font-semibold sm:text-2xl">Transactions</h1>
|
||
</div>
|
||
<a href="/transactions/new" class="block shrink-0">
|
||
<Button class="w-full sm:w-auto">New transaction</Button>
|
||
</a>
|
||
</div>
|
||
|
||
{#if transactions.length === 0}
|
||
<Card>
|
||
<CardContent class="flex flex-col items-center justify-center gap-4 py-12">
|
||
<p class="text-muted-foreground text-center text-sm">No transactions yet.</p>
|
||
<p class="text-muted-foreground text-center text-xs">Create a transaction to get started.</p>
|
||
<a href="/transactions/new">
|
||
<Button variant="outline">New transaction</Button>
|
||
</a>
|
||
<a href="/">
|
||
<Button variant="ghost">Back to home</Button>
|
||
</a>
|
||
</CardContent>
|
||
</Card>
|
||
{:else}
|
||
<div class="flex flex-col gap-2">
|
||
{#each transactions as tx (tx.id)}
|
||
<Card>
|
||
<CardContent class="p-4">
|
||
<a href="/transactions/{tx.id}" class="font-medium hover:underline">Transaction {tx.id}</a>
|
||
</CardContent>
|
||
</Card>
|
||
{/each}
|
||
</div>
|
||
{/if}
|
||
</main>
|