import React from "react";
import { Justify, Button, Card, H3 } from "@tencent/tea-component";

export default function JustifyExample() {
  const text = `
    高高山上一老僧，身穿衲头几千层。
    若问老僧年高迈？曾记得黄河九澄清。
    五百年前，清一澄，总共是四千五百冬。
    老僧收了八个徒弟，八个弟子都有法名。
    大徒弟名字就叫青头愣，二徒弟名叫愣头青。
    三徒弟名字就叫僧三点，四徒弟名字就叫做点三僧。
    五徒弟名叫蹦葫芦把儿，六徒弟名叫把儿葫芦蹦。
    七徒弟名字就叫随风倒，八徒弟名字就叫做倒随风。
    老师傅教给他们八宗艺，八仙过海，各显其能：
    青头愣会打磬，愣头青会撞钟。
    僧三点会吹管，点三僧会捧笙。
    蹦葫芦把儿会打鼓，把儿葫芦蹦会念经。
    随风倒他会扫地，这个倒随风他会点灯。
  `;

  return (
    <section style={{ maxWidth: 800 }}>
      <Card>
        <Card.Body>
          <Justify
            top
            left={<H3>{text}</H3>}
            right={<Button type="link">文本按钮</Button>}
          />
        </Card.Body>
      </Card>
      <Card>
        <Card.Body>
          <Justify
            bottom
            left={<H3>{text}</H3>}
            right={<Button type="link">文本按钮</Button>}
          />
        </Card.Body>
      </Card>
    </section>
  );
}