/**
 * title: "从右侧滑出形态"
 * description: "默认从右侧滑出"
 */
import React, { useState } from 'react';

import { Button } from '@alicloud/console-components';
import SlidePanel from '@alicloud/console-components-slide-panel';

const containerStyle = {
  height: '128px',
  borderRadius: '4px',
  lineHeight: '128px',
  background: '#f6f6f6',
  textAlign: 'center',
} as const;

export default () => {
  const [active, setActive] = useState(false);

  return (
    <>
      <Button
        onClick={() => {
          setActive(true);
        }}
      >
        open
      </Button>
      <SlidePanel
        title="标题 Title"
        isShowing={active}
        width="medium"
        onVisibleChange={(v) => {
          setActive(v);
        }}
        onClose={() => {
          setActive(false);
        }}
      >
        <div style={containerStyle}>
          Content Placehoder
        </div>
      </SlidePanel>
    </>
  );
};