added settings

src/material/BottomSheet.tsx

@@ -0,0 +1,26 @@
+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;