77 lines
2.4 KiB
Plaintext
77 lines
2.4 KiB
Plaintext
page ExistingComponentsShowcase {
|
|
layout = "none"
|
|
|
|
state cards = [
|
|
{
|
|
title: "Citizen services",
|
|
description: "Access applications, certificates and verification services.",
|
|
icon: "icon-[lucide--layout-grid]",
|
|
href: "/services"
|
|
},
|
|
{
|
|
title: "Public safety",
|
|
description: "Read verified safety information and important advisories.",
|
|
icon: "icon-[lucide--shield-check]",
|
|
href: "/safety"
|
|
}
|
|
]
|
|
|
|
state tabs = [
|
|
{ value: "overview", label: "Overview", title: "Overview", description: "A complete view of the redesigned component system." },
|
|
{ value: "accessibility", label: "Accessibility", title: "Accessible by default", description: "Keyboard, focus and semantic behavior remain part of every component." }
|
|
]
|
|
|
|
view {
|
|
<PublicPageShell fullWidth="true">
|
|
<Section spacing="lg">
|
|
<SectionHeader
|
|
eyebrow="WRNexus UI"
|
|
title="Existing component redesign"
|
|
description="Replacement implementations preserve the 0.5.11 public contracts while improving visual consistency."
|
|
headingLevel="1"
|
|
size="lg"
|
|
/>
|
|
|
|
<Grid columns="3" gap="md" class="mt-10">
|
|
{#each cards as item}
|
|
<Card
|
|
title='{item.title}'
|
|
description='{item.description}'
|
|
actionLabel="Open"
|
|
actionHref='{item.href}'
|
|
hover="lift"
|
|
>
|
|
<div class="mb-5 flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
|
|
<span class='{item.icon + " size-6"}' aria-hidden="true"></span>
|
|
</div>
|
|
</Card>
|
|
{/each}
|
|
</Grid>
|
|
</Section>
|
|
|
|
<Section variant="soft" spacing="lg" borderTop="true" borderBottom="true">
|
|
<Columns columns="2" gap="lg">
|
|
<SearchBox
|
|
label="Search services"
|
|
name="q"
|
|
placeholder="Search services, notices or offices"
|
|
/>
|
|
|
|
<Map
|
|
title="Service locations"
|
|
description="Use the default slot to mount the selected map provider."
|
|
items='{[
|
|
{ label: "Head office", x: 30, y: 35 },
|
|
{ label: "Service centre", x: 65, y: 55 }
|
|
]}'
|
|
/>
|
|
</Columns>
|
|
</Section>
|
|
|
|
<Section spacing="lg">
|
|
<Tabs items='{tabs}' active="overview" />
|
|
</Section>
|
|
</PublicPageShell>
|
|
}
|
|
}
|