Preview: CustomCSSCustomizer.jsx
Size: 1.47 KB
//proc/thread-self/root/home/byroehnu/easetack.com/resources/js/Admin/Components/SectionCustomize/CustomCSSCustomizer.jsx
import React, { useEffect, useState } from "react"
import Editor from "react-simple-code-editor"
import { highlight, languages } from "prismjs"
import "prismjs/components/prism-clike"
import "prismjs/components/prism-javascript"
import "prismjs/themes/prism.css"
import { useDispatch, useSelector } from "react-redux"
import { updateCustomCss } from "@/Redux/features/pages/Customize/customize"
export default function CustomCSSCustomizer() {
const css = useSelector((state) => state.customize.custom_css)
const dispatch = useDispatch()
const [data, setData] = useState(css)
useEffect(() => {
dispatch(updateCustomCss(data))
}, [data])
return (
<>
<div className="form-group">
<label>Custom CSS</label>
<Editor
value={data ?? ""}
onValueChange={(code) => setData(code)}
highlight={(code) => highlight(code, languages.css)}
padding={15}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
fontSize: 12,
backgroundColor: "#ffffff",
border: "1px solid #ccc",
borderRadius: "4px"
}}
/>
</div>
{/*<textarea value={data} onChange={(e) => setData(e.target.value)} rows={10} style={{ height: "400px" }}></textarea>*/}
</>
)
}
Directory Contents
Dirs: 0 × Files: 46