complete footer

src/components/ui/auth/layout.tsx

@@ -1,10 +1,15 @@
 import { Outlet } from "react-router-dom"
+import { socialsList } from "../../../utility/socials"
+import { SocialsInterface } from "../../../types"
 
 export const AuthLayout = () => {
     return (
         <section
-            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden">
+            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden relative">
             <Outlet />
+            <footer className="hidden w-full xl:flex flex-row gap-x-2 justify-end !absolute left-4 bottom-4">
+                {socialsList?.map((item: SocialsInterface) => <img key={item?.name} src={item?.path} alt={item?.name} className="size-10 min-w-10 min-h-10 cursor-pointer" />)}
+            </footer>
         </section>
     )
 }

src/components/ui/dashboard/footer.tsx

@@ -0,0 +1,10 @@
+import { SocialsInterface } from "../../../types"
+import { socialsList } from "../../../utility/socials"
+
+export const Footer = () => {
+    return (
+        <footer className="w-full flex flex-row gap-x-2 justify-end items-center">
+            {socialsList?.map((item: SocialsInterface) => <img key={item?.name} src={item?.path} alt={item?.name} className="size-10 min-w-10 min-h-10 cursor-pointer" />)}
+        </footer>
+    )
+}

src/components/ui/dashboard/header.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 export const Header: FC<Props> = ({ setShow }) => {
     return (
-        <div className="flex flex-row w-full justify-between items-center">
+        <header className="flex flex-row w-full justify-between items-center mb-10 xl:mb-y-[60px]">
             <div className="flex flex-row gap-x-5 lg:gap-x-3 items-center">
                 <img src="/svgs/header/burger-menu.svg" alt="burger menu" className="lg:hidden size-[27px]" onClick={setShow} />
                 <img src="/svgs/header/person.svg" alt="person" className="size-[60px]" />
@@ -17,6 +17,6 @@ export const Header: FC<Props> = ({ setShow }) => {
                 <p className="font-normal text-sm lg:text-xl">45597000-021</p>
                 <Call color="#11212D" variant="Bold" className="size-[27px]" />
             </div>
-        </div>
+        </header>
     )
 }

src/components/ui/dashboard/layout.tsx

@@ -0,0 +1,24 @@
+import { Outlet } from "react-router-dom"
+import { Sidebar } from "./sidebar"
+import { Header } from "./header"
+import { useState } from "react"
+import { SidebarMobile } from "./sidebar-mobile"
+import { Footer } from "./footer"
+
+export const DashboardLayout = () => {
+    const [show, setShow] = useState<boolean>(false)
+    const handleSidebar = () => setShow(prev => !prev)
+    return (
+        <div className="w-full h-screen flex flex-col lg:flex-row">
+            <Sidebar />
+            <SidebarMobile show={show} setShow={setShow} />
+            <div className="w-full h-screen p-4 xl:p-[30px] flex flex-col">
+                <Header setShow={handleSidebar} />
+                <div className="h-screen w-full">
+                    <Outlet />
+                </div>
+                <Footer />
+            </div>
+        </div>
+    )
+}

src/types/index.ts

@@ -43,3 +43,8 @@ export interface SidebarInterface {
     icon: React.ReactNode,
     activeIcon: React.ReactNode
 }
+
+export interface SocialsInterface {
+    name: string,
+    path: string
+}

src/utility/socials.tsx

@@ -0,0 +1,24 @@
+import { SocialsInterface } from "../types";
+
+export const socialsList: SocialsInterface[] | [] = [
+    {
+        name: "whatsapp",
+        path: "/svgs/social/whatsapp.svg"
+    },
+    {
+        name: "telegram",
+        path: "/svgs/social/telegram.svg"
+    },
+    {
+        name: "instagram",
+        path: "/svgs/social/instagram.svg"
+    },
+    {
+        name: "linkedin",
+        path: "/svgs/social/linkedin.svg"
+    },
+    {
+        name: "facebook",
+        path: "/svgs/social/facebook.svg"
+    },
+]