better rendering patern

app/(app)/_layout/Sidebar.tsx

@@ -22,12 +22,14 @@ import {
 import dynamic from "next/dynamic";
 import { useModal } from "@/app/_providers/modal/provider";
 import { IconType } from "react-icons";
+
 const ZapPickerModal = dynamic(() => import("@/components/Modals/ZapPicker"), {
   ssr: false,
 });
-const NewEventModal = dynamic(() => import("@/components/Modals/NewEvent"), {
+const AddNoteButton = dynamic(() => import("./components/AddNoteButton"), {
   ssr: false,
 });
+
 type NavigationLink = {
   type: "link";
   href: string;
@@ -209,23 +211,7 @@ export default function Sidebar() {
               }
             })}
             <div className="center py-2 xl:justify-start">
-              <Button
+              <AddNoteButton />
-                onClick={() => modal?.show(<NewEventModal />)}
-                size={"icon"}
-                className="xl:hidden"
-              >
-                <RiAddFill className="h-6 w-6" />
-              </Button>
-              <Button
-                onClick={() => modal?.show(<NewEventModal />)}
-                size={"lg"}
-                className="hidden xl:flex"
-              >
-                <div className="center gap-x-1.5">
-                  <RiAddFill className="h-6 w-6" />
-                  <span>Add Note</span>
-                </div>
-              </Button>
             </div>
           </div>
         </div>

app/(app)/_layout/components/AddNoteButton.tsx

@@ -0,0 +1,29 @@
+import { useModal } from "@/app/_providers/modal/provider";
+import { Button } from "@/components/ui/button";
+import { RiAddFill } from "react-icons/ri";
+import NewEventModal from "@/components/Modals/NewEvent";
+
+export default function AddNoteButton() {
+  const modal = useModal();
+  return (
+    <>
+      <Button
+        onClick={() => modal?.show(<NewEventModal />)}
+        size={"icon"}
+        className="xl:hidden"
+      >
+        <RiAddFill className="h-6 w-6" />
+      </Button>
+      <Button
+        onClick={() => modal?.show(<NewEventModal />)}
+        size={"lg"}
+        className="hidden xl:flex"
+      >
+        <div className="center gap-x-1.5">
+          <RiAddFill className="h-6 w-6" />
+          <span>Add Note</span>
+        </div>
+      </Button>
+    </>
+  );
+}