init commit
This commit is contained in:
commit
c9d982669a
461 changed files with 30317 additions and 0 deletions
251
resources/js/pages/Home.svelte
Normal file
251
resources/js/pages/Home.svelte
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
<script lang="ts">
|
||||
import { 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';
|
||||
|
||||
// Mock data for tournaments - replace with API calls when backend is ready
|
||||
const publicTournaments = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Summer Championship 2024',
|
||||
description: 'Annual summer championship with multiple categories',
|
||||
date: '2024-07-15',
|
||||
participantsCount: 48,
|
||||
isPublic: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Regional Qualifiers',
|
||||
description: 'Regional qualifiers for the national tournament',
|
||||
date: '2024-06-05',
|
||||
participantsCount: 32,
|
||||
isPublic: true,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Friendly Tournament',
|
||||
description: 'Casual tournament for all skill levels',
|
||||
date: '2024-05-20',
|
||||
participantsCount: 16,
|
||||
isPublic: true,
|
||||
},
|
||||
];
|
||||
|
||||
// User tournaments - only displayed when logged in
|
||||
const userTournaments = [
|
||||
{
|
||||
id: '4',
|
||||
name: 'My Club Championship',
|
||||
description: 'Internal club championship tournament',
|
||||
date: '2024-06-18',
|
||||
participantsCount: 12,
|
||||
isPublic: false,
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Training Tournament',
|
||||
description: 'Practice tournament for team members',
|
||||
date: '2024-05-10',
|
||||
participantsCount: 8,
|
||||
isPublic: false,
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
|
||||
<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}
|
||||
<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>
|
||||
<Link href={route('login')} class="flex items-center gap-2">Login</Link>
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<Link href={route('register')} class="flex items-center gap-2">Register</Link>
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<Link href={route('auth.redirect')} class="flex items-center gap-2">Login with SSO</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
{#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">
|
||||
{#each publicTournaments 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>
|
||||
</TabsContent>
|
||||
<TabsContent value="my" class="mt-6">
|
||||
{#if userTournaments.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}
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each userTournaments 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 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 variant="secondary" class="flex-1">
|
||||
<Link href={`/tournaments/${tournament.id}/edit`} class="flex items-center justify-center w-full">
|
||||
Edit
|
||||
</Link>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
{:else}
|
||||
<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">
|
||||
{#each publicTournaments 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue