From f02ca3cd63382ba0a44eb957287b233509bd8eb8 Mon Sep 17 00:00:00 2001
From: Taufik Hidayat <tfkhdyt@proton.me>
Date: Sun, 7 Jul 2024 21:29:38 +0700
Subject: [PATCH] fix: try to fix hydration error

---
 src/app/(dashboard)/users/[username]/page.tsx |  8 +++----
 src/app/(landing-page)/fitur.tsx              | 16 +++++++-------
 src/app/(landing-page)/keunggulan.tsx         |  4 ++--
 src/app/(landing-page)/mata-pelajaran.tsx     |  4 ++--
 src/app/(landing-page)/tentang-kami.tsx       |  4 ++--
 src/app/_components/modals/answer-modal.tsx   |  4 ++--
 .../_components/modals/edit-answer-modal.tsx  |  4 ++--
 src/app/auth/sign-in/signin-form.tsx          |  4 ++--
 src/app/auth/sign-up/signup-form.tsx          | 22 +++++++++----------
 9 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/app/(dashboard)/users/[username]/page.tsx b/src/app/(dashboard)/users/[username]/page.tsx
index 94d0f6a..6d845d4 100644
--- a/src/app/(dashboard)/users/[username]/page.tsx
+++ b/src/app/(dashboard)/users/[username]/page.tsx
@@ -78,22 +78,22 @@ export default async function UserPage({
             {user.name}
           </p>
           <UserStat username={user.username} />
-          <p className='hidden text-sm md:block md:text-base'>
+          <span className='hidden text-sm md:block md:text-base'>
             Bergabung sejak{' '}
             <span title={formatLongDateTime(user.createdAt)}>
               {dayjs(user.createdAt).format('D MMMM YYYY')}
             </span>
-          </p>
+          </span>
         </div>
       </div>
       <div className='m-4 mb-6 space-y-1 text-[#696984] md:hidden'>
         <p className='line-clamp-1 font-medium md:text-lg'>{user.name}</p>
-        <p className='text-sm'>
+        <span className='text-sm'>
           Bergabung sejak{' '}
           <span title={formatLongDateTime(user.createdAt)}>
             {dayjs(user.createdAt).format('D MMMM YYYY')}
           </span>
-        </p>
+        </span>
       </div>
       <div className='w-full'>
         <UserTabs
diff --git a/src/app/(landing-page)/fitur.tsx b/src/app/(landing-page)/fitur.tsx
index 7af82c2..8628aef 100644
--- a/src/app/(landing-page)/fitur.tsx
+++ b/src/app/(landing-page)/fitur.tsx
@@ -53,10 +53,10 @@ export function Fitur() {
       className='scroll-mt-20 bg-[url(/img/fitur/bg_2.svg)] bg-cover pb-32 pt-12'
       id='fitur'
     >
-      <div className='container space-y-12 md:px-12'>
-        <p className='text-center text-2xl font-bold text-[#F48C06]'>
+      <div className='container space-y-6 md:px-12'>
+        <div className='text-center text-2xl font-bold text-[#F48C06]'>
           <span className='text-[#77425A]'>Fitur</span> Kami
-        </p>
+        </div>
         <p className='text-center leading-loose text-[#696984]'>
           Fitur yang sangat luar biasa ini, dapat membuat kegiatan belajar
           menjadi lebih efisien
@@ -64,7 +64,7 @@ export function Fitur() {
         {fitur.map((each, index) => (
           <section
             className={clsx(
-              'flex scroll-mt-20 flex-col items-center gap-8 pt-12 md:flex-row lg:pt-20',
+              'flex scroll-mt-20 flex-col items-center gap-8 pt-12 md:flex-row',
               index % 2 === 1 && 'md:flex-row-reverse',
             )}
             id={each.image.alt.replaceAll(' ', '-').toLowerCase()}
@@ -82,22 +82,22 @@ export function Fitur() {
             <div className='space-y-8 md:w-1/2 md:p-6 lg:p-32'>
               {match(index % 2)
                 .with(0, () => (
-                  <p className='text-center text-2xl font-extrabold text-[#77425A]'>
+                  <div className='text-center text-2xl font-extrabold text-[#77425A]'>
                     <span className='text-[#F48C06]'>{each.title[0]}</span>{' '}
                     {each.title[1]}
                     {each.isComingSoon && (
                       <span className='text-xs'> (Coming soon)</span>
                     )}
-                  </p>
+                  </div>
                 ))
                 .otherwise(() => (
-                  <p className='text-center text-2xl font-extrabold text-[#F48C06]'>
+                  <div className='text-center text-2xl font-extrabold text-[#F48C06]'>
                     <span className='text-[#77425A]'>{each.title[0]}</span>{' '}
                     {each.title[1]}
                     {each.isComingSoon && (
                       <span className='text-xs'> (Coming soon)</span>
                     )}
-                  </p>
+                  </div>
                 ))}
 
               <p className='text-center leading-loose text-[#696984]'>
diff --git a/src/app/(landing-page)/keunggulan.tsx b/src/app/(landing-page)/keunggulan.tsx
index 8ae379b..46d8ba6 100644
--- a/src/app/(landing-page)/keunggulan.tsx
+++ b/src/app/(landing-page)/keunggulan.tsx
@@ -42,9 +42,9 @@ export function Keunggulan() {
       id='keunggulan'
     >
       <div className='container space-y-12 md:px-16'>
-        <p className='text-center text-2xl font-bold text-[#F48C06]'>
+        <div className='text-center text-2xl font-bold text-[#F48C06] mx-auto w-full'>
           <span className='text-[#77425A]'>Keunggulan</span> Platform Kami
-        </p>
+        </div>
         <p className='mx-auto max-w-4xl text-center leading-loose text-[#696984] md:text-lg md:leading-loose'>
           Yukitanya adalah salah satu platform tanya jawab online yang
           menggabungkan semua alat yang diperlukan untuk menunjang tugas
diff --git a/src/app/(landing-page)/mata-pelajaran.tsx b/src/app/(landing-page)/mata-pelajaran.tsx
index e5eaf21..3ec20a5 100644
--- a/src/app/(landing-page)/mata-pelajaran.tsx
+++ b/src/app/(landing-page)/mata-pelajaran.tsx
@@ -11,10 +11,10 @@ export function MataPelajaran() {
       id='tentang-kami'
     >
       <div className='container space-y-16 text-[#696984] md:px-12'>
-        <p className='text-center text-2xl font-bold text-[#77425A]'>
+        <div className='text-center text-2xl font-bold text-[#77425A]'>
           Yuk tanya{' '}
           <span className='text-[#F48C06]'>pelajaran favoritmu disini!</span>
-        </p>
+        </div>
         <div className='grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-7'>
           {mapel.map((each) => (
             <div className='flex flex-col items-center' key={each.name}>
diff --git a/src/app/(landing-page)/tentang-kami.tsx b/src/app/(landing-page)/tentang-kami.tsx
index 6cc04b0..9074838 100644
--- a/src/app/(landing-page)/tentang-kami.tsx
+++ b/src/app/(landing-page)/tentang-kami.tsx
@@ -4,9 +4,9 @@ export function TentangKami() {
   return (
     <section className='bg-[url(/img/tentang_kami_bg.svg)] bg-cover pt-10'>
       <div className='container space-y-12 md:px-16'>
-        <p className='text-center text-2xl font-bold text-[#77425A]'>
+        <div className='text-center text-2xl font-bold text-[#77425A]'>
           <span className='text-[#F48C06]'>Apa itu</span> Yukitanya?
-        </p>
+        </div>
         <p className='mx-auto max-w-4xl text-center leading-loose text-[#696984] lg:text-lg lg:leading-loose'>
           Yukitanya adalah sebuah website yang menghubungkan banyak siswa ke
           dalam sebuah forum diskusi untuk menyelesaikan tugas sekolah secara
diff --git a/src/app/_components/modals/answer-modal.tsx b/src/app/_components/modals/answer-modal.tsx
index 3057c3e..940bfda 100644
--- a/src/app/_components/modals/answer-modal.tsx
+++ b/src/app/_components/modals/answer-modal.tsx
@@ -227,7 +227,7 @@ export function AnswerModal({
                       </FormItem>
                     )}
                   />
-                  <p className='text-right text-[#696984]'>
+                  <div className='text-right text-[#696984]'>
                     <span
                       className={clsx(
                         answerLength > 1000 && 'font-semibold text-red-700',
@@ -236,7 +236,7 @@ export function AnswerModal({
                       {answerLength}
                     </span>
                     /1000
-                  </p>
+                  </div>
                   <div className='flex justify-between flex-wrap-reverse gap-4 items-center'>
                     <Turnstile
                       siteKey={environment.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
diff --git a/src/app/_components/modals/edit-answer-modal.tsx b/src/app/_components/modals/edit-answer-modal.tsx
index d2b4851..03d0474 100644
--- a/src/app/_components/modals/edit-answer-modal.tsx
+++ b/src/app/_components/modals/edit-answer-modal.tsx
@@ -227,7 +227,7 @@ export function EditAnswerModal({
                       </FormItem>
                     )}
                   />
-                  <p className='text-right text-[#696984]'>
+                  <div className='text-right text-[#696984]'>
                     <span
                       className={clsx(
                         answerLength > 1000 && 'font-semibold text-red-700',
@@ -236,7 +236,7 @@ export function EditAnswerModal({
                       {answerLength}
                     </span>
                     /1000
-                  </p>
+                  </div>
                   <div className='flex justify-between flex-wrap-reverse gap-4 items-center'>
                     <Turnstile
                       siteKey={environment.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
diff --git a/src/app/auth/sign-in/signin-form.tsx b/src/app/auth/sign-in/signin-form.tsx
index 870eb2e..bb8f441 100644
--- a/src/app/auth/sign-in/signin-form.tsx
+++ b/src/app/auth/sign-in/signin-form.tsx
@@ -175,7 +175,7 @@ export function SigninForm() {
           <Facebook color='black' />
         </Button>
       </div>
-      <p className='mt-4 text-center text-sm font-medium'>
+      <div className='mt-4 text-center text-sm font-medium'>
         Belum punya akun?{' '}
         <Link
           className='font-semibold text-[#00B6EF] underline'
@@ -183,7 +183,7 @@ export function SigninForm() {
         >
           Daftar
         </Link>
-      </p>
+      </div>
     </>
   );
 }
diff --git a/src/app/auth/sign-up/signup-form.tsx b/src/app/auth/sign-up/signup-form.tsx
index 88fdbe0..f148437 100644
--- a/src/app/auth/sign-up/signup-form.tsx
+++ b/src/app/auth/sign-up/signup-form.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile';
-import { Eye, EyeOff, Facebook } from 'lucide-react';
+import { Eye, EyeOff, FacebookIcon } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -49,12 +49,12 @@ const usePasswordStrength = (password: string) => {
   const [result, setResult] = useState<ZxcvbnResult | undefined>();
   const deferredPassword = useDebounce(password, 500);
 
-  const calculatePwdStrength = async (pwd: string) => {
-    const response = await zxcvbnAsync(pwd);
-    setResult(response);
-  };
-
   useEffect(() => {
+    const calculatePwdStrength = async (pwd: string) => {
+      const response = await zxcvbnAsync(pwd);
+      setResult(response);
+    };
+
     if (deferredPassword) {
       calculatePwdStrength(deferredPassword);
     }
@@ -190,7 +190,7 @@ export function SignupForm() {
               <FormItem>
                 <FormLabel>Password</FormLabel>
                 <FormControl>
-                  <>
+                  <div>
                     <span className='flex space-x-2'>
                       <Input
                         placeholder='Password'
@@ -238,7 +238,7 @@ export function SignupForm() {
                           .otherwise(() => 'Empty')}
                       </span>
                     </div>
-                  </>
+                  </div>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -327,10 +327,10 @@ export function SignupForm() {
             })
           }
         >
-          <Facebook color='black' />
+          <FacebookIcon color='black' />
         </Button>
       </div>
-      <p className='mt-4 text-center text-sm font-medium'>
+      <div className='mt-4 text-center text-sm font-medium'>
         Sudah punya akun?{' '}
         <Link
           className='font-semibold text-[#00B6EF] underline'
@@ -338,7 +338,7 @@ export function SignupForm() {
         >
           Masuk
         </Link>
-      </p>
+      </div>
     </>
   );
 }