🚀 release v3.0.0

client/components/build/RightSidebar/sections/CustomCSS.tsx

@@ -0,0 +1,49 @@
+import Editor from '@monaco-editor/react';
+import { useTheme } from '@mui/material';
+import { CustomCSS as CustomCSSType } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import React from 'react';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const CustomCSS = () => {
+  const theme = useTheme();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const customCSS: CustomCSSType = useAppSelector((state) => get(state.resume, 'metadata.css', {}));
+
+  const handleChange = (value: string | undefined) => {
+    dispatch(setResumeState({ path: 'metadata.css.value', value }));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.css" name={t('builder.rightSidebar.sections.css.heading')} isHideable />
+
+      <Editor
+        height="200px"
+        language="css"
+        value={customCSS.value}
+        onChange={handleChange}
+        className={clsx({ 'opacity-50': !customCSS.visible })}
+        theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'light'}
+        options={{
+          minimap: { enabled: false },
+          overviewRulerLanes: 0,
+          scrollBeyondLastColumn: 5,
+          overviewRulerBorder: false,
+          scrollBeyondLastLine: true,
+        }}
+      />
+    </>
+  );
+};
+
+export default CustomCSS;