perf(layout): Create header, footer and main content layouts

cekrekening · Oct 1, 2023 · 63b69da · 63b69da
1 parent 1f505e6
commit 63b69da
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 8 deletions.
diff --git a/public/donate.webp b/public/donate.webp
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,24 @@
 import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Header from "./layout/Header";
+import Footer from "./layout/Footer";
 import Cekrek from "./Cekrek";
 
 export default function App() {
   return (
     <>
       <div className="container-flex flex flex-col justify-center h-screen overflow-hidden">
-        <header className="w-full text-center py-20"></header>
+        <Header />
         <main className="flex-1 overflow-hidden 2xl:px-20 xl:px-20 lg:px-20 md:px-20 px-5">
-          <div className="min-h-screen">
+          <div className="h-screen">
             <BrowserRouter>
               <Routes>
                 <Route path="/" element={<Cekrek />}></Route>
               </Routes>
             </BrowserRouter>
           </div>
         </main>
-        <footer className="footer footer-center p-5 bg-base text-base-content">
-          <aside>
-            <p>Made with ❤️ in Surabaya</p>
-            <p>@heirro</p>
-          </aside>
-        </footer>
+        <Footer />
       </div>
     </>
   );

diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
@@ -0,0 +1,79 @@
+export default function Footer() {
+  return (
+    <>
+      <footer className="footer footer-center p-10 bg-base">
+        <nav className="grid grid-flow-col gap-5">
+          <a
+            className="link link-hover hover:no-underline hover:text-blue-600 flex"
+            href="https://documenter.getpostman.com/view/17822564/2s9YJaYPNQ"
+            target="_blank"
+          >
+            <svg
+              width="24px"
+              height="24px"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="#000000"
+            >
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
+              <g id="SVGRepo_iconCarrier">
+                <path
+                  d="M877.685565 727.913127l-0.584863-0.365539a32.898541 32.898541 0 0 1-8.041866-46.423497 411.816631 411.816631 0 1 0-141.829267 145.777092c14.621574-8.992268 33.62962-5.117551 43.645398 8.772944l0.146216 0.073108a30.412874 30.412874 0 0 1-7.968758 43.206751l-6.141061 4.020933a475.201154 475.201154 0 1 1 163.615412-164.419599 29.974227 29.974227 0 0 1-42.841211 9.357807z m-537.342843-398.584106c7.164571-7.091463 24.71046-9.650239 33.26408 0 10.600641 11.185504 7.164571 29.462472 0 37.138798l-110.612207 107.468569L370.901811 576.14119c7.164571 7.091463 8.114974 27.342343 0 35.384209-9.796455 9.723347-29.828011 8.188081-36.480827 1.535265L208.309909 487.388236a18.423183 18.423183 0 0 1 0-25.953294l132.032813-132.032813z m343.314556 0l132.032813 132.032813a18.423183 18.423183 0 0 1 0 25.953294L689.652124 613.133772c-6.652816 6.579708-25.587754 10.746857-36.553935 0-10.30821-10.235102-7.091463-31.290168 0-38.381632l108.345863-100.669537-111.855041-108.638294c-7.164571-7.676326-9.504023-26.611265 0-36.04218 9.284699-9.138484 26.903696-7.091463 34.068267 0z m-135.54199-26.318833c3.582286-9.504023 21.347498-15.498868 32.679217-11.258612 10.819965 4.020933 17.180349 19.008046 14.256035 28.512069l-119.896906 329.716493c-3.509178 9.504023-20.616419 13.305632-30.193551 9.723347-10.161994-3.509178-21.201282-17.545889-17.545888-26.976804l120.627985-329.716493z"
+                  fill="#000000"
+                ></path>
+              </g>
+            </svg>
+            &nbsp; API
+          </a>
+          <a href="https://trakteer.id/heirro/tip?quantity=1" target="_blank">
+            <img
+              id="wse-buttons-preview"
+              src="donate.webp"
+              height="40"
+              style={{ border: 0, height: 40 }}
+              alt="Trakteer Saya"
+            />
+          </a>
+          <a
+            className="link link-hover hover:no-underline hover:text-blue-600 flex"
+            href="https://github.com/cekrekening/cekrekening.github.io"
+            target="_blank"
+          >
+            <svg
+              width="24px"
+              height="24px"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+            >
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
+              <g id="SVGRepo_iconCarrier">
+                <path
+                  fill="#161514"
+                  fill-rule="evenodd"
+                  d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z"
+                  clip-rule="evenodd"
+                ></path>
+              </g>
+            </svg>
+            &nbsp; Github
+          </a>
+        </nav>
+        <aside>
+          <p>Made with ❤️ in Surabaya</p>
+        </aside>
+      </footer>
+    </>
+  );
+}
diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx
@@ -0,0 +1,7 @@
+export default function Header() {
+  return (
+    <>
+      <header className="w-full text-center py-20"></header>
+    </>
+  );
+}