i18n: add Paraglide messages for all events pages (EN + ET)
This commit is contained in:
AlacrisDevs
@@ -6,6 +6,7 @@
|
||||
import type { SupabaseClient } from "@supabase/supabase-js";
|
||||
import type { Database } from "$lib/supabase/types";
|
||||
import { toasts } from "$lib/stores/ui";
|
||||
import * as m from "$lib/paraglide/messages";
|
||||
|
||||
interface EventItem {
|
||||
id: string;
|
||||
@@ -48,13 +49,13 @@
|
||||
let newEventColor = $state("#00A3E0");
|
||||
let creating = $state(false);
|
||||
|
||||
const statusTabs = [
|
||||
{ value: "all", label: "All Events", icon: "apps" },
|
||||
{ value: "planning", label: "Planning", icon: "edit_note" },
|
||||
{ value: "active", label: "Active", icon: "play_circle" },
|
||||
{ value: "completed", label: "Completed", icon: "check_circle" },
|
||||
{ value: "archived", label: "Archived", icon: "archive" },
|
||||
];
|
||||
const statusTabs = $derived([
|
||||
{ value: "all", label: m.events_tab_all(), icon: "apps" },
|
||||
{ value: "planning", label: m.events_tab_planning(), icon: "edit_note" },
|
||||
{ value: "active", label: m.events_tab_active(), icon: "play_circle" },
|
||||
{ value: "completed", label: m.events_tab_completed(), icon: "check_circle" },
|
||||
{ value: "archived", label: m.events_tab_archived(), icon: "archive" },
|
||||
]);
|
||||
|
||||
const presetColors = [
|
||||
"#00A3E0",
|
||||
@@ -100,7 +101,7 @@
|
||||
start: string | null,
|
||||
end: string | null,
|
||||
): string {
|
||||
if (!start && !end) return "No dates set";
|
||||
if (!start && !end) return m.events_no_dates();
|
||||
if (start && !end) return formatDate(start);
|
||||
if (!start && end) return `Until ${formatDate(end)}`;
|
||||
return `${formatDate(start)} — ${formatDate(end)}`;
|
||||
@@ -134,7 +135,7 @@
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
toasts.success(`Event "${created.name}" created`);
|
||||
toasts.success(m.events_created({ name: created.name }));
|
||||
showCreateModal = false;
|
||||
resetForm();
|
||||
goto(`/${data.org.slug}/events/${created.slug}`);
|
||||
@@ -166,7 +167,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Events | {data.org.name}</title>
|
||||
<title>{m.events_title()} | {data.org.name}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex flex-col h-full">
|
||||
@@ -175,9 +176,9 @@
|
||||
class="flex items-center justify-between px-6 py-5 border-b border-light/5"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-h1 font-heading text-white">Events</h1>
|
||||
<h1 class="text-h1 font-heading text-white">{m.events_title()}</h1>
|
||||
<p class="text-body-sm text-light/50 mt-1">
|
||||
Organize and manage your events
|
||||
{m.events_subtitle()}
|
||||
</p>
|
||||
</div>
|
||||
{#if isEditor}
|
||||
@@ -191,7 +192,7 @@
|
||||
style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
|
||||
>add</span
|
||||
>
|
||||
New Event
|
||||
{m.events_new()}
|
||||
</button>
|
||||
{/if}
|
||||
</header>
|
||||
@@ -228,9 +229,9 @@
|
||||
style="font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;"
|
||||
>celebration</span
|
||||
>
|
||||
<p class="text-h3 font-heading mb-2">No events yet</p>
|
||||
<p class="text-h3 font-heading mb-2">{m.events_empty_title()}</p>
|
||||
<p class="text-body text-light/30">
|
||||
Create your first event to get started
|
||||
{m.events_empty_desc()}
|
||||
</p>
|
||||
{#if isEditor}
|
||||
<button
|
||||
@@ -243,7 +244,7 @@
|
||||
style="font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;"
|
||||
>add</span
|
||||
>
|
||||
Create Event
|
||||
{m.events_create()}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -346,18 +347,18 @@
|
||||
onclick={(e) => e.target === e.currentTarget && (showCreateModal = false)}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Create Event"
|
||||
aria-label={m.events_create()}
|
||||
>
|
||||
<div
|
||||
class="bg-night rounded-2xl w-full max-w-lg shadow-2xl border border-light/10"
|
||||
>
|
||||
<div class="flex items-center justify-between p-5 border-b border-light/5">
|
||||
<h2 class="text-h3 font-heading text-white">Create Event</h2>
|
||||
<h2 class="text-h3 font-heading text-white">{m.events_create()}</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="text-light/40 hover:text-white transition-colors"
|
||||
onclick={() => (showCreateModal = false)}
|
||||
aria-label="Close"
|
||||
aria-label={m.btn_close()}
|
||||
>
|
||||
<span
|
||||
class="material-symbols-rounded"
|
||||
@@ -379,13 +380,13 @@
|
||||
<label
|
||||
for="event-name"
|
||||
class="text-body-sm text-light/60 font-body"
|
||||
>Event Name</label
|
||||
>{m.events_form_name()}</label
|
||||
>
|
||||
<input
|
||||
id="event-name"
|
||||
type="text"
|
||||
bind:value={newEventName}
|
||||
placeholder="e.g., Summer Conference 2026"
|
||||
placeholder={m.events_form_name_placeholder()}
|
||||
class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
|
||||
required
|
||||
/>
|
||||
@@ -396,12 +397,12 @@
|
||||
<label
|
||||
for="event-desc"
|
||||
class="text-body-sm text-light/60 font-body"
|
||||
>Description</label
|
||||
>{m.events_form_description()}</label
|
||||
>
|
||||
<textarea
|
||||
id="event-desc"
|
||||
bind:value={newEventDescription}
|
||||
placeholder="Brief description of the event..."
|
||||
placeholder={m.events_form_description_placeholder()}
|
||||
rows="2"
|
||||
class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary resize-none"
|
||||
></textarea>
|
||||
@@ -413,7 +414,7 @@
|
||||
<label
|
||||
for="event-start"
|
||||
class="text-body-sm text-light/60 font-body"
|
||||
>Start Date</label
|
||||
>{m.events_form_start_date()}</label
|
||||
>
|
||||
<input
|
||||
id="event-start"
|
||||
@@ -426,7 +427,7 @@
|
||||
<label
|
||||
for="event-end"
|
||||
class="text-body-sm text-light/60 font-body"
|
||||
>End Date</label
|
||||
>{m.events_form_end_date()}</label
|
||||
>
|
||||
<input
|
||||
id="event-end"
|
||||
@@ -442,13 +443,13 @@
|
||||
<label
|
||||
for="event-venue"
|
||||
class="text-body-sm text-light/60 font-body"
|
||||
>Venue</label
|
||||
>{m.events_form_venue()}</label
|
||||
>
|
||||
<input
|
||||
id="event-venue"
|
||||
type="text"
|
||||
bind:value={newEventVenue}
|
||||
placeholder="e.g., Convention Center"
|
||||
placeholder={m.events_form_venue_placeholder()}
|
||||
class="bg-dark border border-light/10 rounded-xl px-3 py-2 text-body text-white placeholder:text-light/30 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
@@ -457,7 +458,7 @@
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label class="text-body-sm text-light/60 font-body"
|
||||
>Color</label
|
||||
>{m.events_form_color()}</label
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
{#each presetColors as color}
|
||||
@@ -469,7 +470,7 @@
|
||||
: 'border-transparent hover:border-light/30'}"
|
||||
style="background-color: {color}"
|
||||
onclick={() => (newEventColor = color)}
|
||||
aria-label="Select color {color}"
|
||||
aria-label={m.events_form_select_color({ color })}
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -487,14 +488,14 @@
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
{m.btn_cancel()}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!newEventName.trim() || creating}
|
||||
class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{creating ? "Creating..." : "Create Event"}
|
||||
{creating ? m.events_creating() : m.events_create()}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user