226 lines
13 KiB
Svelte
226 lines
13 KiB
Svelte
<script lang="ts">
|
|
import { Deferred, Link, page } from '@inertiajs/svelte';
|
|
import AppLayout from '@/layouts/AppLayout.svelte';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Trophy, Users, Calendar, User } from 'lucide-svelte';
|
|
|
|
let { publicTournaments, userTournaments } = $props();
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Home',
|
|
href: '/',
|
|
},
|
|
];
|
|
|
|
// Get authentication state from Inertia context
|
|
let user = $derived($page.props.auth?.user ?? null);
|
|
let isAuthenticated = $derived(!!user);
|
|
|
|
// Date formatting helper
|
|
function formatDate(dateStr: string): string {
|
|
return new Date(dateStr).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Home - FlbxCup</title>
|
|
</svelte:head>
|
|
|
|
<Deferred data="publicTournaments">
|
|
{#snippet fallback()}
|
|
<AppLayout {breadcrumbs}>
|
|
<div>Loading...</div>
|
|
</AppLayout>
|
|
{/snippet}
|
|
<AppLayout {breadcrumbs}>
|
|
<div class="space-y-8 px-4 py-6 md:px-8">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-3xl font-bold tracking-tight">Welcome to FlbxCup</h1>
|
|
{#if isAuthenticated}
|
|
<Button>
|
|
<Link href="/tournaments/create" class="flex items-center gap-2">
|
|
<Trophy class="h-4 w-4" />
|
|
Create Tournament
|
|
</Link>
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
<p class="text-lg text-muted-foreground">Discover and manage tournaments with ease</p>
|
|
</div>
|
|
|
|
{#if isAuthenticated}
|
|
<Tabs value="public" class="w-full">
|
|
<TabsList>
|
|
<TabsTrigger value="public">Public Tournaments</TabsTrigger>
|
|
<TabsTrigger value="my">My Tournaments</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="public" class="mt-6">
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{#if !publicTournaments.original.data || publicTournaments.original.data.length === 0}
|
|
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
|
|
<Trophy class="h-10 w-10 text-muted-foreground" />
|
|
<h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
|
|
<p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
|
|
<Button class="mt-4">
|
|
<Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
|
|
</Button>
|
|
</div>
|
|
{/if}
|
|
{#each publicTournaments.original.data as tournament (tournament.id)}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="flex items-center gap-2">
|
|
<Trophy class="h-5 w-5 text-primary" />
|
|
{tournament.name}
|
|
</CardTitle>
|
|
<CardDescription>{tournament.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="flex flex-col gap-2 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<Calendar class="h-4 w-4 text-muted-foreground" />
|
|
<span>{formatDate(tournament.start_date)}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Users class="h-4 w-4 text-muted-foreground" />
|
|
<span>{tournament.max_teams} participants</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button variant="outline" class="w-full">
|
|
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full">
|
|
View Details
|
|
</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="my" class="mt-6">
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full">
|
|
{#if !userTournaments.original.data || userTournaments.original.data.length === 0}
|
|
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
|
|
<Trophy class="h-10 w-10 text-muted-foreground" />
|
|
<h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
|
|
<p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
|
|
<Button class="mt-4">
|
|
<Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
|
|
</Button>
|
|
</div>
|
|
{:else}
|
|
{#each userTournaments.original.data as tournament (tournament.id)}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="flex items-center gap-2">
|
|
<Trophy class="h-5 w-5 text-primary" />
|
|
{tournament.name}
|
|
</CardTitle>
|
|
<CardDescription>{tournament.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="flex flex-col gap-2 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<Calendar class="h-4 w-4 text-muted-foreground" />
|
|
<span>{formatDate(tournament.start_date)}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Users class="h-4 w-4 text-muted-foreground" />
|
|
<span>{tournament.max_teams} participants</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<User class="h-4 w-4 text-muted-foreground" />
|
|
<span>Created by you</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter class="flex gap-2">
|
|
<Button variant="outline" class="flex-1">
|
|
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
|
|
>View</Link
|
|
>
|
|
</Button>
|
|
<Button class="flex-1">
|
|
<Link href={`/tournaments/${tournament.id}/edit`} class="flex items-center justify-center w-full">
|
|
Edit
|
|
</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
{:else}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Join FlbxCup</CardTitle>
|
|
<CardDescription>Create an account to create and manage your own tournaments</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="flex flex-col gap-4 sm:flex-row">
|
|
<Button>
|
|
<a href={route('auth.redirect')} class="flex items-center gap-2">Login with SSO</a>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<div class="space-y-6">
|
|
<h2 class="text-2xl font-semibold tracking-tight">Public Tournaments</h2>
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{#if !publicTournaments.original.data || publicTournaments.original.data.length === 0}
|
|
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
|
|
<Trophy class="h-10 w-10 text-muted-foreground" />
|
|
<h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
|
|
<p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
|
|
<Button class="mt-4">
|
|
<Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
|
|
</Button>
|
|
</div>
|
|
{/if}
|
|
{#each publicTournaments.original.data as tournament (tournament.id)}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle class="flex items-center gap-2">
|
|
<Trophy class="h-5 w-5 text-primary" />
|
|
{tournament.name}
|
|
</CardTitle>
|
|
<CardDescription>{tournament.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="flex flex-col gap-2 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<Calendar class="h-4 w-4 text-muted-foreground" />
|
|
<span>{formatDate(tournament.date)}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Users class="h-4 w-4 text-muted-foreground" />
|
|
<span>{tournament.participantsCount} participants</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button variant="outline" class="w-full">
|
|
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
|
|
>View Details</Link
|
|
>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</AppLayout>
|
|
</Deferred>
|