refactor: footer component

sjdonado · Apr 2, 2024 · b2ffbbd · b2ffbbd
1 parent 1303904
commit b2ffbbd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -0,0 +1,24 @@
+export default function Footer() {
+  return (
+    <footer className="flex w-full items-center justify-center gap-1 pb-4 text-xs text-gray-500">
+      <p>Made by</p>
+      <a
+        className="link"
+        href="https://sjdonado.github.io"
+        target="_blank"
+        rel="noreferrer"
+      >
+        @sjdonado
+      </a>
+      <span>•</span>
+      <a
+        className="link"
+        href="https://github.com/sjdonado/remix-dashboard"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Source code
+      </a>
+    </footer>
+  );
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
@@ -16,6 +16,7 @@ import { UserRole } from '~/constants/user';
 import Avatar from './Avatar';
 import { UserRoleBadge } from './badge/UserRoleBadge';
 import { DialogModalButton } from './dialog/ConfirmationDialog';
+import Footer from './Footer';
 
 interface SidebarProps {
   userSession: UserSession;
@@ -76,18 +77,8 @@ export default function Sidebar({ userSession, children }: SidebarProps) {
                 <span className="text-sm font-medium">Logout</span>
               </DialogModalButton>
             </li>
-            <li className="mt-4 text-center text-xs">
-              Source code available at{' '}
-              <a
-                className="link"
-                href="https://github.com/sjdonado/remix-dashboard"
-                target="_blank"
-                rel="noreferrer"
-              >
-                GitHub
-              </a>
-            </li>
           </ul>
+          <Footer />
         </div>
       </div>
       <div className="drawer-content">{children}</div>

diff --git a/app/routes/_public.tsx b/app/routes/_public.tsx
@@ -2,6 +2,7 @@ import { Outlet } from '@remix-run/react';
 
 import AppLogo from '~/components/AppLogo';
 import { CustomErrorBoundary } from '~/components/CustomErrorBoundary';
+import Footer from '~/components/Footer';
 
 export default function Login() {
   return (
@@ -12,6 +13,7 @@ export default function Login() {
       <div className="card m-4 w-full rounded-md bg-base-100 shadow-xl sm:w-96">
         <Outlet />
       </div>
+      <Footer />
     </div>
   );
 }