import { Typography } from '@fibrous/semi-ui-solid';

export default function TypographyDemo() {
    const { Title } = Typography;
    return (
        <div>
            <Title style={{ margin: '8px 0' }}>h1. Semi Design</Title>
            <Title heading={2} style={{ margin: '8px 0' }}>
                h2. Semi Design
            </Title>
            <Title heading={3} style={{ margin: '8px 0' }}>
                h3. Semi Design
            </Title>
            <Title heading={4} style={{ margin: '8px 0' }}>
                h4. Semi Design
            </Title>
            <Title heading={5} style={{ margin: '8px 0' }}>
                h5. Semi Design
            </Title>
            <Title heading={6} style={{ margin: '8px 0' }}>
                h6. Semi Design
            </Title>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-solid';

export default function TypographyDemo() {
    const { Text } = Typography;
    return (
        <div>
            <Text>Text</Text>
            <br />
            <br />
            <Text type="secondary">Secondary</Text>
            <br />
            <br />
            <Text type="tertiary">{`Tertiary v>=1.2.0`}</Text>
            <br />
            <br />
            <Text type="quaternary">{`Quaternary v>=1.2.0`}</Text>
            <br />
            <br />
            <Text type="warning">Warning</Text>
            <br />
            <br />
            <Text type="danger">Danger</Text>
            <br />
            <br />
            <Text type="success">{`Success v>=1.7.0`}</Text>
            <br />
            <br />
            <Text disabled>Disabled</Text>
            <br />
            <br />
            <Text mark>Default Mark</Text>
            <br />
            <br />
            <Text code>Example Code</Text>
            <br />
            <br />
            <Text underline>Underline</Text>
            <br />
            <br />
            <Text delete>Deleted</Text>
            <br />
            <br />
            <Text strong>Strong</Text>
        </div>
    );
}

import { IconLink } from '@fibrous/semi-icons-solid';
import { Typography } from '@fibrous/semi-ui-solid';

export default function TypographyDemo() {
    const { Text } = Typography;
    return (
        <div>
            <Text link={{ href: 'https://semi.design/' }}>链接文本</Text>
            <br />
            <br />
            <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
            <br />
            <br />
            <Text link icon={<IconLink />} underline>
                带下划线的网页链接
            </Text>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-solid';

export default function TypographyDemo() {
    const { Paragraph, Title } = Typography;
    return (
        <div>
            <Title heading={5}>默认行距</Title>
            <Paragraph>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
            <br />
            <Title heading={5}>宽松行距</Title>
            <Paragraph spacing="extended">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-solid';

export default function TypographyDemo() {
    const { Numeral } = Typography;
    return (
        <div>
            <Numeral precision={1} component="p">
                点赞量：1.6111e1 K
            </Numeral>

            <p>
                播放量:
                <Numeral rule="numbers" precision={1}>
                    2.4444e2
                </Numeral>
                K
            </p>

            <Numeral rule="percentages" precision={2} component="p" style={{ 'margin-bottom': '12px' }}>
                好评率: 0.915
            </Numeral>

            <Numeral rule="percentages" style={{ 'margin-bottom': '12px' }}>
                这场比赛我的胜率是0.6，输的概率是0.4
            </Numeral>

            <Numeral rule="bytes-decimal" precision={2} truncate="floor" component="p">
                已使用: 1000
            </Numeral>
            <Numeral rule="bytes-decimal" precision={2} truncate="floor" component="p">
                未使用: {1024 * 1000}
            </Numeral>

            <Numeral rule="bytes-binary" precision={2} truncate="floor" component="p">
                已使用: 1024
            </Numeral>
            <Numeral rule="bytes-binary" precision={2} truncate="floor" component="p">
                未使用: {2e12}
            </Numeral>
        </div>
    );
}

import { For } from 'solid-js';
import { Typography } from '@fibrous/semi-ui-solid';

const infos = [
    { type: 'Stars', min: '7100' },
    { type: 'Fork', min: '560' },
    { type: 'Downloads', min: '5000000' },
    { type: 'Contributors', min: '100' },
];

function parserTCH(oldVal: string) {
    return oldVal
        .split(' ')
        .map((item) => (Number(item) ? `${item.replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')}+` : item))
        .join(' ');
}

export default function TypographyDemo() {
    const { Numeral } = Typography;

    return (
        <div>
            <Numeral parser={parserTCH} component="div">
                Semi Design 重视我们的用户，加入并助力我们不断完善
                <For each={infos}>
                    {(item) => (
                        <p>
                            {item.type}：
                            <Numeral parser={parserTCH} component="b" style={{ color: 'var(--semi-violet-5)' }}>
                                {item.min}
                            </Numeral>
                        </p>
                    )}
                </For>
            </Numeral>
            <br />
            <Numeral link={{ href: 'https://semi.design', target: '_blank' }} parser={parserTCH}>
                现已服务 {1e5} 用户，前往官网 &gt;&gt;
            </Numeral>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-solid';

export default function TypographyDemo() {
    const { Paragraph, Text } = Typography;
    return (
        <div>
            <Text>正常文本</Text>
            <Paragraph spacing="extended">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
            <br />
            <Text size="small">小文本</Text>
            <Paragraph size="small">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
            <br />
            <Text size="small">
                这是一段文本，样式为 small
                <Text link size="inherit">
                    这是一段链接，设置 size 为 inherit 继承外部样式设置
                </Text>
            </Text>
        </div>
    );
}

import { IconSetting } from '@fibrous/semi-icons-solid';
import { Typography, TextArea, Button, Toast } from '@fibrous/semi-ui-solid';

export default function TypographyDemo() {
    const { Paragraph, Text, Numeral } = Typography;
    const timestamp = new Date(2024, 4, 6, 12).getTime() / 1000;

    return (
        <div>
            <Paragraph copyable>点击右边的图标复制文本。</Paragraph>
            <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>点击复制文本。</Paragraph>
            <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功' }) }}>点击右边的图标复制文本。</Paragraph>
            时间戳:{' '}
            <Numeral truncate="ceil" copyable underline>
                {timestamp}s
            </Numeral>
            <Paragraph copyable={{ icon: () => <IconSetting style={{ color: 'var(--semi-color-link)' }} /> }}>自定义复制节点</Paragraph>
            <Paragraph
                copyable={{
                    content: 'Custom render!',
                    render: (copied, doCopy, config) => (
                        <Button size="small" onClick={doCopy}>
                            <span>{copied ? '复制成功' : `点击复制:${config.content}`}</span>
                        </Button>
                    ),
                }}
            >
                自定义复制渲染
            </Paragraph>
            <br />
            <br />
            <Text id="typography-copyable-paste" type="secondary">
                粘贴区域：
            </Text>
            <br />
            <TextArea aria-labelledby="typography-copyable-paste" autosize style={{ width: '320px', 'margin-top': '4px' }} rows={3} />
        </div>
    );
}

import type { JSX } from 'solid-js';
import { Typography, Tooltip, type TooltipProps } from '@fibrous/semi-ui-solid';

function renderBlueTooltip(content: TooltipProps['content'], children: JSX.Element) {
    return (
        <Tooltip content={content} style={{ 'background-color': 'var(--semi-color-primary)' }}>
            {children}
        </Tooltip>
    );
}

export default function TypographyDemo() {
    const { Paragraph, Title, Text } = Typography;

    return (
        <div>
            <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: '250px' }}>
                是一个很长很长很长很长5号标题
            </Title>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '这是自定义要展示的内容' },
                    },
                }}
                style={{ width: '150px' }}
            >
                可以自定义浮层里的展示内容试试看吧
            </Text>
            <br />
            {/* link 也可以传对象，例如 link={{ href: 'https://semi.design/zh-CN/basic/typography', target: '_blank' }} */}
            <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: '150px' }}>
                是一个很长很长很长很长的链接
            </Text>
            <br />
            <Paragraph ellipsis={{ suffix: '小尾巴' }} style={{ width: '300px' }}>
                有后缀的情况：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。
            </Paragraph>
            <br />
            <Paragraph ellipsis={{ rows: 3 }} style={{ width: '300px' }}>
                这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Paragraph>
            <br />
            <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: '300px' } } } }} style={{ width: '300px' }}>
                多行截断，展示 Popover：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Paragraph>
            <br />
            <Paragraph
                ellipsis={{
                    rows: 3,
                    expandable: true,
                    collapsible: true,
                    collapseText: '折叠我吧',
                    onExpand: (bool, e) => console.log(bool, e),
                }}
                style={{ width: '300px' }}
            >
                支持展开和折叠：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Paragraph>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '全英文设置了word-break' },
                    },
                    pos: 'middle',
                }}
                style={{ width: '150px', 'word-break': 'break-word' }}
            >
                sssssssssssssssssssssssss
            </Text>
            <br />
            <br />
            <Title
                heading={5}
                ellipsis={{
                    showTooltip: {
                        renderTooltip: renderBlueTooltip,
                    },
                }}
                style={{ width: '250px' }}
            >
                这是一个自定义弹出层组件的省略文本，背景色是蓝色
            </Title>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-solid';

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

    return (
        <div>
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '架构|Semi-inf|graph.cheet.relation' },
                    },
                }}
                style={{ width: '150px' }}
            >
                有问题的超长文本发生截断时可按需进行自定义配置
            </Text>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: {
                            content: '架构|Semi-inf|graph.cheet.relation',
                            class: 'components-typography-demo',
                        },
                    },
                }}
                style={{ width: '150px' }}
            >
                覆盖类名超长文本发生截断时可使用类名覆盖进行自定义配置
            </Text>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '架构|Semi-inf|graph.cheet.relation', style: { 'word-break': 'break-all' } },
                    },
                }}
                style={{ width: '150px' }}
            >
                覆盖style超长文本发生截断时可使用style进行自定义配置
            </Text>
        </div>
    );
}