fix: remove hook and ssr false dynamic loading

moonlitgrace · Oct 30, 2024 · 9f9e3ed · 9f9e3ed
1 parent d221786
commit 9f9e3ed
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 63 deletions.
diff --git a/app/(routes)/(admin)/layout.tsx b/app/(routes)/(admin)/layout.tsx
@@ -1,18 +1,14 @@
-import dynamic from 'next/dynamic';
+import AdminBar from '@/app/_components/_admin/admin-bar';
 import React from 'react';
 
-const DynamicAdminBar = dynamic(() => import('@/app/_components/_admin/admin-bar'), {
-  ssr: false,
-});
-
 export default function ProtectedLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <div className="mb-40 mt-10 flex w-full flex-col gap-10 md:mb-10">
-      <DynamicAdminBar />
+      <AdminBar />
       {children}
     </div>
   );

diff --git a/app/(routes)/(main)/layout.tsx b/app/(routes)/(main)/layout.tsx
@@ -1,10 +1,6 @@
-import dynamic from 'next/dynamic';
+import AppBar from '@/app/_components/_main/app-bar';
 import React from 'react';
 
-const DynamicAppBar = dynamic(() => import('@/app/_components/_main/app-bar'), {
-  ssr: false,
-});
-
 export default function MainLayout({
   children,
 }: Readonly<{
@@ -13,7 +9,7 @@ export default function MainLayout({
   return (
     <>
       {children}
-      <DynamicAppBar />
+      <AppBar />
     </>
   );
 }
diff --git a/app/_components/_admin/admin-bar.tsx b/app/_components/_admin/admin-bar.tsx
@@ -3,18 +3,16 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import PencilIcon from '@/components/icons/pencil';
-import { useScreenDevice } from '@/hooks/use-screen-device';
 import HomeIcon from '@/components/icons/home';
+import { ResponsiveTooltipContent } from '@/app/_components/responsive';
 
 const AdminBar = () => {
   const pathname = usePathname();
 
-  const { isMobile } = useScreenDevice();
-
   const MAPPING = {
     links: {
       home: {
@@ -49,9 +47,7 @@ const AdminBar = () => {
                 </Link>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
       </div>

diff --git a/app/_components/_main/app-bar.tsx b/app/_components/_main/app-bar.tsx
@@ -4,21 +4,17 @@ import Link from 'next/link';
 import HomeIcon from '@/components/icons/home';
 import { usePathname } from 'next/navigation';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import PencilIcon from '@/components/icons/pencil';
 import GithubIcon from '@/components/icons/github';
 import MailIcon from '@/components/icons/mail';
-import { Separator } from '@/components/ui/separator';
-import { useScreenDevice } from '@/hooks/use-screen-device';
-import { cn } from '@/lib/utils';
+import { ResponsiveSeparator, ResponsiveTooltipContent } from '@/app/_components/responsive';
 
 const AppBar = () => {
   const pathname = usePathname();
 
-  const { isMobile } = useScreenDevice();
-
   const MAPPING = {
     links: {
       home: {
@@ -65,15 +61,10 @@ const AppBar = () => {
                 </Link>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
-        <Separator
-          orientation={isMobile ? 'vertical' : 'horizontal'}
-          className={cn(isMobile ? 'h-5' : 'h-px w-1/2')}
-        />
+        <ResponsiveSeparator />
         {Object.values(MAPPING.socials).map((item, idx) => (
           <Tooltip key={idx}>
             <TooltipTrigger asChild>
@@ -91,9 +82,7 @@ const AppBar = () => {
                 </a>
               </Button>
             </TooltipTrigger>
-            <TooltipContent sideOffset={15} side={isMobile ? 'top' : 'right'}>
-              <p>{item.label}</p>
-            </TooltipContent>
+            <ResponsiveTooltipContent content={item.label} />
           </Tooltip>
         ))}
       </div>

diff --git a/app/_components/responsive.tsx b/app/_components/responsive.tsx
@@ -0,0 +1,24 @@
+import { Separator } from '@/components/ui/separator';
+import { TooltipContent } from '@/components/ui/tooltip';
+
+export const ResponsiveTooltipContent = ({ content }: { content: string }) => {
+  return (
+    <>
+      <TooltipContent className="hidden md:flex" sideOffset={15} side="right">
+        <p>{content}</p>
+      </TooltipContent>
+      <TooltipContent className="md:hidden" sideOffset={15} side="top">
+        <p>{content}</p>
+      </TooltipContent>
+    </>
+  );
+};
+
+export const ResponsiveSeparator = () => {
+  return (
+    <>
+      <Separator orientation="horizontal" className="hidden h-px w-1/2 md:flex" />
+      <Separator orientation="vertical" className="h-5 md:hidden" />
+    </>
+  );
+};
diff --git a/hooks/use-screen-device.ts b/hooks/use-screen-device.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }