Refactor layout components and update imports

alon710 · Oct 7, 2024 · be962e4 · be962e4
1 parent c925687
commit be962e4
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -3,9 +3,9 @@
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import MobileDrawer from "@/components/layout/MobileDrawer";
-import Header from "@/components/layout/Header";
+import TopMenu from "@/components/layout/TopMenu";
 import MainContent from "@/components/layout/MainContent";
-import { SiteFooter } from "@/components/ui/footer";
+import SiteFooter from "@/components/layout/Footer";
 import { links } from "@/config/menu";
 
 export default function DashboardLayout({
@@ -41,13 +41,12 @@ export default function DashboardLayout({
 
   return (
     <div className="flex min-h-screen w-full flex-col">
-      <Header onMobileMenuOpen={() => setIsMobileMenuOpen(true)} />
+      <TopMenu onMobileMenuOpen={() => setIsMobileMenuOpen(true)} />
       <MobileDrawer
         isOpen={isMobileMenuOpen}
         onClose={() => setIsMobileMenuOpen(false)}
       />
 
-      {/* Main Content */}
       <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
         {isHydrated ? (
           <MainContent currentPath={currentPath} sideLinks={sideLinks}>

diff --git a/components/ui/footer.tsx → components/layout/Footer.tsx b/components/ui/footer.tsx → components/layout/Footer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Card, CardContent } from "@/components/ui/card";
 
-export function SiteFooter() {
+export default function SiteFooter() {
   return (
     <footer className="fixed bottom-4 left-4 right-4">
       <Card className="bg-muted text-muted-foreground">
@@ -52,5 +52,3 @@ export function SiteFooter() {
     </footer>
   );
 }
-
-export default SiteFooter;
diff --git a/components/layout/MainContent.tsx b/components/layout/MainContent.tsx
@@ -8,15 +8,21 @@ interface MainContentProps {
   sideLinks?: { [href: string]: string };
 }
 
-export default function main_content({
+export default function MainContent({
   children,
   currentPath,
   sideLinks,
 }: MainContentProps) {
+  const pageLabel =
+    links?.[currentPath?.split("/").slice(0, 3).join("/")].label;
   return (
     <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
       {sideLinks && (
-        <SideLinks sideLinks={sideLinks} currentPath={currentPath} />
+        <SideLinks
+          sideLinks={sideLinks}
+          currentPath={currentPath}
+          pageLabel={pageLabel}
+        />
       )}
       <div className="grid gap-6">
         <Card>
@@ -25,9 +31,7 @@ export default function main_content({
           </div>
           <CardFooter className="border-t px-6 py-4">
             <div className="text-sm text-muted-foreground">
-              {links?.[currentPath?.split("/").slice(0, 3).join("/")]?.label +
-                " > " +
-                sideLinks?.[currentPath]}
+              {pageLabel + " > " + sideLinks?.[currentPath]}
             </div>
           </CardFooter>
         </Card>

diff --git a/components/layout/SideLinks.tsx b/components/layout/SideLinks.tsx
@@ -4,11 +4,17 @@ import { getLinkClassName } from "@/utils/link";
 interface SideLinksProps {
   sideLinks: { [href: string]: string };
   currentPath: string;
+  pageLabel: string;
 }
 
-export default function side_links({ sideLinks, currentPath }: SideLinksProps) {
+export default function SideLinks({
+  sideLinks,
+  currentPath,
+  pageLabel,
+}: SideLinksProps) {
   return (
     <nav className="grid gap-4 text-sm text-muted-foreground">
+      <div className="text-lg font-semibold text-primary">{pageLabel}</div>
       {Object.entries(sideLinks).map(([href, label]) => (
         <Link
           key={href}

diff --git a/components/layout/Header.tsx → components/layout/TopMenu.tsx b/components/layout/Header.tsx → components/layout/TopMenu.tsx
@@ -10,11 +10,11 @@ import UserMenu from "@/components/layout/UserMenu";
 import { links } from "@/config/menu";
 import { getLinkClassName } from "@/utils/link";
 
-interface HeaderProps {
+interface TopMenuProps {
   onMobileMenuOpen: () => void;
 }
 
-export default function Header({ onMobileMenuOpen }: HeaderProps) {
+export default function TopMenu({ onMobileMenuOpen }: TopMenuProps) {
   const [isHydrated, setIsHydrated] = useState(false);
   const currentPath = usePathname();
 

diff --git a/components/layout/UserMenu.tsx b/components/layout/UserMenu.tsx
@@ -11,7 +11,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
-export default function user_menu() {
+export default function UserMenu() {
   return (
     <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
       <form className="ml-auto flex-1 sm:flex-initial">