Template selection works

package.json

@@ -12,8 +12,11 @@
   },
   "dependencies": {
     "archiver": "^5.3.1",
+    "babel-runtime": "^6.26.0",
     "common-tags": "^1.8.2",
+    "core-js": "^3.33.3",
     "fs-extra": "^10.1.0",
+    "fslightbox-react": "^1.7.6",
     "jotai": "^1.7.0",
     "next": "^13.5.4",
     "node-latex": "^3.1.0",

src/components/generator/form/Form.tsx

@@ -70,7 +70,6 @@ export function Form() {
 
   const handleFormSubmit = useCallback(async () => {
     const formValues = convertFormData(formContext.getValues())
-    console.log(formValues)
     setResume({ ...resume, isLoading: true })
     try {
       const newResumeUrl = await generateResume(formValues)

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

@@ -1,8 +1,9 @@
 import styled from 'styled-components'
-import Lightbox from 'react-image-lightbox'
+import { useFormContext } from 'react-hook-form'
 import { FormSection } from './FormSection'
 import { Button } from '../../../core/Button'
-import { colors, sizes } from '../../../../theme'
+import { colors } from '../../../../theme'
+import FsLightbox from 'fslightbox-react'
 import { useState } from 'react'
 
 import image1 from '../img/1.png'
@@ -28,14 +29,6 @@ const images = [
   image10
 ]
 
-const Section = styled.section`
-  width: ${sizes.templatesSection.width};
-  background: ${colors.background};
-  border-left: 1px solid rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-  overflow-y: scroll;
-`
-
 const Grid = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -53,7 +46,7 @@ const Div = styled.div`
   align-items: center;
 `
 
-const Image = styled.img`
+const StyledImage = styled.img`
   position: relative;
   border-radius: 3px;
   color: #fff;
@@ -71,29 +64,43 @@ const Image = styled.img`
   }
 `
 
-type Props = {
-  selectedTemplate: number
-  selectTemplate: (templateId: number) => void
-}
-
-type State = {
-  isLightboxOpen: boolean
-  lightboxImageIndex: number
-}
-
 export function TemplatesSection() {
-  const [state, setState] = useState<State>({
-    isLightboxOpen: false,
-    lightboxImageIndex: 0
-  })
-
-  const showLightbox = (index: number) => {
-    setState({ isLightboxOpen: true, lightboxImageIndex: index })
-  }
+  const { watch, setValue } = useFormContext()
+  const [lightboxImageIndex, setLightboxImageIndex] = useState(0)
 
-  const hideLightbox = () => {
-    setState({ isLightboxOpen: false })
+  const setIndex = (index: number) => {
+    setLightboxImageIndex(index)
   }
 
-  return <FormSection title="Choose a template"></FormSection>
+  return (
+    <FormSection title="Choose a template">
+      <Grid>
+        {images.map((src, i) => (
+          <Div key={i}>
+            <StyledImage
+              active={i + 1 === watch('selectedTemplate')}
+              src={src.src}
+              onClick={() => setIndex(i)}
+            />
+            <Button
+              type="button"
+              onClick={() => setValue('selectedTemplate', i + 1)}
+              color={
+                i + 1 === watch('selectedTemplate')
+                  ? colors.silver
+                  : colors.white
+              }
+            >
+              Template {i + 1}
+            </Button>
+          </Div>
+        ))}
+      </Grid>
+      <FsLightbox
+        toggler={lightboxImageIndex}
+        sources={[images[lightboxImageIndex].src]}
+        captions={[`Template ${lightboxImageIndex + 1}`]}
+      />
+    </FormSection>
+  )
 }

src/pages/api/generate-pdf.ts

@@ -27,7 +27,7 @@ export default async function handler(
  */
 async function generatePDF(formData: FormValues) {
   const { texDoc, opts } = getTemplateData(formData)
-  const pdf = await latex(texDoc, opts)
+  const pdf = latex(texDoc, opts)
 
   return pdf
 }

src/pages/generator.tsx

@@ -4,8 +4,6 @@ import styled from 'styled-components'
 import { Form } from '../components/generator/form/Form'
 import { Header } from '../components/generator/layout/Header'
 import { Sidebar } from '../components/generator/layout/Sidebar'
-import { Templates } from '../components/generator/form/sections/TemplatesSection'
-
 const Preview = dynamic(
   async () => (await import('../components/generator/preview/Preview')).Preview,
   { ssr: false }

src/theme/colors.ts

@@ -3,6 +3,7 @@ export const lightGray = '#121217'
 export const gray = '#161619'
 export const white = '#ffffff'
 export const green = '#22d7a6'
+export const silver = '#c0c5ce'
 
 export const primary = green
 export const accent = green