feat: add Json <> Yaml converter

src/components/pages/converters/json-yaml/Configuration.tsx

@@ -0,0 +1,50 @@
+import { SpaceBar } from "@mui/icons-material";
+import { FormControl, MenuItem, Select } from "@mui/material";
+import { SelectInputProps } from "@mui/material/Select/SelectInput";
+import { css } from "@mui/material/styles";
+import { memo } from "react";
+
+import { Configurations } from "@/components/common";
+
+const spacesArray = [2, 4] as const;
+export type Spaces = typeof spacesArray[number];
+export const isSpaces = (x: number): x is Spaces => spacesArray.includes(x as Spaces);
+
+type OnSelectChange<T> = NonNullable<SelectInputProps<T>["onChange"]>;
+
+type Props = {
+  spaces: Spaces;
+  onSpacesChange: OnSelectChange<Spaces>;
+};
+
+const select = css`
+  & .MuiSelect-select:focus {
+    background-color: transparent;
+  }
+`;
+
+const StyledComponent = ({ spaces, onSpacesChange }: Props) => (
+  <Configurations
+    configurations={[
+      {
+        icon: <SpaceBar />,
+        title: "Indentation",
+        input: (
+          <FormControl variant="standard">
+            <Select value={spaces} onChange={onSpacesChange} css={select}>
+              {spacesArray.map(value => (
+                <MenuItem key={value} {...{ value }}>
+                  {value} spaces
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        ),
+      },
+    ]}
+  />
+);
+
+export const Component = memo(StyledComponent);
+
+export default Component;