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

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

@@ -0,0 +1,42 @@
+import { Button } from "@reactive-resume/ui";
+import { cn } from "@reactive-resume/utils";
+
+import { useResumeStore } from "@/client/stores/resume";
+
+import { getSectionIcon } from "../shared/section-icon";
+
+export const TemplateSection = () => {
+  // TODO: Import templates from @reactive-resume/templates
+  const templateList = ["rhyhorn"];
+
+  const setValue = useResumeStore((state) => state.setValue);
+  const currentTemplate = useResumeStore((state) => state.resume.data.metadata.template);
+
+  return (
+    <section id="template" className="grid gap-y-6">
+      <header className="flex items-center justify-between">
+        <div className="flex items-center gap-x-4">
+          {getSectionIcon("template")}
+          <h2 className="line-clamp-1 text-3xl font-bold">Template</h2>
+        </div>
+      </header>
+
+      <main className="grid grid-cols-2 gap-y-4">
+        {templateList.map((template) => (
+          <Button
+            key={template}
+            variant="outline"
+            disabled={template === currentTemplate}
+            onClick={() => setValue("metadata.template", template)}
+            className={cn(
+              "flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm capitalize ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
+              template === currentTemplate && "ring-1",
+            )}
+          >
+            {template}
+          </Button>
+        ))}
+      </main>
+    </section>
+  );
+};