Modal

Component có này giống với Modal của shopify, thêm phần sidebar, và bên section thêm back

Ví dụ

export default function ModalPage() {
  const [options, setOptions] = useState([
    {
      id: 'option1',
      content: 'option 1',
    },
  ]);
  return (
    <AppProvider i18n={{}}>
      <Modal open={true} onClose={() => {}} title="Modal" size="large">
        <Modal.Sidebar options={options} title="Story library" />
        <Modal.Section>
          {selected => <>{selected === 'option1' && <Modal.Content filters={<> filters option 1</>}>Content: option1</Modal.Content>}</>}
          {selected => <>{selected === 'option2' && <Modal.Content filters={<> filters option2</>}>Content: option2</Modal.Content>}</>}
        </Modal.Section>
      </Modal>
    </AppProvider>
  );
}

ModalProps extends ShopifyModalProps

ModalSidebarProps

Name	Type	Default	Description
title	string	-	Title của sidebar
options	Option[]	-	options của modal

Option Type

Name	Type	Default	Description
id	string	-	id của option
content	string	-	Nội dung của option
badge	string	-	Text hiện bên phải content, bổ nghĩa cho content

ModalSectionProps

Name	Type	Default	Description
children	(selected: string) => React.ReactNode | React.ReactNode	-	Phần tử con của Section
selected là option đang được checking

ModalContentProps

Name	Type	Default	Description
title	string | undefined	-	Tên của tab
filters	React.ReactNode	-	Filters của tab
children	React.ReactNode	-	phần tử con của tab
onBack	() => void | undefined	-	Hàm back