From 5ae3ad31d6c7c67c84f2ac61e3a942da1596fcfb Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Thu, 13 Mar 2025 14:57:22 +0800
Subject: [PATCH] fix portofolio layout

---
 src/app_modules/katalog/main/layout_new.tsx   | 57 ++++++++++++++-----
 .../button/comp_button_edit_logo_bisnis.tsx   |  2 +-
 .../katalog/portofolio/create/layout.tsx      | 18 ++++--
 .../katalog/portofolio/edit/data/layout.tsx   | 18 ++++--
 .../katalog/portofolio/edit/logo/layout.tsx   | 18 ++++--
 .../katalog/portofolio/edit/medsos/layout.tsx | 18 ++++--
 .../portofolio/edit/medsos/ui_edit_medsos.tsx |  7 ++-
 .../katalog/portofolio/ui/ui_layout_new.tsx   | 28 +++++++--
 .../ui/ui_list_detail_portofolio_new.tsx      |  2 +-
 .../view/list_detail_portofolio_new.tsx       | 35 ++++++++----
 .../katalog/profile/create/layout.tsx         | 19 +++++--
 .../katalog/profile/edit/layout.tsx           | 18 ++++--
 .../profile/upload/foto_background/layout.tsx | 18 ++++--
 .../profile/upload/foto_profile/layout.tsx    | 20 +++++--
 14 files changed, 207 insertions(+), 71 deletions(-)

diff --git a/src/app_modules/katalog/main/layout_new.tsx b/src/app_modules/katalog/main/layout_new.tsx
index 5fe1b898..c273d834 100644
--- a/src/app_modules/katalog/main/layout_new.tsx
+++ b/src/app_modules/katalog/main/layout_new.tsx
@@ -1,17 +1,17 @@
 "use client";
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import {
-  UIGlobal_LayoutHeaderTamplate,
-  UIGlobal_LayoutTamplate,
-} from "@/app_modules/_global/ui";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { apiGetUserProfile } from "@/app_modules/user";
-import { ActionIcon, Skeleton } from "@mantine/core";
+import { ActionIcon } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { IconDotsVertical } from "@tabler/icons-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import DrawerKatalogNew from "../component/drawer_katalog_new";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function LayoutKatalogNew({
   children,
@@ -48,7 +48,7 @@ export default function LayoutKatalogNew({
 
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="KATALOG"
@@ -73,13 +73,40 @@ export default function LayoutKatalogNew({
         }
       >
         {children}
-        <DrawerKatalogNew
-          opened={opened}
-          close={() => close()}
-          userRoleId={userRoleId}
-          userId={userLoginId}
-        />
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header
+            title="KATALOG"
+            customButtonRight={
+              loading ? (
+                <ActionIcon disabled variant="transparent">
+                  <CustomSkeleton h={20} w={20} radius={"100%"} />
+                </ActionIcon>
+              ) : authorId == userLoginId ? (
+                <ActionIcon
+                  c="white"
+                  variant="transparent"
+                  onClick={() => open()}
+                >
+                  <IconDotsVertical />
+                </ActionIcon>
+              ) : (
+                <ActionIcon disabled variant="transparent"></ActionIcon>
+              )
+            }
+          />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
+
+      <DrawerKatalogNew
+        opened={opened}
+        close={() => close()}
+        userRoleId={userRoleId}
+        userId={userLoginId}
+      />
     </>
   );
 }
diff --git a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
index fa397aa1..2fef0d60 100644
--- a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
+++ b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
@@ -94,10 +94,10 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
           color="yellow"
           c={"black"}
           style={{
-            width: "90%",
             transition: "0.5s",
             position: "absolute",
             bottom: 20,
+            width: 300,
           }}
         >
           Simpan
diff --git a/src/app_modules/katalog/portofolio/create/layout.tsx b/src/app_modules/katalog/portofolio/create/layout.tsx
index c9054145..684fdf4b 100644
--- a/src/app_modules/katalog/portofolio/create/layout.tsx
+++ b/src/app_modules/katalog/portofolio/create/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 export default function CreatePortofolioLayout({
   children,
@@ -12,11 +15,18 @@ export default function CreatePortofolioLayout({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Tambah Portofolio" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Tambah Portofolio" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/katalog/portofolio/edit/data/layout.tsx b/src/app_modules/katalog/portofolio/edit/data/layout.tsx
index 1452efc1..e5c9f194 100644
--- a/src/app_modules/katalog/portofolio/edit/data/layout.tsx
+++ b/src/app_modules/katalog/portofolio/edit/data/layout.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
-
 export default function LayoutPortofolio_EditDataBisnis({
   children,
 }: {
@@ -12,11 +14,19 @@ export default function LayoutPortofolio_EditDataBisnis({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Edit Data Bisnis" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>
+    */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Edit Data Bisnis" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/katalog/portofolio/edit/logo/layout.tsx b/src/app_modules/katalog/portofolio/edit/logo/layout.tsx
index df132625..40532454 100644
--- a/src/app_modules/katalog/portofolio/edit/logo/layout.tsx
+++ b/src/app_modules/katalog/portofolio/edit/logo/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutPortofolio_EditLogoBisnis({
@@ -11,11 +14,18 @@ export default function LayoutPortofolio_EditLogoBisnis({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Edit Logo Bisnis" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Edit Logo Bisnis" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/katalog/portofolio/edit/medsos/layout.tsx b/src/app_modules/katalog/portofolio/edit/medsos/layout.tsx
index 5fdcf02f..d20e67f2 100644
--- a/src/app_modules/katalog/portofolio/edit/medsos/layout.tsx
+++ b/src/app_modules/katalog/portofolio/edit/medsos/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutPortofolio_EditMedsosBisnis({
@@ -11,11 +14,18 @@ export default function LayoutPortofolio_EditMedsosBisnis({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Edit Media Sosial" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Edit Media Sosial" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx b/src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx
index 4d342dc1..1bb9b697 100644
--- a/src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx
+++ b/src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx
@@ -8,18 +8,17 @@ import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
 import { Button, Stack, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import {
   apiGetPortofolioById,
   apiUpdateMedsosPortofolioById,
 } from "../../component/api_fetch_portofolio";
-import { Portofolio_funEditMedsosById } from "../../fun/edit/fun_edit_medsos_bisnis_by_id";
 import { MODEL_PORTOFOLIO_MEDSOS } from "../../model/interface";
-import { clientLogger } from "@/util/clientLogger";
+import { Profile_ComponentButtonUpdatePhotoProfile } from "@/app_modules/katalog/profile/_component";
 
 interface IUpdateMedson {
   facebook: string;
@@ -224,6 +223,8 @@ export default function Portofolio_EditMedsosBisnis() {
           >
             Update
           </Button>
+
+
         </Stack>
       </ComponentGlobal_CardStyles>
     </>
diff --git a/src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx b/src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx
index 6a1921bb..8da98463 100644
--- a/src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx
+++ b/src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx
@@ -1,5 +1,9 @@
-'use client'
-import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
+"use client";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import ComponentPortofolio_ButtonMoreNew from "../component/button_more_new";
 
 export default function PortofolioLayoutNew({
@@ -7,11 +11,11 @@ export default function PortofolioLayoutNew({
   userLoginId,
 }: {
   children: any;
-  userLoginId: string
+  userLoginId: string;
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="Detail Portofolio"
@@ -22,7 +26,19 @@ export default function PortofolioLayoutNew({
         }
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header
+            title="Detail Portofolio"
+            customButtonRight={
+              <ComponentPortofolio_ButtonMoreNew userLoginId={userLoginId} />
+            }
+          />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx b/src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx
index a3286dff..85e580f3 100644
--- a/src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx
+++ b/src/app_modules/katalog/portofolio/ui/ui_list_detail_portofolio_new.tsx
@@ -48,7 +48,7 @@ export default function Portofolio_UiListDetailNew() {
     <>
       <Box py={5}>
         <ScrollOnly
-          height="90vh"
+          height="80vh"
           renderLoading={() => (
             <Center mt={"lg"}>
               <ComponentGlobal_Loader />
diff --git a/src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx b/src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx
index 1920461d..7232a387 100644
--- a/src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx
+++ b/src/app_modules/katalog/portofolio/view/list_detail_portofolio_new.tsx
@@ -1,13 +1,28 @@
-'use client'
-import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
+"use client";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+   UI_NewChildren,
+   UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import Portofolio_UiListDetailNew from "../ui/ui_list_detail_portofolio_new";
 
 export default function ListDetailPortofolioNew() {
-   return (
-      <>
-         <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Daftar Portofolio" />} >
-            <Portofolio_UiListDetailNew />
-         </UIGlobal_LayoutTamplate>
-      </>
-   )
-}
\ No newline at end of file
+  return (
+    <>
+      {/* <UIGlobal_LayoutTamplate
+         header={<UIGlobal_LayoutHeaderTamplate title="Daftar Portofolio" />}
+       >
+         <Portofolio_UiListDetailNew />
+       </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Daftar Portofolioo" />
+        </UI_NewHeader>
+        <UI_NewChildren>
+          <Portofolio_UiListDetailNew />
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/profile/create/layout.tsx b/src/app_modules/katalog/profile/create/layout.tsx
index bf4ef676..72b23f59 100644
--- a/src/app_modules/katalog/profile/create/layout.tsx
+++ b/src/app_modules/katalog/profile/create/layout.tsx
@@ -1,15 +1,24 @@
-
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 export default function ProfileLayout({ children }: { children: any }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Buat Profile" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Buat Profile" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/katalog/profile/edit/layout.tsx b/src/app_modules/katalog/profile/edit/layout.tsx
index 3c6f4ca1..a4090bf3 100644
--- a/src/app_modules/katalog/profile/edit/layout.tsx
+++ b/src/app_modules/katalog/profile/edit/layout.tsx
@@ -1,14 +1,24 @@
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 export default function EditProfileLayout({ children }: { children: any }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Edit Profile" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Edit Profile" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/katalog/profile/upload/foto_background/layout.tsx b/src/app_modules/katalog/profile/upload/foto_background/layout.tsx
index eb14b5ab..db3ed9c0 100644
--- a/src/app_modules/katalog/profile/upload/foto_background/layout.tsx
+++ b/src/app_modules/katalog/profile/upload/foto_background/layout.tsx
@@ -1,5 +1,8 @@
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 export default function LayoutProfile_UpdateFotoBackground({
   children,
@@ -8,11 +11,18 @@ export default function LayoutProfile_UpdateFotoBackground({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Update Background" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Update Background" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/katalog/profile/upload/foto_profile/layout.tsx b/src/app_modules/katalog/profile/upload/foto_profile/layout.tsx
index a2d18621..faa7aa7b 100644
--- a/src/app_modules/katalog/profile/upload/foto_profile/layout.tsx
+++ b/src/app_modules/katalog/profile/upload/foto_profile/layout.tsx
@@ -1,20 +1,28 @@
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 export default function UploadFotoProfileLayout({
   children,
 }: {
   children: any;
 }) {
- 
-
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Update Foto" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Update Foto" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }