Implement Custom CSS Feature

apps/client/src/pages/builder/sidebars/right/index.tsx

@@ -5,6 +5,7 @@ import { useRef } from "react";
 import { Copyright } from "@/client/components/copyright";
 import { ThemeSwitch } from "@/client/components/theme-switch";
 
+import { CssSection } from "./sections/css";
 import { ExportSection } from "./sections/export";
 import { InformationSection } from "./sections/information";
 import { LayoutSection } from "./sections/layout";
@@ -37,6 +38,8 @@ export const RightSidebar = () => {
           <Separator />
           <ThemeSection />
           <Separator />
+          <CssSection />
+          <Separator />
           <PageSection />
           <Separator />
           <SharingSection />
@@ -85,6 +88,13 @@ export const RightSidebar = () => {
               scrollIntoView("#theme");
             }}
           />
+          <SectionIcon
+            id="css"
+            name={t`Custom CSS`}
+            onClick={() => {
+              scrollIntoView("#css");
+            }}
+          />
           <SectionIcon
             id="page"
             name={t`Page`}

apps/client/src/pages/builder/sidebars/right/sections/css.tsx

@@ -0,0 +1,60 @@
+// import "prismjs/themes/prism.min.css";
+
+import { t } from "@lingui/macro";
+import { useTheme } from "@reactive-resume/hooks";
+import { Label, Switch } from "@reactive-resume/ui";
+import Prism from "prismjs";
+import { Helmet } from "react-helmet-async";
+import CodeEditor from "react-simple-code-editor";
+
+import { useResumeStore } from "@/client/stores/resume";
+
+import { getSectionIcon } from "../shared/section-icon";
+
+export const CssSection = () => {
+  const { isDarkMode } = useTheme();
+
+  const setValue = useResumeStore((state) => state.setValue);
+  const css = useResumeStore((state) => state.resume.data.metadata.css);
+
+  return (
+    <section id="css" className="grid gap-y-6">
+      <Helmet>
+        {isDarkMode && <link rel="stylesheet" href="/styles/prism-dark.css" />}
+        {!isDarkMode && <link rel="stylesheet" href="/styles/prism-light.css" />}
+      </Helmet>
+
+      <header className="flex items-center justify-between">
+        <div className="flex items-center gap-x-4">
+          {getSectionIcon("css")}
+          <h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Custom CSS`}</h2>
+        </div>
+      </header>
+
+      <main className="space-y-4">
+        <div className="flex items-center gap-x-4">
+          <Switch
+            id="metadata.css.visible"
+            checked={css.visible}
+            onCheckedChange={(checked) => {
+              setValue("metadata.css.visible", checked);
+            }}
+          />
+          <Label htmlFor="metadata.css.visible">{t`Apply Custom CSS`}</Label>
+        </div>
+
+        <div className="rounded border p-4">
+          <CodeEditor
+            tabSize={4}
+            value={css.value}
+            className="language-css font-mono"
+            highlight={(code) => Prism.highlight(code, Prism.languages.css, "css")}
+            onValueChange={(value) => {
+              setValue("metadata.css.value", value);
+            }}
+          />
+        </div>
+      </main>
+    </section>
+  );
+};

apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx

@@ -1,4 +1,5 @@
 import {
+  Code,
   DiamondsFour,
   DownloadSimple,
   IconProps,
@@ -19,6 +20,7 @@ export type MetadataKey =
   | "layout"
   | "typography"
   | "theme"
+  | "css"
   | "page"
   | "locale"
   | "sharing"
@@ -45,6 +47,9 @@ export const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
     case "theme": {
       return <Palette size={18} {...props} />;
     }
+    case "css": {
+      return <Code size={18} {...props} />;
+    }
     case "page": {
       return <ReadCvLogo size={18} {...props} />;
     }