65 lines
5.9 KiB
Plaintext
65 lines
5.9 KiB
Plaintext
import LanguageSwitcher from "@wrnexus/i18n/components/LanguageSwitcher.wrn"
|
|
|
|
page InternationalizationShowcase {
|
|
seo {
|
|
title = "Internationalization Showcase"
|
|
description = "English, Hindi, and Marathi localization with WRNexusJS."
|
|
}
|
|
|
|
view {
|
|
<main class="min-h-screen bg-[var(--wrn-color-bg)] text-[var(--wrn-color-text)]">
|
|
<header class="border-b border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)]">
|
|
<div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-5 px-6 py-5">
|
|
<div>
|
|
<p class="m-0 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--wrn-color-primary)]" data-t="header.eyebrow">WRNexus i18n</p>
|
|
<h1 class="m-0 mt-1 text-xl font-bold" data-t="header.title">Internationalization showcase</h1>
|
|
</div>
|
|
<LanguageSwitcher
|
|
label="Language / भाषा"
|
|
placeholder="Choose language"
|
|
helperText="Saved in your language cookie"
|
|
/>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mx-auto grid max-w-6xl gap-8 px-6 py-10">
|
|
<section class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-8 shadow-sm">
|
|
<p class="m-0 text-sm font-medium text-[var(--wrn-color-primary)]" data-t="hero.kicker">Three languages, one page</p>
|
|
<h2 class="mb-3 mt-2 text-4xl font-bold tracking-tight" data-t="hero.title">Everything needed for an international product</h2>
|
|
<p class="m-0 max-w-3xl text-lg leading-8 text-[var(--wrn-color-muted)]" data-t="hero.description">The server chooses a language from the cookie or Accept-Language header and renders translated HTML.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 class="mb-2 text-2xl font-bold" data-t="switcher.variantsTitle">Responsive switcher variants</h2>
|
|
<p class="mb-5 mt-0 text-[var(--wrn-color-muted)]" data-t="switcher.variantsDescription">Every variant reads locales from configuration and the active language from the request cookie.</p>
|
|
<div class="grid items-start gap-5 rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-6 md:grid-cols-2">
|
|
<div class="grid gap-2"><strong data-t="switcher.compactTitle">Compact</strong><LanguageSwitcher variant="compact" showHelper="false" label="Language / भाषा" /></div>
|
|
<div class="grid gap-2"><strong data-t="switcher.segmentedTitle">Segmented</strong><LanguageSwitcher variant="segmented" showHelper="false" label="Language / भाषा" /></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 class="mb-4 text-2xl font-bold" data-t="sections.content">Translated content</h2>
|
|
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<article class="demo-card"><span class="icon-[lucide--languages] demo-icon"></span><h3 data-t="cards.text.title">Text translation</h3><p data-t="cards.text.body">Headings, paragraphs, buttons, and labels are rendered on the server.</p></article>
|
|
<article class="demo-card"><span class="icon-[lucide--text-cursor-input] demo-icon"></span><h3 data-t="cards.attributes.title">Attribute translation</h3><label class="mt-3 grid gap-1 text-sm"><span data-t="cards.attributes.label">Search label</span><input class="rounded-xl border border-[var(--wrn-color-border)] bg-transparent px-3 py-2" t:placeholder="cards.attributes.placeholder" /></label></article>
|
|
<article class="demo-card"><span class="icon-[lucide--message-square-more] demo-icon"></span><h3 data-t="cards.interpolation.title">Interpolation</h3><p data-t="cards.interpolation.body">Parameters such as a person's name are inserted safely.</p><a class="demo-link" href="/api/formats" data-t="cards.interpolation.action">Open the dynamic API</a></article>
|
|
<article class="demo-card"><span class="icon-[lucide--copy-plus] demo-icon"></span><h3 data-t="cards.plural.title">Plural rules</h3><p data-t="cards.plural.body">One item and many items follow locale-aware CLDR rules.</p></article>
|
|
<article class="demo-card"><span class="icon-[lucide--indian-rupee] demo-icon"></span><h3 data-t="cards.numbers.title">Numbers and currency</h3><p data-t="samples.number">12,34,567.89</p><p data-t="samples.currency">₹1,234.50</p><p data-t="samples.percent">78%</p></article>
|
|
<article class="demo-card"><span class="icon-[lucide--calendar-days] demo-icon"></span><h3 data-t="cards.time.title">Dates and relative time</h3><p data-t="samples.date">15 August 2026</p><p data-t="samples.relative">3 days ago</p></article>
|
|
<article class="demo-card"><span class="icon-[lucide--list] demo-icon"></span><h3 data-t="cards.list.title">List formatting</h3><p data-t="samples.list">Mumbai, Pune, and Nagpur</p></article>
|
|
<article class="demo-card"><span class="icon-[lucide--route] demo-icon"></span><h3 data-t="cards.fallback.title">Fallback chains</h3><p data-t="cards.fallback.body">Missing regional content falls back to the base language and then English.</p></article>
|
|
<article class="demo-card"><span class="icon-[lucide--file-code-2] demo-icon"></span><h3 data-t="cards.document.title">Document language</h3><p data-t="cards.document.body">The same cookie sets the server-rendered html lang and dir attributes.</p></article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-3xl bg-[var(--wrn-color-primary)] p-8 text-[var(--wrn-color-primary-contrast)]">
|
|
<h2 class="m-0 text-2xl font-bold" data-t="api.title">Try request-aware formatting</h2>
|
|
<p class="mb-5 mt-2 opacity-85" data-t="api.description">The JSON endpoint uses ctx.lang, translations, Intl formatters, interpolation, plurals, and lists.</p>
|
|
<a href="/api/formats" class="inline-flex rounded-xl bg-white px-4 py-2 font-semibold text-slate-900" data-t="api.action">View localized JSON</a>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
}
|
|
}
|