refactor(v4.0.0-alpha): beginning of a new era

apps/client/src/pages/builder/sidebars/left/sections/summary.tsx

@@ -0,0 +1,41 @@
+import { defaultSections } from "@reactive-resume/schema";
+import { RichInput } from "@reactive-resume/ui";
+import { cn } from "@reactive-resume/utils";
+
+import { AiActions } from "@/client/components/ai-actions";
+import { useResumeStore } from "@/client/stores/resume";
+
+import { getSectionIcon } from "./shared/section-icon";
+import { SectionOptions } from "./shared/section-options";
+
+export const SummarySection = () => {
+  const setValue = useResumeStore((state) => state.setValue);
+  const section = useResumeStore(
+    (state) => state.resume.data.sections.summary ?? defaultSections.summary,
+  );
+
+  return (
+    <section id="summary" className="grid gap-y-6">
+      <header className="flex items-center justify-between">
+        <div className="flex items-center gap-x-4">
+          {getSectionIcon("summary")}
+          <h2 className="line-clamp-1 text-3xl font-bold">{section.name}</h2>
+        </div>
+
+        <div className="flex items-center gap-x-2">
+          <SectionOptions id="summary" />
+        </div>
+      </header>
+
+      <main className={cn(!section.visible && "opacity-50")}>
+        <RichInput
+          content={section.content}
+          onChange={(value) => setValue("sections.summary.content", value)}
+          footer={(editor) => (
+            <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+          )}
+        />
+      </main>
+    </section>
+  );
+};