feat(artboard): implement 8 new templates

apps/client/index.html

@@ -39,5 +39,8 @@
 
     <!-- Scripts -->
     <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
   </body>
 </html>

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

@@ -2,7 +2,7 @@ import { Plus, PlusCircle } from "@phosphor-icons/react";
 import {
   Award,
   Certification,
-  CustomSectionItem,
+  CustomSection,
   Education,
   Experience,
   Interest,
@@ -172,7 +172,7 @@ export const LeftSidebar = () => {
             <Fragment key={section.id}>
               <Separator />
 
-              <SectionBase<CustomSectionItem>
+              <SectionBase<CustomSection>
                 id={`custom.${section.id}`}
                 title={(item) => item.name}
                 description={(item) => item.description}

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

@@ -19,7 +19,7 @@ export const TemplateSection = () => {
       </header>
 
       <main className="grid grid-cols-2 gap-4">
-        {templatesList.map(({ id, name, image }) => (
+        {templatesList.map(({ id, name }) => (
           <HoverCard key={id} openDelay={0} closeDelay={0}>
             <HoverCardTrigger asChild>
               <Button
@@ -35,7 +35,12 @@ export const TemplateSection = () => {
             </HoverCardTrigger>
 
             <HoverCardContent className="max-w-xs overflow-hidden border-none bg-white p-0">
-              <img alt={name} src={image} loading="lazy" className="aspect-[1/1.4142]" />
+              <img
+                alt={name}
+                loading="lazy"
+                src="/templates/sample.jpg"
+                className="aspect-[1/1.4142]"
+              />
             </HoverCardContent>
           </HoverCard>
         ))}

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

@@ -75,6 +75,8 @@ export const TypographySection = () => {
               disabled={typography.font.family === font}
               onClick={() => {
                 setValue("metadata.typography.font.family", font);
+                setValue("metadata.typography.font.subset", "latin");
+                setValue("metadata.typography.font.variants", ["regular"]);
               }}
               className={cn(
                 "flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",

apps/client/src/stores/resume.ts

@@ -1,6 +1,6 @@
 import { createId } from "@paralleldrive/cuid2";
 import { ResumeDto } from "@reactive-resume/dto";
-import { CustomSection, defaultSection, SectionKey } from "@reactive-resume/schema";
+import { CustomSectionGroup, defaultSection, SectionKey } from "@reactive-resume/schema";
 import { removeItemInLayout } from "@reactive-resume/utils";
 import _set from "lodash.set";
 import { temporal, TemporalState } from "zundo";
@@ -38,7 +38,7 @@ export const useResumeStore = create<ResumeStore>()(
         });
       },
       addSection: () => {
-        const section: CustomSection = {
+        const section: CustomSectionGroup = {
           ...defaultSection,
           id: createId(),
           name: "Custom Section",