tutu/src/material/BottomSheet.tsx

import { createEffect, type ParentComponent } from "solid-js";
import styles from "./BottomSheet.module.css";

export type BottomSheetProps = {
  open?: boolean;
};

const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
  let element: HTMLDialogElement;

  createEffect(() => {
    if (props.open) {
      if (!element.open) {
        element.showModal();
      }
    } else {
      if (element.open) {
        element.close();
      }
    }
  });

  return (
    <dialog class={styles.bottomSheet} ref={element!}>
      {props.children}
    </dialog>
  );
};

export default BottomSheet;