fix: valueAsNumber for level options

JimmyLv · Mar 13, 2023 · dda1ef6 · dda1ef6 · vercel · Mar 13, 2023
1 parent e22b1fd
commit dda1ef6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/components/PromptOptions.tsx b/components/PromptOptions.tsx
@@ -7,12 +7,12 @@ export function PromptOptions({
   getValues,
 }: {
   // TODO: add types
-  getValues: UseFormReturn["getValues"];
   register: any;
+  getValues: UseFormReturn["getValues"];
 }) {
-  const shouldShowTimestamp = getValues('showTimestamp');
+  const shouldShowTimestamp = getValues("showTimestamp");
   return (
-    <div className="mt-6 md:mt-10 grid grid-cols-2 md:grid-cols-3 items-center gap-x-10 gap-y-2 md:gap-y-6">
+    <div className="mt-6 grid grid-cols-2 items-center gap-x-10 gap-y-2 md:mt-10 md:grid-cols-3 md:gap-y-6">
       <label className="relative inline-flex cursor-pointer items-center">
         <input
           type="checkbox"
@@ -49,7 +49,9 @@ export function PromptOptions({
           {...register("outputLanguage")}
         >
           {Object.keys(PROMPT_LANGUAGE_MAP).map((k: string) => (
-            <option value={PROMPT_LANGUAGE_MAP[k]}>{k}</option>
+            <option key={PROMPT_LANGUAGE_MAP[k]} value={PROMPT_LANGUAGE_MAP[k]}>
+              {k}
+            </option>
           ))}
         </select>
       </div>
@@ -60,16 +62,20 @@ export function PromptOptions({
           className="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
         >
           要点个数
-          <span className="text-gray-500">(≤{getValues("sentenceNumber")})</span>
+          <span className="text-gray-500">
+            (≤{getValues("sentenceNumber")})
+          </span>
         </label>
         <input
           id="sentenceNumber"
           type="range"
           min={3}
           max={10}
           step={1}
-          className="h-2 w-full cursor-pointer accent-black rounded-lg bg-gray-200 dark:bg-gray-700"
-          {...register("sentenceNumber")}
+          className="h-2 w-full cursor-pointer rounded-lg bg-gray-200 accent-black dark:bg-gray-700"
+          {...register("sentenceNumber", {
+            valueAsNumber: true,
+          })}
         />
       </div>
       <div>
@@ -86,9 +92,11 @@ export function PromptOptions({
           min={1}
           max={5}
           step={1}
-          className="h-2 w-full cursor-pointer accent-black rounded-lg bg-gray-200 dark:bg-gray-700"
+          className="h-2 w-full cursor-pointer rounded-lg bg-gray-200 accent-black dark:bg-gray-700"
           disabled={shouldShowTimestamp}
-          {...register("outlineLevel")}
+          {...register("outlineLevel", {
+            valueAsNumber: true,
+          })}
         />
       </div>
       <div>
@@ -105,8 +113,10 @@ export function PromptOptions({
           min={300}
           max={1000}
           step={10}
-          className="h-2 w-full accent-black cursor-pointer rounded-lg bg-gray-200 dark:bg-gray-700"
-          {...register("detailLevel")}
+          className="h-2 w-full cursor-pointer rounded-lg bg-gray-200 accent-black dark:bg-gray-700"
+          {...register("detailLevel", {
+            valueAsNumber: true,
+          })}
         />
       </div>
     </div>

diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
@@ -178,12 +178,15 @@ export const Home: NextPage<{
   };
 
   return (
-    <div className="mt-10 w-full sm:mt-40 px-4 lg:px-0">
+    <div className="mt-10 w-full px-4 sm:mt-40 lg:px-0">
       <UsageDescription />
       <TypingSlogan />
       <UsageAction />
       <UserKeyInput value={userKey} onChange={handleApiKeyChange} />
-      <form onSubmit={handleSubmit(onFormSubmit)} className="grid place-items-center">
+      <form
+        onSubmit={handleSubmit(onFormSubmit)}
+        className="grid place-items-center"
+      >
         <input
           type="text"
           value={currentVideoUrl}