現在的 SVG 與 PNG 的表單都建立完成，不過 SVG 建立 QR code 圖片的部分，現在是用 Next.js 提供的 Image 元件來顯示，但一開始是給它一個固定的大小，這篇文章來示範一下如何讓圖片的大小可以動態調整。

設定圖片大小狀態

跟前面的文章一樣，要設定狀態，就到 Zustand 設定好的 store 去新增：

interface Store {
  // 省略其他程式碼
  qrSize: number
  setQrSize: (size: number) => void
}
const useStore = create<Store>((set) => ({
  // 省略其他程式碼
  qrSize: 500, // 預設大小為 500
  setQrSize: (size) => set({ qrSize: size }),
}))

調整圖片大小

接下來在 SizeSlider.tsx 中，加上剛剛設定的狀態，並且在 onChange 的時候，更新狀態：

import { FC } from 'react'
import { UseFormRegister, UseFormSetValue } from 'react-hook-form'
import { SvgFormInputs } from './CreateSvgForm'
import useStore from '../store/index'

interface SizeSliderProps {
  register: UseFormRegister<SvgFormInputs>
  setValue: UseFormSetValue<SvgFormInputs>
}

const SizeSlider: FC<SizeSliderProps> = ({ register, setValue }) => {
  const { qrSize, setQrSize } = useStore()

  return (
    <div className='mb-4'>
      <label className='block font-bold mb-2'>調整圖片大小</label>
      <div className='flex'>
        <span>Min: 100</span>
        <input
          type='range'
          min='100'
          max='2000'
          value={qrSize} // 設置目前的值
          {...register('qrSize')}
          className='mx-2'
          onChange={(e) => {
            const newSize = parseInt(e.target.value, 10)
            setValue('qrSize', newSize) // 表單送出的圖片大小
            setQrSize(newSize) // 更新 qrSize 狀態
          }}
        />
        <span>Max: 2000</span>
      </div>
      <div className='mt-2'>目前大小：{qrSize} pixel</div>
    </div>
  )
}

這裡要注意的是，<input type='range' /> 的 value 要設定為狀態中的 qrSize，這樣才能讓它在調整的時候，可以顯示目前的大小。

而且本來沒有顯示目前的大小，所以加上一個 <div> 來顯示目前的大小，也加上了最大最小值的提示。

Next.js Image 大小調整

最後在 page.tsx 中，把 Image 的 width 與 height 設定為狀態中的 qrSize：

export default function Home() {
  const { imgSrc, errorsFromForm, selectedFormat, qrSize } = useStore()
  const hasErrors = Object.keys(errorsFromForm).length > 0

  return (
    <main className='flex min-h-screen flex-col items-center justify-between p-24'>
      <div className='container mx-auto p-4'>
        <h1 className='text-3xl mb-4'>QR Code 製造器</h1>
        <Switcher />
        <div className='mt-3'>
          {selectedFormat === 'SVG' ? <CreateSvgForm /> : <CreatePngForm />}
        </div>
        {imgSrc && Object.keys(errorsFromForm).length < 1 ? (
          <div className='flex justify-center mt-10'>
            <Image src={imgSrc} width={qrSize} height={qrSize} alt='QR Code Image' />
          </div>
        ) : (
          <p>{hasErrors ? '請輸入正確的資訊' : '請點擊「產生 QR Code」按鈕'}</p>
        )}
      </div>
    </main>
  )
}

這樣就可以讓圖片的大小可以動態調整了。