Banner

<script lang="ts">
    import { Banner, Button, Layout, LayoutContent, LayoutFooter, LayoutHeader } from '@fibrae/semi-ui-svelte';

    let visible = $state(false);
    const toggle = () => {
        visible = !visible;
    };

    const commonStyle = 'height: 64px; line-height: 64px; background: var(--semi-color-fill-0)';
</script>

<Layout class="components-layout-demo banner-basic">
    <LayoutHeader style={commonStyle}>Header</LayoutHeader>
    {#if visible}
        <Banner onClose={toggle}>
            {#snippet description()}Semi D2C 现已支持 Figma DevMode, 安装插件，随时查阅图层对应的前端代码{/snippet}
        </Banner>
    {/if}
    <LayoutContent style="height: 300px; line-height: 300px">Content</LayoutContent>
    <LayoutFooter style={commonStyle}>Footer</LayoutFooter>
</Layout>
<Button style="display: block; width: 120px; margin: 0 auto" onclick={toggle}>
    {visible ? 'Hide Banner' : 'Show Banner'}
</Button>

<script lang="ts">
    import { Banner } from '@fibrae/semi-ui-svelte';
</script>

<Banner type="info">
    {#snippet description()}Semi D2C 现已支持 Figma DevMode, 安装插件，随时查阅图层对应的前端代码{/snippet}
</Banner>
<br />
<Banner type="warning">
    {#snippet description()}当前使用 Figma UI Kit 为旧版，可能无法支持完整的 Design to code 能力{/snippet}
</Banner>
<br />
<Banner type="danger">
    {#snippet description()}当前使用 API 已过期，请尽快升级{/snippet}
</Banner>
<br />
<Banner type="success">
    {#snippet description()}Semi DSM, Make Semi Design to Any Design{/snippet}
</Banner>

<script lang="ts">
    import { Banner, TypographyText } from '@fibrae/semi-ui-svelte';

    const types = ['info', 'warning', 'danger', 'success'] as const;
</script>

<div class="components-banner-demo" style="width: 640px">
    {#each types as type, index (type)}
        {#if index > 0}
            <br />
        {/if}
        <Banner bordered closeIcon={null} fullMode={false} icon={null} {type}>
            {#snippet title()}
                <div style="font-weight: 600; font-size: 14px; line-height: 20px">不知道 AppKey？</div>
            {/snippet}
            {#snippet description()}
                <div>
                    你可先联系对应的研发同学，确认是否已在
                    <TypographyText link={{ href: 'https://semi.design/' }}>应用云平台</TypographyText>
                    申请了应用，并填写对应的信息。
                </div>
            {/snippet}
        </Banner>
    {/each}
</div>

<script lang="ts">
    import { Banner } from '@fibrae/semi-ui-svelte';
</script>

<div style="width: 500px; padding: 20px; border: 1px solid var(--semi-color-border)">
    <Banner bordered fullMode={false} title="Title" type="warning">
        {#snippet description()}
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
        {/snippet}
        <div class="semi-modal-footer">
            <button class="semi-button semi-button-tertiary semi-button-light" type="button">No, thanks.</button>
            <button class="semi-button semi-button-warning" type="button">Sounds great!</button>
        </div>
    </Banner>
    <br />
</div>