feat: add Json <> Yaml converter

src/components/common/Configuration.tsx

@@ -0,0 +1,30 @@
+import { Box, Paper, Stack, Typography } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
+import { memo, ReactNode } from "react";
+
+type Props = {
+  icon: ReactNode;
+  title: string;
+  input: ReactNode;
+};
+
+const paper = (theme: Theme) => css`
+  padding: ${theme.spacing(2)};
+  height: ${theme.spacing(8)};
+`;
+
+const StyledComponent = ({ icon, title, input }: Props) => (
+  <Paper css={paper}>
+    <Stack direction="row" alignItems="center" height={theme => theme.spacing(4)}>
+      <Stack direction="row" spacing={2}>
+        {icon}
+        <Typography>{title}</Typography>
+      </Stack>
+      <Box marginLeft="auto">{input}</Box>
+    </Stack>
+  </Paper>
+);
+
+export const Component = memo(StyledComponent);
+
+export default Component;