set data ssr in page login && login-verify and panel page

app/login-verify/page.js

@@ -1,24 +1,8 @@
-"use client";
+import ContentVerify from "@/components/register/ContentVerify";
-
-import RegisterPage from "@/components/register";
-import SetCodePage from "@/components/register/SetCodePage";
-import LogInPage from "@/components/register/LogInPage";
-import { useState } from "react";
 
 function LoginVerify() {
-  const [isSendMsg, setIsSendMsg] = useState(false);
-
   return (
-    <RegisterPage>
+    <ContentVerify />
-      {isSendMsg ? (
-        <SetCodePage
-          setIsSendMsg={setIsSendMsg}
-          link={`/account/${localStorage.getItem("doctor-id")}`}
-        />
-      ) : (
-        <LogInPage setIsSendMsg={setIsSendMsg} />
-      )}
-    </RegisterPage>
   );
 }
 

app/login/page.js

@@ -1,22 +1,8 @@
-"use client";
+import ContentLogin from "@/components/register/ContentLogin";
-import RegisterPage from "@/components/register";
-import SetCodePage from "@/components/register/SetCodePage";
-import LogInPage from "@/components/register/LogInPage";
-import { useState } from "react";
 
 function LogIn() {
-  const [isSendMsg, setIsSendMsg] = useState(false);
-
   return (
-    <div>
+    <ContentLogin />
-      <RegisterPage>
-        {isSendMsg ? (
-          <SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
-        ) : (
-          <LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />
-        )}
-      </RegisterPage>
-    </div>
   );
 }
 

app/panel/(layout)/layout.js

@@ -1,61 +1,8 @@
-"use client";
+import Content from "@/components/panel/Content";
-
-import { useEffect, useState } from "react";
-import Header from "@/components/layoutPanel/header";
-import Sidebar from "@/components/layoutPanel/sidebar";
-import Information from "@/data/information.json";
-import UserDetail from "@/components/layoutPanel/userDetail";
-import { usePathname } from "next/navigation";
-import BgGray from "@/components/layoutPanel/sidebar/BgGray";
 
 function LayoutPanel({ children }) {
-  const pathname = usePathname();
-  const [active, setActive] = useState(false);
-  const [open, setOpen] = useState(true);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
   return (
-    <div className="flex min-h-screen dark:bg-[#1F1D2B]">
+    <Content children={children} />
-      <Sidebar
-        open={open}
-        active={active}
-        setOpen={setOpen}
-        setActive={setActive}
-      />
-      <BgGray isActive={active} setIsActive={setActive} />
-      <main
-        className={`
-          w-full transition-all duration-500 dark:bg-[#1F1D2B]
-          ${
-            pathname.includes("dashboard")
-              ? open
-                ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
-                : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
-              : open
-              ? "md:w-[calc(100%-243px)]"
-              : "md:w-[calc(100%-96px)]"
-          }
-        `}
-      >
-        <Header
-          data={Information}
-          setActive={setActive}
-          disableProfile={pathname.includes("dashboard")}
-        />
-        <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA] dark:bg-[#1F1D2B]">
-          {children}
-        </section>
-      </main>
-      {pathname.includes("dashboard") && (
-        <UserDetail data={Information} loading={loading} />
-      )}
-    </div>
   );
 }
 

components/panel/Content.js

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Header from "@/components/layoutPanel/header";
+import Sidebar from "@/components/layoutPanel/sidebar";
+import Information from "@/data/information.json";
+import UserDetail from "@/components/layoutPanel/userDetail";
+import { usePathname } from "next/navigation";
+import BgGray from "@/components/layoutPanel/sidebar/BgGray";
+
+function Content({ children }) {
+    const pathname = usePathname();
+    const [active, setActive] = useState(false);
+    const [open, setOpen] = useState(true);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
+    return (
+        <div className="flex min-h-screen dark:bg-[#1F1D2B]">
+            <Sidebar
+                open={open}
+                active={active}
+                setOpen={setOpen}
+                setActive={setActive}
+            />
+            <BgGray isActive={active} setIsActive={setActive} />
+            <main
+                className={`
+          w-full transition-all duration-500 dark:bg-[#1F1D2B]
+          ${pathname.includes("dashboard")
+                        ? open
+                            ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
+                            : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
+                        : open
+                            ? "md:w-[calc(100%-243px)]"
+                            : "md:w-[calc(100%-96px)]"
+                    }
+        `}
+            >
+                <Header
+                    data={Information}
+                    setActive={setActive}
+                    disableProfile={pathname.includes("dashboard")}
+                />
+                <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA] dark:bg-[#1F1D2B]">
+                    {children}
+                </section>
+            </main>
+            {pathname.includes("dashboard") && (
+                <UserDetail data={Information} loading={loading} />
+            )}
+        </div>
+    );
+}
+
+export default Content;

components/register/ContentLogin.js

@@ -0,0 +1,24 @@
+"use client";
+
+import RegisterPage from "@/components/register";
+import SetCodePage from "@/components/register/SetCodePage";
+import LogInPage from "@/components/register/LogInPage";
+import { useState } from "react";
+
+function ContentLogin() {
+    const [isSendMsg, setIsSendMsg] = useState(false);
+
+    return (
+        <div>
+            <RegisterPage>
+                {isSendMsg ? (
+                    <SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
+                ) : (
+                    <LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />
+                )}
+            </RegisterPage>
+        </div>
+    );
+}
+
+export default ContentLogin;

components/register/ContentVerify.js

@@ -0,0 +1,25 @@
+"use client";
+
+import RegisterPage from "@/components/register";
+import SetCodePage from "@/components/register/SetCodePage";
+import LogInPage from "@/components/register/LogInPage";
+import { useState } from "react";
+
+function ContentVerify() {
+    const [isSendMsg, setIsSendMsg] = useState(false);
+
+    return (
+        <RegisterPage>
+            {isSendMsg ? (
+                <SetCodePage
+                    setIsSendMsg={setIsSendMsg}
+                    link={`/account/${localStorage.getItem("doctor-id")}`}
+                />
+            ) : (
+                <LogInPage setIsSendMsg={setIsSendMsg} />
+            )}
+        </RegisterPage>
+    );
+}
+
+export default ContentVerify;