Banner

import { useState } from 'react';
import { Banner, Layout, Button } from '@fibrous/semi-ui-react';

export default function BannerDemo() {
    const [visible, setVisible] = useState(false);
    const changeVisible = () => {
        setVisible(!visible);
    };
    const { Header, Footer, Content } = Layout;

    const commonStyle = {
        height: 64,
        lineHeight: '64px',
        background: 'var(--semi-color-fill-0)',
    };

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

import { Banner } from '@fibrous/semi-ui-react';

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

import { Banner, Typography } from '@fibrous/semi-ui-react';

export default function BannerDemo() {
    const { Text } = Typography;

    return (
        <div style={{ width: 640 }} className="components-banner-demo">
            <Banner
                fullMode={false}
                type="info"
                bordered
                icon={null}
                closeIcon={null}
                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                description={
                    <div>
                        你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。
                    </div>
                }
            />
            <br />
            <Banner
                fullMode={false}
                type="warning"
                bordered
                icon={null}
                closeIcon={null}
                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                description={
                    <div>
                        你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。
                    </div>
                }
            />
            <br />
            <Banner
                fullMode={false}
                type="danger"
                bordered
                icon={null}
                closeIcon={null}
                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                description={
                    <div>
                        你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。
                    </div>
                }
            />
            <br />
            <Banner
                fullMode={false}
                type="success"
                bordered
                icon={null}
                closeIcon={null}
                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                description={
                    <div>
                        你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。
                    </div>
                }
            />
        </div>
    );
}

import { Banner } from '@fibrous/semi-ui-react';

export default function BannerDemo() {
    return (
        <div style={{ width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
            <Banner fullMode={false} title="Title" type="warning" bordered 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">
                <div className="semi-modal-footer">
                    <button className="semi-button semi-button-tertiary semi-button-light" type="button">
                        No, thanks.
                    </button>
                    <button className="semi-button semi-button-warning" type="button">
                        Sounds great!
                    </button>
                </div>
            </Banner>
            <br />
        </div>
    );
}