import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';

export function TextPage() {
  return (
    <RtFrame as="div" style={{ padding: '20px' }} surface="foundation-pure">
      <RtFrame
        modifier="filling"
        as="div"
        surface="foundation-tint"
        style={{ padding: '10px' }}
      >
        <RtText typography="title-lg-regular" specification="main">
          Hello world
        </RtText>
      </RtFrame>
      <div style={{ padding: '10px' }}>
        <RtText typography="symbol-lg-primary" specification="variant">
          Hello Ritm
        </RtText>
      </div>
      <div style={{ outline: 'dashed white 1px', padding: '10px', width: 200 }}>
        <RtText
          lineClamp={2}
          typography="symbol-lg-primary"
          specification="variant"
        >
          Long text show only 2 lines. Lorem ipsum dolor sit amet, consectetur
          adipisicing elit.
        </RtText>
      </div>
    </RtFrame>
  );
}