38 lines
1.3 KiB
Plaintext
38 lines
1.3 KiB
Plaintext
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
|
|
|
|
component StyledIcon {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
title: string = "Styled Icon"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
variant: string = "default"
|
|
class: string = ""
|
|
}
|
|
view {
|
|
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--styled-icon wire-next--variant-{variant} {class}">
|
|
{#if title}<strong>{title}</strong>{/if}
|
|
{#if description}<p>{description}</p>{/if}
|
|
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
|
<slot />
|
|
</section>
|
|
<ComponentBaseStyles hidden />
|
|
}
|
|
|
|
style {
|
|
.wire-next--styled-icon {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: var(--wire-radius);
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
}
|
|
.wire-next--styled-icon > p { margin: 0; color: var(--wire-color-muted); }
|
|
.wire-next--styled-icon > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
|
.wire-next--styled-icon > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
|
|
}
|
|
}
|