fix: disabled when shouldShowTimestamp

components/PromptOptions.tsx

@@ -10,6 +10,7 @@ export function PromptOptions({
   getValues: UseFormReturn["getValues"];
   register: any;
 }) {
+  const shouldShowTimestamp = getValues('showTimestamp');
   return (
     <div className="mt-10 grid grid-cols-3 items-center gap-x-10 gap-y-6">
       <label className="relative inline-flex cursor-pointer items-center">
@@ -27,8 +28,8 @@ export function PromptOptions({
       <label className="relative inline-flex cursor-pointer items-center">
         <input
           type="checkbox"
-          value=""
           className="peer sr-only"
+          disabled={shouldShowTimestamp}
           {...register("showEmoji")}
         />
         <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-sky-400 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-sky-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-sky-800"></div>
@@ -46,6 +47,7 @@ export function PromptOptions({
         <select
           id="outputLanguage"
           className="block w-full rounded-md border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-sky-500 focus:ring-sky-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-sky-500 dark:focus:ring-sky-500"
+          disabled={shouldShowTimestamp}
           {...register("outputLanguage")}
         >
           {Object.keys(PROMPT_LANGUAGE_MAP).map((k: string) => (
@@ -69,6 +71,7 @@ export function PromptOptions({
           max={10}
           step={1}
           className="h-2 w-full cursor-pointer accent-black rounded-lg bg-gray-200 dark:bg-gray-700"
+          disabled={shouldShowTimestamp}
           {...register("sentenceNumber")}
         />
       </div>
@@ -87,6 +90,7 @@ export function PromptOptions({
           max={5}
           step={1}
           className="h-2 w-full cursor-pointer accent-black rounded-lg bg-gray-200 dark:bg-gray-700"
+          disabled={shouldShowTimestamp}
           {...register("outlineLevel")}
         />
       </div>
@@ -105,6 +109,7 @@ export function PromptOptions({
           max={1000}
           step={10}
           className="h-2 w-full accent-black cursor-pointer rounded-lg bg-gray-200 dark:bg-gray-700"
+          disabled={shouldShowTimestamp}
           {...register("detailLevel")}
         />
       </div>

pages/[...slug].tsx

@@ -64,9 +64,7 @@ export const Home: NextPage<{
     storage: typeof window !== "undefined" ? window.localStorage : undefined, // default window.sessionStorage
     // exclude: ['baz']
   });
-  // const formValues = getValues();
   const shouldShowTimestamp = getValues("showTimestamp");
-  console.log("========formValues========", shouldShowTimestamp);
 
   useEffect(() => {
     licenseKey && setUserKey(licenseKey);