Dialog component

src/components/infos/Infos.module.css

@@ -1,28 +0,0 @@
-.control {
-  opacity: 1;
-  position: fixed !important;
-  top: 0px;
-  margin-left: calc(100% - 70px) !important;
-  z-index: 1;
-}
-
-.dialog {
-  min-width: 500px;
-}
-
-.title {
-  background-color: rgba(14, 116, 144, 0.7);
-  color: white;
-  clear: both;
-}
-
-.close {
-  align-self: right;
-  margin-right: 2px;
-  padding-top: 16px;
-}
-
-.body {
-  padding: 20px;
-  background-color: rgba(255, 255, 255, 0.7);
-}

src/components/infos/Infos.tsx

@@ -1,26 +1,14 @@
-import {
-  Box,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  IconButton,
-  Typography,
-} from '@suid/material';
+import { Grid, IconButton } from '@suid/material';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { Component, createSignal, For } from 'solid-js';
 import { unwrap } from 'solid-js/store';
-import {
-  I18nContext,
-  createI18nContext,
-  useI18n,
-} from '@solid-primitives/i18n';
+import { useI18n } from '@solid-primitives/i18n';
 import CloseIcon from '@suid/icons-material/Close';
 import { tree } from '../map';
-import style from './Infos.module.css';
 import { Paper, Stack } from '@suid/material';
 import styled from '@suid/material/styles/styled';
+import Dialog from '../dialog';
 
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
@@ -63,54 +51,37 @@ export const clickHandler = (event: any) => {
 
 const Infos: Component<{}> = (props) => {
   const [t, { add, locale, dict }] = useI18n();
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
+  const handleClick = () => {
     setOpen(false);
   };
 
   return (
-    <Dialog
-      onClose={handleClose}
-      open={open()}
-      class={style.dialog}
-      PaperProps={{ sx: { minWidth: '300px' } }}
-    >
-      <DialogTitle class={style.title}>
-        <Grid container spacing={2} alignItems='center'>
-          <Grid item xs={11}>
-            <div>{t('nearby')}</div>
-          </Grid>
-          <Grid item xs={1} class={style.close}>
-            <IconButton onClick={handleClose}>
-              <CloseIcon />
-            </IconButton>
-          </Grid>
-        </Grid>
-      </DialogTitle>
-      <DialogContent>
-        <Stack spacing={1} direction='column' alignItems='left'>
-          <For each={selectedFeatures}>
-            {(feature) => (
-              <Item sx={{ width: '95%' }}>
-                <Grid container spacing={2}  alignItems='left'>
-                  <Grid item xs={11}>
-                    {feature.get('name')
-                      ? `${feature.get('name')} (${t(feature.get('type'))})`
-                      : t(feature.get('type'))}
-                  </Grid>
-                  <Grid item xs={1}>
-                    <IconButton onClick={handleClose}>
-                      <CloseIcon />
-                    </IconButton>
-                  </Grid>
+    <Dialog closeHandler={handleClick} open={open()} title={t('nearby')}>
+      <Stack
+        spacing={1}
+        direction='column'
+        alignItems='center'
+        sx={{ width: 'calc(100% - 5px)' }}
+      >
+        <For each={selectedFeatures}>
+          {(feature) => (
+            <Item sx={{ width: 'calc(100% - 1px)' }}>
+              <Grid container spacing={2} alignItems='center'>
+                <Grid item xs={11}>
+                  {feature.get('name')
+                    ? `${feature.get('name')} (${t(feature.get('type'))})`
+                    : t(feature.get('type'))}
                 </Grid>
-              </Item>
-            )}
-          </For>
-        </Stack>
-      </DialogContent>
+                <Grid item xs={1} sx={{ paddingLeft: '0px' }}>
+                  <IconButton onClick={handleClick}>
+                    <CloseIcon />
+                  </IconButton>
+                </Grid>
+              </Grid>
+            </Item>
+          )}
+        </For>
+      </Stack>
     </Dialog>
   );
 };