link-stack/packages/ui/components/Dialog.tsx

"use client";

import { FC } from "react";
import {
  Box,
  Dialog as InternalDialog,
  DialogActions,
  DialogContent,
  DialogTitle,
} from "@mui/material";
import { typography, colors } from "../styles/theme";

type DialogDetailsProps = {
  title: string;
  children: React.ReactNode;
  buttons?: React.ReactNode;
};

const DialogDetails: FC<DialogDetailsProps> = ({
  title,
  children,
  buttons,
}) => {
  const { h3 } = typography;
  const { mediumGray, darkMediumGray } = colors;

  return (
    <>
      <DialogTitle
        sx={{
          backgroundColor: mediumGray,
          p: 3,
        }}
      >
        <Box
          sx={{
            ...h3,
            borderBottom: `1px solid ${darkMediumGray}`,
            pb: 1.5,
          }}
        >
          {title}
        </Box>
      </DialogTitle>
      <DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
        {children}
      </DialogContent>
      {buttons && (
        <DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
          {buttons}
        </DialogActions>
      )}
    </>
  );
};

type DialogProps = {
  title: string;
  open: boolean;
  onClose: Function;
  formAction?: any;
  buttons?: React.ReactNode;
  children?: any;
};

export const Dialog: FC<DialogProps> = ({
  title,
  open,
  onClose,
  formAction,
  buttons,
  children,
}) => {
  return (
    <InternalDialog
      open={open}
      onClose={onClose as any}
      fullWidth
      maxWidth="md"
    >
      {formAction ? (
        <form action={formAction}>
          <DialogDetails title={title} buttons={buttons}>
            {children}
          </DialogDetails>
        </form>
      ) : (
        <DialogDetails title={title} buttons={buttons}>
          {children}
        </DialogDetails>
      )}
    </InternalDialog>
  );
};