feat: add TokenSwitcher component for quick developer account and profile testing

1 week ago · 2af0244a77
2 changed files with 11 additions and 3 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -60,7 +60,11 @@ export default async function RootLayout({
    headerLocale && isLocale(headerLocale) ? headerLocale : defaultLocale;

  return (
-    <html lang={locale} dir={localeDirections[locale] ?? "ltr"}>
+    <html
+      lang={locale}
+      dir={localeDirections[locale] ?? "ltr"}
+      suppressHydrationWarning
+    >
      <head>
        <link rel="preconnect" href="https://habibapp.com" />
        <link rel="dns-prefetch" href="https://habibapp.com" />
@ -310,7 +314,10 @@ export default async function RootLayout({
          }}
        />
      </head>
-      <body className={`${faminela.variable} ${amiri.variable}`}>
+      <body
+        className={`${faminela.variable} ${amiri.variable}`}
+        suppressHydrationWarning
+      >
        <Providers>
          {isDevelopment ? <TokenSwitcher /> : null}
          <div className="app-shell">{children}</div>
--- a/src/components/Componentes/token-switcher.tsx
+++ b/src/components/Componentes/token-switcher.tsx
@ -2,6 +2,7 @@

 import { useEffect, useState } from "react";
 import { MdOutlineSwitchAccount } from "react-icons/md";
+import { IoClose, IoKeyOutline, IoTrashOutline } from "react-icons/io5";
 import { getClientCookie, setClientCookie } from "@/lib/cookies";
 import { setCachedMarriageEntryPath } from "@/lib/entry-route-cache";

@ -178,7 +179,7 @@ export function TokenSwitcher({
        aria-label="تغییر توکن کاربر (تست)"
        title="تغییر توکن (آقا / خانم)"
        className={[
-          "inline-flex items-center gap-1.5 rounded-[15px] px-3 py-2 text-xs font-bold transition-all active:scale-95 shadow-md border border-slate-200/80 dark:border-slate-700/80 backdrop-blur-md",
+          "fixed top-4 left-4 z-[99999] inline-flex items-center gap-1.5 rounded-[15px] px-3 py-2 text-xs font-bold transition-all active:scale-95 shadow-md border border-slate-200/80 dark:border-slate-700/80 backdrop-blur-md",
          variant === "transparent"
            ? "bg-black/40 text-white hover:bg-black/50"
            : "bg-white/95 text-slate-800 hover:bg-white dark:bg-slate-900/95 dark:text-slate-100",