support selecting cv template

src/components/generator/form/Form.tsx

@@ -4,6 +4,7 @@ import { FormProvider, useForm } from 'react-hook-form'
 import { useAtom } from 'jotai'
 import styled from 'styled-components'
 
+import { TemplatesSection } from './sections/TemplatesSection'
 import { ProfileSection } from './sections/ProfileSection'
 import { EducationSection } from './sections/EducationSection'
 import { WorkSection } from './sections/WorkSection'
@@ -34,7 +35,7 @@ const initialFormValues: FormValues = {
 
 export function Form() {
   const router = useRouter()
-  const { section: currSection } = router.query
+  const { section: currSection = 'basics' } = router.query
 
   const [resume, setResume] = useAtom(resumeAtom)
   const formContext = useForm<FormValues>({ defaultValues: initialFormValues })
@@ -70,9 +71,8 @@ export function Form() {
       <StyledForm
         id="resume-form"
         onSubmit={formContext.handleSubmit(handleFormSubmit)}
-        // onChange={handleFormSubmit}
       >
-        {!currSection && <ProfileSection />}
+        {currSection === 'templates' && <TemplatesSection />}
         {currSection === 'basics' && <ProfileSection />}
         {currSection === 'education' && <EducationSection />}
         {currSection === 'work' && <WorkSection />}

src/components/generator/form/sections/TemplatesSection.tsx

@@ -0,0 +1,32 @@
+import { useFormContext, Controller } from 'react-hook-form'
+
+import { FormSection } from './FormSection'
+import { TEMPLATES } from '../../../../lib/templates/constants'
+
+import { FormValues } from '../../../../types'
+
+export function TemplatesSection() {
+  const { control } = useFormContext<FormValues>()
+
+  return (
+    <FormSection title="Choose a Template">
+      {TEMPLATES.map((templateId) => (
+        <label key={templateId} style={{ display: 'inline-block', padding: 8 }}>
+          Template {templateId}
+          <Controller
+            control={control}
+            name="selectedTemplate"
+            render={({ field }) => (
+              <input
+                type="radio"
+                onChange={(e) => field.onChange(Number(e.target.value))}
+                value={templateId}
+                checked={field.value === templateId}
+              />
+            )}
+          />
+        </label>
+      ))}
+    </FormSection>
+  )
+}

src/lib/templates/constants.ts

@@ -9,5 +9,17 @@ export const TEMPLATE8 = 8
 export const TEMPLATE9 = 9
 export const TEMPLATE10 = 10
 
+export const TEMPLATES = [
+  TEMPLATE1,
+  TEMPLATE2,
+  TEMPLATE3,
+  TEMPLATE4,
+  TEMPLATE5,
+  TEMPLATE6,
+  TEMPLATE7,
+  TEMPLATE8,
+  TEMPLATE9
+]
+
 export const NEWLINE = '\\\\'
 export const WHITESPACE = '\\ '