63 lines
2.2 KiB
Plaintext
63 lines
2.2 KiB
Plaintext
import Container from "./Container.wrn"
|
|
|
|
component Section {
|
|
props {
|
|
id: string = ""
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
variant: string = "default"
|
|
spacing: string = "lg"
|
|
maxWidth: string = "xl"
|
|
fullWidth: boolean = false
|
|
borderTop: boolean = false
|
|
borderBottom: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<section
|
|
data-ui-component="Section"
|
|
id='{id}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-variant='{variant}'
|
|
class='relative isolate w-full {class}'
|
|
class:py-8='spacing === "sm"'
|
|
class:py-12='spacing === "md"'
|
|
class:py-16='spacing === "lg"'
|
|
class:sm:py-20='spacing === "lg"'
|
|
class:py-20='spacing === "xl"'
|
|
class:sm:py-24='spacing === "xl"'
|
|
class:bg-[var(--wire-color-background)]='variant === "default"'
|
|
class:bg-[var(--wire-color-surface-soft)]='variant === "soft"'
|
|
class:bg-[var(--wire-color-surface-raised)]='variant === "raised"'
|
|
class:bg-[var(--wire-color-primary-soft)]='variant === "tinted" && color === "primary"'
|
|
class:bg-[var(--wire-color-success-soft)]='variant === "tinted" && color === "success"'
|
|
class:bg-[var(--wire-color-warning-soft)]='variant === "tinted" && color === "warning"'
|
|
class:bg-[var(--wire-color-danger-soft)]='variant === "tinted" && color === "danger"'
|
|
class:bg-[var(--wire-color-info-soft)]='variant === "tinted" && color === "info"'
|
|
class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
|
|
class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
|
|
class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
|
|
class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
|
|
class:border-t='borderTop'
|
|
class:border-b='borderBottom'
|
|
class:border-[var(--wire-color-border)]='borderTop || borderBottom'
|
|
>
|
|
{#if fullWidth}
|
|
<slot></slot>
|
|
{:else}
|
|
<Container
|
|
columns="1"
|
|
gap="md"
|
|
maxWidth='{maxWidth}'
|
|
size='{size}'
|
|
color='{color}'
|
|
>
|
|
<slot></slot>
|
|
</Container>
|
|
{/if}
|
|
</section>
|
|
}
|
|
}
|