992 lines
43 KiB
Plaintext
992 lines
43 KiB
Plaintext
page UI {
|
|
state heroActions = [
|
|
{
|
|
label: "Browse components",
|
|
href: "#component-01",
|
|
icon: "icon-[lucide--blocks]",
|
|
variant: "default",
|
|
color: "primary"
|
|
},
|
|
{
|
|
label: "View metrics",
|
|
href: "#component-14",
|
|
icon: "icon-[lucide--chart-no-axes-combined]",
|
|
variant: "outline",
|
|
color: "primary"
|
|
}
|
|
]
|
|
|
|
state statsItems = [
|
|
{
|
|
label: "Composite components",
|
|
value: "18",
|
|
description: "Shown separately with a practical use case",
|
|
icon: "icon-[lucide--blocks]",
|
|
color: "primary"
|
|
},
|
|
{
|
|
label: "Rendering",
|
|
value: "SSR",
|
|
description: "Server-first WRNexusJS component rendering",
|
|
icon: "icon-[lucide--server]",
|
|
color: "info"
|
|
},
|
|
{
|
|
label: "Responsive",
|
|
value: "Yes",
|
|
description: "Mobile, tablet, and desktop layouts",
|
|
icon: "icon-[lucide--monitor-smartphone]",
|
|
color: "success"
|
|
},
|
|
{
|
|
label: "Theme aware",
|
|
value: "Yes",
|
|
description: "Supports active theme and accent palettes",
|
|
icon: "icon-[lucide--palette]",
|
|
color: "warning"
|
|
}
|
|
]
|
|
|
|
state featureItems = [
|
|
{
|
|
icon: "icon-[lucide--shield-check]",
|
|
title: "Citizen services",
|
|
description: "Expose public safety and citizen-service capabilities.",
|
|
href: "/citizen-services",
|
|
actionLabel: "View services"
|
|
},
|
|
{
|
|
icon: "icon-[lucide--map-pinned]",
|
|
title: "Station directory",
|
|
description: "Help visitors locate stations and jurisdiction contacts.",
|
|
href: "/contact/police-station-directory",
|
|
actionLabel: "Find station"
|
|
},
|
|
{
|
|
icon: "icon-[lucide--radio-tower]",
|
|
title: "Public updates",
|
|
description: "Publish official alerts, notices, and verified information.",
|
|
href: "/media",
|
|
actionLabel: "View updates"
|
|
}
|
|
]
|
|
|
|
state metricItems = [
|
|
{
|
|
label: "Public services",
|
|
value: "24",
|
|
description: "Citizen-facing services available online.",
|
|
icon: "icon-[lucide--hand-heart]",
|
|
trend: "+4",
|
|
trendLabel: "this release",
|
|
trendDirection: "up",
|
|
color: "primary"
|
|
},
|
|
{
|
|
label: "Police stations",
|
|
value: "126",
|
|
description: "Searchable directory entries.",
|
|
icon: "icon-[lucide--landmark]",
|
|
trend: "Updated",
|
|
trendLabel: "today",
|
|
trendDirection: "neutral",
|
|
color: "info"
|
|
},
|
|
{
|
|
label: "Availability",
|
|
value: "99.9",
|
|
suffix: "%",
|
|
description: "Target service availability.",
|
|
icon: "icon-[lucide--activity]",
|
|
trend: "Stable",
|
|
trendLabel: "30 days",
|
|
trendDirection: "positive",
|
|
color: "success"
|
|
}
|
|
]
|
|
|
|
state breadcrumbs = [
|
|
{
|
|
label: "Home",
|
|
href: "/",
|
|
value: "home",
|
|
icon: "icon-[lucide--house]"
|
|
},
|
|
{
|
|
label: "Components",
|
|
href: "/components",
|
|
value: "components"
|
|
},
|
|
{
|
|
label: "Page header",
|
|
value: "page-header",
|
|
current: true
|
|
}
|
|
]
|
|
|
|
state heroVisualItems = [
|
|
{
|
|
label: "Reusable components",
|
|
description: "Compose complete pages using shared UI.",
|
|
value: "108",
|
|
icon: "icon-[lucide--blocks]"
|
|
},
|
|
{
|
|
label: "Theme support",
|
|
description: "Built for light, dark, and accent palettes.",
|
|
value: "Ready",
|
|
icon: "icon-[lucide--palette]"
|
|
},
|
|
{
|
|
label: "Responsive layout",
|
|
description: "Optimized for mobile, tablet, and desktop.",
|
|
value: "100%",
|
|
icon: "icon-[lucide--monitor-smartphone]"
|
|
}
|
|
]
|
|
|
|
seo {
|
|
title = "18 UI Components — Names and Use Cases"
|
|
description = "All 18 WRNexusJS composite UI components shown individually with their names and practical use cases."
|
|
canonical = "/ui-18-components"
|
|
}
|
|
|
|
view {
|
|
<PublicPageShell
|
|
maxWidth="2xl"
|
|
fullWidth="true"
|
|
background="default"
|
|
overflow="hidden"
|
|
minHeight="screen"
|
|
>
|
|
<div
|
|
class="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
id="component-01"
|
|
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm sm:p-8"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
01. PublicPageShell
|
|
</p>
|
|
<h1
|
|
class="mt-3 text-3xl font-bold text-[var(--wire-color-text)] sm:text-4xl"
|
|
>
|
|
PublicPageShell
|
|
</h1>
|
|
<p
|
|
class="mt-3 text-base leading-7 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:
|
|
</strong>
|
|
Provide the outer structure for a complete public page, including maximum width, page background, overflow handling, before/after slots, and minimum-height behavior.
|
|
</p>
|
|
<p
|
|
class="mt-4 rounded-2xl bg-[var(--wire-color-primary-soft)] px-4 py-3 text-sm text-[var(--wire-color-primary-text)]"
|
|
>
|
|
This complete page is rendered inside PublicPageShell.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="component-02"
|
|
class="mx-auto w-full px-4 pb-10 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-4"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
02. AnnouncementBar
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
AnnouncementBar
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Display an important site-wide update, emergency alert, release notice, or time-sensitive action above the primary page content.
|
|
</p>
|
|
</div>
|
|
<AnnouncementBar
|
|
badge="Public notice"
|
|
badgeIcon="icon-[lucide--sparkles]"
|
|
message="All 18 composite components are now available"
|
|
description="Review each component name and its recommended use case on this page."
|
|
icon="icon-[lucide--megaphone]"
|
|
actionLabel="View components"
|
|
actionHref="#component-03"
|
|
actionIcon="icon-[lucide--arrow-down]"
|
|
dismissible="true"
|
|
width="default"
|
|
size="default"
|
|
color="primary"
|
|
variant="outline"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="component-03"
|
|
class="border-y border-[var(--wire-color-border)]"
|
|
>
|
|
<div
|
|
class="mx-auto w-full max-w-7xl px-4 pt-10 sm:px-6 lg:px-8"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
03. PageHeader
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
PageHeader
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Introduce an internal or public page with an eyebrow, title, description, icon, breadcrumbs, and primary or secondary actions.
|
|
</p>
|
|
</div>
|
|
<PageHeader
|
|
eyebrow="Component showcase"
|
|
title="Page headers with clear hierarchy"
|
|
description="Use PageHeader for service pages, directories, legal pages, guides, dashboards, and public information pages."
|
|
icon="icon-[lucide--panel-top]"
|
|
showBreadcrumbs="true"
|
|
breadcrumbs='{breadcrumbs}'
|
|
primaryLabel="Primary action"
|
|
primaryHref="#primary"
|
|
primaryIcon="icon-[lucide--arrow-down]"
|
|
secondaryLabel="Secondary action"
|
|
secondaryHref="#secondary"
|
|
secondaryIcon="icon-[lucide--house]"
|
|
color="primary"
|
|
variant="outline"
|
|
maxWidth="full"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="component-04"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
04. Hero
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
Hero
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Create the primary marketing or public-information introduction with headline emphasis, supporting content, trust items, actions, and an optional visual area.
|
|
</p>
|
|
</div>
|
|
<Hero
|
|
eyebrow="Reusable public UI"
|
|
title="Build polished pages"
|
|
highlight="with consistent hero layouts"
|
|
description="Use a structured visual panel on the right side."
|
|
layout="split"
|
|
visualPosition="right"
|
|
fullBleed="true"
|
|
maxWidth="full"
|
|
size="lg"
|
|
color="primary"
|
|
variant="gradient"
|
|
visualEyebrow="Component system"
|
|
visualTitle="Everything needed for public pages"
|
|
visualDescription="Reusable building blocks with consistent layout, theming, and responsive behavior."
|
|
visualIcon="icon-[lucide--layout-dashboard]"
|
|
visualItems='{heroVisualItems}'
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="component-05"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
05. HeroActions
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
HeroActions
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Group hero buttons with consistent alignment, mobile stacking, orientation, sizing, variants, and responsive behavior.
|
|
</p>
|
|
<div
|
|
class="mt-6"
|
|
>
|
|
<HeroActions
|
|
actions='{heroActions}'
|
|
align="left"
|
|
orientation="horizontal"
|
|
stackOnMobile="true"
|
|
fullWidthMobile="true"
|
|
size="default"
|
|
color="primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="component-06"
|
|
class="mx-auto w-full px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
06. StatsBar
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
StatsBar
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Present a compact row of key facts, service counts, performance indicators, trust signals, or public portal statistics.
|
|
</p>
|
|
</div>
|
|
<StatsBar
|
|
items='{statsItems}'
|
|
columns="4"
|
|
compact="true"
|
|
dividers="true"
|
|
icons="true"
|
|
color="primary"
|
|
variant="outline"
|
|
maxWidth="xl"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="component-07"
|
|
class="py-4"
|
|
>
|
|
<div
|
|
class="mx-auto w-full max-w-7xl px-4 pb-5 sm:px-6 lg:px-8"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
07. Section
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
Section
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Create predictable page sections with shared spacing, width constraints, surfaces, borders, and responsive vertical rhythm.
|
|
</p>
|
|
</div>
|
|
<Section
|
|
spacing="lg"
|
|
maxWidth="xl"
|
|
variant="soft"
|
|
borderTop="true"
|
|
borderBottom="true"
|
|
>
|
|
<div
|
|
class="p-6 text-center"
|
|
>
|
|
<p
|
|
class="font-semibold text-[var(--wire-color-text)]"
|
|
>
|
|
Content placed inside a Section component
|
|
</p>
|
|
<p
|
|
class="mt-2 text-sm text-[var(--wire-color-text-muted)]"
|
|
>
|
|
The component owns spacing, surface, borders, and content width.
|
|
</p>
|
|
</div>
|
|
</Section>
|
|
</div>
|
|
|
|
<div
|
|
id="component-08"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
08. SectionHeader
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
SectionHeader
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Add a consistent heading block to content sections, including eyebrow text, description, icon slot, action slot, alignment, and heading level.
|
|
</p>
|
|
</div>
|
|
<SectionHeader
|
|
eyebrow="Operational overview"
|
|
title="A reusable heading for every section"
|
|
description="Use this component before grids, lists, forms, reports, service collections, and related-content blocks."
|
|
align="split"
|
|
size="default"
|
|
color="primary"
|
|
headingLevel="2"
|
|
maxWidth="3xl"
|
|
>
|
|
<div
|
|
data-slot="icon"
|
|
>
|
|
<span
|
|
class="inline-flex size-11 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
|
|
>
|
|
<span
|
|
class="icon-[lucide--heading-2] size-5"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div
|
|
data-slot="actions"
|
|
>
|
|
<a
|
|
href="#component-09"
|
|
class="font-semibold text-[var(--wire-color-primary)]"
|
|
>
|
|
Next component
|
|
</a>
|
|
</div>
|
|
</SectionHeader>
|
|
</div>
|
|
|
|
<div
|
|
id="component-09"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
09. MarketingSectionHeader
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
MarketingSectionHeader
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Introduce marketing, services, solutions, features, benefits, case studies, or product sections with a prominent optional action.
|
|
</p>
|
|
</div>
|
|
<MarketingSectionHeader
|
|
eyebrow="Public services"
|
|
title="Discover important services in one place"
|
|
description="Use this header above service cards, solutions, case studies, product capabilities, and campaign sections."
|
|
align="split"
|
|
color="primary"
|
|
actionLabel="View all services"
|
|
actionHref="/citizen-services"
|
|
actionIcon="icon-[lucide--arrow-right]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="component-10"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
10. TextLink
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
TextLink
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Provide a lightweight inline action for “view all,” “learn more,” “open documentation,” or related navigation without using a full button.
|
|
</p>
|
|
<div
|
|
class="mt-6"
|
|
>
|
|
<TextLink
|
|
label="Open component documentation"
|
|
href="/components"
|
|
icon="icon-[lucide--book-open]"
|
|
iconPosition="start"
|
|
showArrow="true"
|
|
underline="false"
|
|
color="primary"
|
|
variant="button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="component-11"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
11. FeatureGrid
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
FeatureGrid
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Arrange services, features, solutions, benefits, or linked capabilities in a responsive equal-height grid.
|
|
</p>
|
|
</div>
|
|
<FeatureGrid
|
|
columns="3"
|
|
tabletColumns="2"
|
|
mobileColumns="1"
|
|
gap="lg"
|
|
equalHeight="true"
|
|
align="stretch"
|
|
maxWidth="full"
|
|
>
|
|
{#each featureItems as item, index}
|
|
<FeatureCard
|
|
icon="{item.icon}"
|
|
title="{item.title}"
|
|
description="{item.description}"
|
|
href="{item.href}"
|
|
actionLabel="Explore services"
|
|
badge="Public"
|
|
badgeColor="secondary"
|
|
color="primary"
|
|
variant="default"
|
|
hover="lift"
|
|
/>
|
|
{/each}
|
|
</FeatureGrid>
|
|
</div>
|
|
|
|
<div
|
|
id="component-12"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
12. FeatureCard
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
FeatureCard
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Present a linked feature or service with an icon, title, description, badge, visual variant, hover treatment, and action label.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="max-w-md"
|
|
>
|
|
<FeatureCard
|
|
icon="icon-[lucide--shield-check]"
|
|
title="Citizen safety services"
|
|
description="Create a clear route for crime reporting, complaints, certificates, and emergency information."
|
|
href="/citizen-services"
|
|
actionLabel="Explore services"
|
|
badge="Public"
|
|
badgeColor="primary"
|
|
color="primary"
|
|
variant="default"
|
|
hover="lift"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="component-13"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
13. FeatureIconCard
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
FeatureIconCard
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Highlight a capability where the icon treatment should carry stronger visual importance than a standard feature card.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="max-w-md"
|
|
>
|
|
<FeatureIconCard
|
|
icon="icon-[lucide--file-search]"
|
|
iconSize="lg"
|
|
iconVariant="soft"
|
|
title="Track public requests"
|
|
description="Allow citizens to follow complaints, certificates, and verification requests through a clear status journey."
|
|
href="/citizen-services/track-complaint"
|
|
actionLabel="Track request"
|
|
badge="Fast"
|
|
color="primary"
|
|
variant="raised"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="component-14"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
14. MetricGrid
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
MetricGrid
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Arrange operational values, KPIs, public statistics, usage summaries, or service indicators in a responsive grid.
|
|
</p>
|
|
</div>
|
|
<MetricGrid
|
|
items='{metricItems}'
|
|
columns="3"
|
|
tabletColumns="2"
|
|
mobileColumns="1"
|
|
gap="md"
|
|
equalHeight="true"
|
|
dividers="false"
|
|
color="primary"
|
|
variant="default"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="component-15"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
15. MetricCard
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
MetricCard
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Display one metric with a label, value, suffix, description, icon, trend, status direction, and optional action.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="max-w-md"
|
|
>
|
|
<MetricCard
|
|
label="Service availability"
|
|
value="99.9"
|
|
suffix="%"
|
|
description="Target availability for essential public services."
|
|
icon="icon-[lucide--activity]"
|
|
trend="Stable"
|
|
trendLabel="last 30 days"
|
|
trendDirection="positive"
|
|
href="/status"
|
|
actionLabel="Open status"
|
|
color="success"
|
|
variant="default"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="component-16"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="mb-6"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
16. SplitHero
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
SplitHero
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Build a two-column introduction that balances descriptive content and a visual, screenshot, feature panel, image, map, or media block.
|
|
</p>
|
|
</div>
|
|
<SplitHero
|
|
eyebrow="Balanced layout"
|
|
title="Combine detailed content"
|
|
highlight="with a strong visual panel"
|
|
description="Use SplitHero for product explanations, department introductions, public campaigns, service walkthroughs, and feature storytelling."
|
|
primaryLabel="View public services"
|
|
primaryHref="/citizen-services"
|
|
primaryIcon="icon-[lucide--arrow-right]"
|
|
secondaryLabel="Contact department"
|
|
secondaryHref="/contact"
|
|
secondaryIcon="icon-[lucide--phone]"
|
|
visualPosition="right"
|
|
ratio="balanced"
|
|
color="primary"
|
|
variant="default"
|
|
>
|
|
<div
|
|
data-slot="visual"
|
|
>
|
|
<div
|
|
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-8 shadow-lg"
|
|
>
|
|
<span
|
|
class="icon-[lucide--layout-dashboard] size-14 text-[var(--wire-color-primary)]"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<h3
|
|
class="mt-5 text-xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
Visual content area
|
|
</h3>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
Add a product screenshot, service diagram, dashboard, image, or interactive preview.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SplitHero>
|
|
</div>
|
|
|
|
<div
|
|
id="component-17"
|
|
class="py-12"
|
|
>
|
|
<div
|
|
class="mx-auto w-full max-w-7xl px-4 pb-6 sm:px-6 lg:px-8"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
17. CTASection
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
CTASection
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Close a page or major section with a strong conversion action such as registration, sign-in, contact, application, service request, or documentation access.
|
|
</p>
|
|
</div>
|
|
<CTASection
|
|
eyebrow="Ready to continue"
|
|
title="Build public pages with reusable components"
|
|
description="Keep application pages focused on content and business data while the shared UI package owns consistent presentation."
|
|
icon="icon-[lucide--rocket]"
|
|
align="center"
|
|
size="lg"
|
|
color="primary"
|
|
variant="gradient"
|
|
primaryLabel="Use these components"
|
|
primaryHref="/components"
|
|
primaryIcon="icon-[lucide--blocks]"
|
|
secondaryLabel="Back to home"
|
|
secondaryHref="/"
|
|
secondaryIcon="icon-[lucide--house]"
|
|
maxWidth="xl"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
id="component-18"
|
|
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
|
>
|
|
<div
|
|
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
|
|
>
|
|
<p
|
|
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
|
>
|
|
18. BackToTop
|
|
</p>
|
|
<h2
|
|
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
BackToTop
|
|
</h2>
|
|
<p
|
|
class="mt-2 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
<strong
|
|
class="text-[var(--wire-color-text)]"
|
|
>
|
|
Use case:</strong> Provide a floating control on long pages that returns visitors to the top and can optionally show scroll progress.
|
|
</p>
|
|
<p
|
|
class="mt-4 text-sm text-[var(--wire-color-text-muted)]"
|
|
>
|
|
Scroll down the page until the floating button becomes visible.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
data-slot="after"
|
|
>
|
|
<BackToTop
|
|
threshold="400"
|
|
label="Back to top"
|
|
ariaLabel="Scroll back to the top of the 18 component showcase"
|
|
icon="icon-[lucide--arrow-up]"
|
|
position="right"
|
|
offset="md"
|
|
behavior="smooth"
|
|
showProgress="true"
|
|
color="primary"
|
|
variant="solid"
|
|
/>
|
|
</div>
|
|
</PublicPageShell>
|
|
}
|
|
}
|