Add internationalization support for profile and shared collections; update translations in multiple languages

This commit is contained in:
Sean Morley
2024-11-05 14:40:32 -05:00
parent bcba4f4425
commit c7207ccf52
11 changed files with 93 additions and 18 deletions

View File

@@ -1,5 +1,6 @@
<script lang="ts">
export let data;
import { t } from 'svelte-i18n';
let stats: {
country_count: number;
@@ -36,7 +37,7 @@
<p class="text-center text-lg mt-2">{data.user.username}</p>
{#if data.user && data.user.date_joined}
<p class="ml-1 text-lg text-center mt-4">Member Since</p>
<p class="ml-1 text-lg text-center mt-4">{$t('profile.member_since')}</p>
<div class="flex items-center justify-center text-center">
<iconify-icon icon="mdi:calendar" class="text-2xl"></iconify-icon>
<p class="ml-1 text-xl">
@@ -49,23 +50,23 @@
<!-- divider -->
<div class="divider pr-8 pl-8"></div>
<h1 class="text-center text-2xl font-bold mt-8 mb-2">User Stats</h1>
<h1 class="text-center text-2xl font-bold mt-8 mb-2">{$t('profile.user_stats')}</h1>
<div class="flex justify-center items-center">
<div class="stats stats-vertical lg:stats-horizontal shadow bg-base-200">
<div class="stat">
<div class="stat-title">Adventures</div>
<div class="stat-title">{$t('navbar.adventures')}</div>
<div class="stat-value text-center">{stats.adventure_count}</div>
<!-- <div class="stat-desc">Jan 1st - Feb 1st</div> -->
</div>
<div class="stat">
<div class="stat-title">Collections</div>
<div class="stat-title">{$t('navbar.collections')}</div>
<div class="stat-value text-center">{stats.trips_count}</div>
<!-- <div class="stat-desc">↘︎ 90 (14%)</div> -->
</div>
<div class="stat">
<div class="stat-title">Visited Countries</div>
<div class="stat-title">{$t('profile.visited_countries')}</div>
<div class="stat-value text-center">
{Math.round((stats.country_count / stats.total_countries) * 100)}%
</div>
@@ -75,7 +76,7 @@
</div>
<div class="stat">
<div class="stat-title">Visited Regions</div>
<div class="stat-title">{$t('profile.visited_regions')}</div>
<div class="stat-value text-center">
{Math.round((stats.visited_region_count / stats.total_regions) * 100)}%
</div>