50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
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) => {
|
|
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;
|