74 lines
2.5 KiB
Svelte
74 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import AdventureCard from '$lib/components/AdventureCard.svelte';
|
|
import type { PageData } from './$types';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
export let data: PageData;
|
|
|
|
import FlagCheckeredVariantIcon from '~icons/mdi/flag-checkered-variant';
|
|
import Airplane from '~icons/mdi/airplane';
|
|
import CityVariantOutline from '~icons/mdi/city-variant-outline';
|
|
|
|
const user = data.user;
|
|
const recentAdventures = data.props.adventures;
|
|
const stats = data.props.stats;
|
|
</script>
|
|
|
|
<div class="container mx-auto p-4">
|
|
<!-- Welcome Message -->
|
|
<div class="mb-8">
|
|
<h1 class="text-4xl font-extrabold">{$t('dashboard.welcome_back')}, {user?.first_name}!</h1>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="stats shadow mb-8 w-full bg-neutral">
|
|
<div class="stat">
|
|
<div class="stat-figure text-primary">
|
|
<FlagCheckeredVariantIcon class="w-10 h-10 inline-block" />
|
|
</div>
|
|
<div class="stat-title text-neutral-content">{$t('dashboard.countries_visited')}</div>
|
|
<div class="stat-value text-primary">{stats.country_count}</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-figure text-secondary">
|
|
<Airplane class="w-10 h-10 inline-block" />
|
|
</div>
|
|
<div class="stat-title text-neutral-content">{$t('dashboard.total_adventures')}</div>
|
|
<div class="stat-value text-secondary">{stats.adventure_count}</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-figure text-success">
|
|
<CityVariantOutline class="w-10 h-10 inline-block" />
|
|
</div>
|
|
<div class="stat-title text-neutral-content">{$t('dashboard.total_visited_regions')}</div>
|
|
<div class="stat-value text-success">{stats.visited_region_count}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Adventures -->
|
|
{#if recentAdventures.length > 0}
|
|
<h2 class="text-3xl font-semibold mb-4">{$t('dashboard.recent_adventures')}</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
|
{#each recentAdventures as adventure}
|
|
<AdventureCard {adventure} user={data.user} readOnly />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Inspiration if there are no recent adventures -->
|
|
{#if recentAdventures.length === 0}
|
|
<div class="flex flex-col items-center justify-center bg-neutral shadow p-8 mb-8 rounded-lg">
|
|
<h2 class="text-3xl font-semibold mb-4">{$t('dashboard.no_recent_adventures')}</h2>
|
|
<p class="text-lg text-center">
|
|
{$t('dashboard.add_some')}
|
|
</p>
|
|
<a href="/adventures" class="btn btn-primary mt-4">{$t('map.add_adventure')}</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<svelte:head>
|
|
<title>Dashboard | AdventureLog</title>
|
|
<meta name="description" content="Home dashboard for AdventureLog." />
|
|
</svelte:head>
|