import React, { useState } from 'react';
import { Box, Range } from '@alicloudfe/components';
import Typography from '@teamix/typography';

const { Paragraph } = Typography;

const App = () => {
  const [rows, setRows] = useState<number>(1);

  const onChange = (v: string) => {
    setRows(Number(v));
  };
  const article =
    '物理上的接近会让各个元素在视觉上产生关联。所以信息之间关联性越高，它们之间的距离就应该越接近，从而形成一个视觉单元，反之，则越疏远。这有助于组织信息，减少混乱。在复杂的页面或模块设计中，纵向上需要使用高、中、低三种规格的间距来区分信息的层级关系。基于「元间距」4px，三种规格可以是 32px（高间距）、16px（中间距）、4px（低间距）。';
  return (
    <Box spacing={24} padding={[24]}>
      <Range value={rows} min={1} max={10} onChange={onChange} />
      <Paragraph
        ellipsis={{
          rows,
          expandable: true,
          suffix: '--亲密性原则',
          onEllipsis: (ellipsis) => {
            console.log('Ellipsis changed:', ellipsis);
          },
        }}
        title={`${article}--亲密性原则`}
      >
        {article}
      </Paragraph>
    </Box>
  );
};

export default App;