homepage and logo
This commit is contained in:
parent
c9d982669a
commit
ef6dadb148
12 changed files with 359 additions and 242 deletions
|
|
@ -42,11 +42,6 @@
|
|||
];
|
||||
|
||||
const rightNavItems: NavItem[] = [
|
||||
{
|
||||
title: 'Repository',
|
||||
href: 'https://github.com/oseughu/svelte-starter-kit',
|
||||
icon: Folder,
|
||||
},
|
||||
{
|
||||
title: 'Documentation',
|
||||
href: 'https://laravel.com/docs/starter-kits',
|
||||
|
|
@ -101,9 +96,7 @@
|
|||
</Sheet>
|
||||
</div>
|
||||
|
||||
<Link href={route('dashboard')} class="flex items-center gap-x-2">
|
||||
<AppLogo />
|
||||
</Link>
|
||||
<AppLogo />
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden h-full lg:flex lg:flex-1">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,45 @@
|
|||
<script lang="ts">
|
||||
import AppLogoIcon from '@/components/AppLogoIcon.svelte';
|
||||
import { type Appearance, useAppearance } from '@/hooks/useAppearance.svelte';
|
||||
import { MonitorIcon, Moon, Sun } from 'lucide-svelte';
|
||||
import Button from './ui/button/button.svelte';
|
||||
import { Link } from '@inertiajs/svelte';
|
||||
|
||||
const appearanceManager = useAppearance();
|
||||
// Create a local reactive variable that tracks the hook's value
|
||||
let currentAppearance = $state(appearanceManager.appearance);
|
||||
|
||||
function handleUpdateAppearance(value: Appearance) {
|
||||
appearanceManager.updateAppearance(value);
|
||||
// Immediately update local state to ensure UI reflects the change
|
||||
currentAppearance = value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="inline-flex items-center gap-3">
|
||||
<div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
|
||||
<AppLogoIcon class="size-5 fill-current text-white! dark:text-black!" />
|
||||
<div class="inline-flex w-full justify-around">
|
||||
<div class="inline-flex items-center gap-3">
|
||||
<div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md">
|
||||
<AppLogoIcon class="size-5 object-cover" />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Link href={route('home')} class="flex items-center gap-x-2">
|
||||
<span class="truncate text-sm font-semibold">FlbxCup</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="truncate text-sm font-semibold">Laravel Starter Kit</span>
|
||||
{#if currentAppearance === 'light'}
|
||||
<Button onclick={() => handleUpdateAppearance('dark')}>
|
||||
<Sun class="h-4 w-4" />
|
||||
</Button>
|
||||
{:else if currentAppearance === 'dark'}
|
||||
<Button onclick={() => handleUpdateAppearance('system')}>
|
||||
<Moon class="h-4 w-4" />
|
||||
</Button>
|
||||
{:else}
|
||||
<Button onclick={() => handleUpdateAppearance('light')}>
|
||||
<MonitorIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,9 +4,10 @@
|
|||
import NavUser from '@/components/NavUser.svelte';
|
||||
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
|
||||
import { type NavItem } from '@/types';
|
||||
import { Link } from '@inertiajs/svelte';
|
||||
import { Link, page } from '@inertiajs/svelte';
|
||||
import { BookOpen, Folder, LayoutGrid } from 'lucide-svelte';
|
||||
import AppLogo from './AppLogo.svelte';
|
||||
import Button from './ui/button/button.svelte';
|
||||
|
||||
const mainNavItems: NavItem[] = [
|
||||
{
|
||||
|
|
@ -17,11 +18,6 @@
|
|||
];
|
||||
|
||||
const footerNavItems: NavItem[] = [
|
||||
{
|
||||
title: 'Repository',
|
||||
href: 'https://github.com/oseughu/svelte-starter-kit',
|
||||
icon: Folder,
|
||||
},
|
||||
{
|
||||
title: 'Admin Dashboard',
|
||||
href: '/admin',
|
||||
|
|
@ -36,9 +32,7 @@
|
|||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg">
|
||||
<Link href={route('dashboard')}>
|
||||
<AppLogo />
|
||||
</Link>
|
||||
<AppLogo />
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
|
|
@ -50,6 +44,12 @@
|
|||
|
||||
<SidebarFooter>
|
||||
<NavFooter items={footerNavItems} class="mt-auto" />
|
||||
<NavUser />
|
||||
{#if $page.props.auth.user}
|
||||
<NavUser />
|
||||
{:else}
|
||||
<Button>
|
||||
<a href={route('auth.redirect')} class="flex items-center gap-2">Login</a>
|
||||
</Button>
|
||||
{/if}
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import type { User } from '@/types';
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
user?: User;
|
||||
showEmail?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -12,23 +12,25 @@
|
|||
|
||||
const { getInitials } = useInitials();
|
||||
|
||||
let showAvatar = $derived(user.avatar && user.avatar !== '');
|
||||
let showAvatar = $derived(user?.avatar && user?.avatar !== '');
|
||||
</script>
|
||||
|
||||
<Avatar class="h-8 w-8 overflow-hidden rounded-full">
|
||||
{#if showAvatar}
|
||||
<AvatarImage src={user.avatar} alt={user.name} />
|
||||
{:else}
|
||||
<AvatarFallback class="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
|
||||
{getInitials(user.name)}
|
||||
</AvatarFallback>
|
||||
{/if}
|
||||
</Avatar>
|
||||
{#if user}
|
||||
<Avatar class="h-8 w-8 overflow-hidden rounded-full">
|
||||
{#if showAvatar}
|
||||
<AvatarImage src={user.avatar} alt={user.name} />
|
||||
{:else}
|
||||
<AvatarFallback class="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
|
||||
{getInitials(user.name)}
|
||||
</AvatarFallback>
|
||||
{/if}
|
||||
</Avatar>
|
||||
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-medium">{user.name}</span>
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-medium">{user.name}</span>
|
||||
|
||||
{#if showEmail}
|
||||
<span class="truncate text-xs text-muted-foreground">{user.email}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if showEmail}
|
||||
<span class="truncate text-xs text-muted-foreground">{user.email}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Link, page } from '@inertiajs/svelte';
|
||||
import { Deferred, Link, page } from '@inertiajs/svelte';
|
||||
import AppLayout from '@/layouts/AppLayout.svelte';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
|
@ -7,54 +7,7 @@
|
|||
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,
|
||||
},
|
||||
];
|
||||
|
||||
let { publicTournaments, userTournaments } = $props();
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Home',
|
||||
|
|
@ -80,54 +33,164 @@
|
|||
<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">
|
||||
<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={route('login')} class="flex items-center gap-2">Login</Link>
|
||||
<Link href="/tournaments/create" class="flex items-center gap-2">
|
||||
<Trophy class="h-4 w-4" />
|
||||
Create Tournament
|
||||
</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}
|
||||
</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">
|
||||
{#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.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">
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#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}
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#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.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}
|
||||
</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">
|
||||
{#each publicTournaments as tournament (tournament.id)}
|
||||
{#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">
|
||||
|
|
@ -150,102 +213,16 @@
|
|||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant="outline" class="w-full">
|
||||
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full">
|
||||
View Details
|
||||
</Link>
|
||||
<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>
|
||||
{/if}
|
||||
</div>
|
||||
</AppLayout>
|
||||
</Deferred>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue