78 lines
2.2 KiB
Plaintext
78 lines
2.2 KiB
Plaintext
page PlatformShowcase {
|
|
layout = "public"
|
|
render = "hybrid"
|
|
hydrate = "load"
|
|
|
|
state active = "Admin"
|
|
|
|
view {
|
|
<main class="platform-showcase">
|
|
<header>
|
|
<span class="eyebrow">Reactive primitives</span>
|
|
<h1>Reactive platform showcase</h1>
|
|
<p>Switch a dynamic component and verify transition and portal rendering.</p>
|
|
</header>
|
|
<section class="showcase-card">
|
|
<button type="button" @click='active = active === "Admin" ? "Guest" : "Admin"'>Switch component</button>
|
|
<Transition name="fade">
|
|
<Component is={active}>
|
|
<section class="component-case" data-component-case="Admin"><strong>Administrator tools</strong><p>Manage users, permissions, and platform settings.</p></section>
|
|
<section class="component-case" data-component-case="Guest"><strong>Guest dashboard</strong><p>Explore the public workspace and available resources.</p></section>
|
|
</Component>
|
|
</Transition>
|
|
</section>
|
|
<div id="showcase-modal" class="portal-target" aria-live="polite"></div>
|
|
<Portal to="#showcase-modal"><p>Portaled content rendered in its target.</p></Portal>
|
|
</main>
|
|
}
|
|
|
|
style {
|
|
.platform-showcase {
|
|
display: grid;
|
|
max-width: 58rem;
|
|
gap: 1.25rem;
|
|
margin: 3rem auto;
|
|
}
|
|
|
|
.platform-showcase header,
|
|
.showcase-card,
|
|
.component-case {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: var(--wrn-color-primary);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.showcase-card,
|
|
.portal-target {
|
|
padding: 1.25rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: var(--wrn-radius-lg);
|
|
background: var(--wrn-color-surface);
|
|
}
|
|
|
|
.showcase-card button {
|
|
width: fit-content;
|
|
padding: 0.7rem 1rem;
|
|
border: 0;
|
|
border-radius: var(--wrn-radius-md);
|
|
background: var(--wrn-color-primary);
|
|
color: var(--wrn-color-primary-contrast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fade-enter-active {
|
|
animation: platform-fade 180ms ease-out;
|
|
}
|
|
|
|
@keyframes platform-fade {
|
|
from { opacity: 0; transform: translateY(0.25rem); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
}
|
|
}
|