From 66a2aab8801b686189eba962ab44e51344c70d3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sat, 8 Oct 2022 18:36:19 +0100
Subject: [PATCH] feat: new footer component

---
 examples/web/index.css                        | 25 -------------------
 examples/web/index.html                       |  4 ---
 examples/web/react/app.tsx                    |  4 +++
 .../web/react/components/footer/footer.css    | 19 ++++++++++++++
 .../web/react/components/footer/footer.tsx    | 18 +++++++++++++
 examples/web/react/components/index.ts        |  1 +
 6 files changed, 42 insertions(+), 29 deletions(-)
 create mode 100644 examples/web/react/components/footer/footer.css
 create mode 100644 examples/web/react/components/footer/footer.tsx

diff --git a/examples/web/index.css b/examples/web/index.css
index eb47a643..7198481b 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -183,31 +183,6 @@ p {
     display: block;
 }
 
-.footer {
-    bottom: 0px;
-    height: 40px;
-    left: 0px;
-    line-height: 40px;
-    padding: 0px 0px 0px 0px;
-    position: fixed;
-    text-align: center;
-    width: 100%;
-}
-
-.footer-background {
-    bottom: 0px;
-    filter: blur(1.0rem);
-    -o-filter: blur(1.0rem);
-    -ms-filter: blur(1.0rem);
-    -moz-filter: blur(1.0rem);
-    -khtml-filter: blur(1.0rem);
-    -webkit-filter: blur(1.0rem);
-    height: 40px;
-    left: 0px;
-    position: fixed;
-    width: 100%;
-}
-
 .toast-container {
     background-color: black;
     height: 0px;
diff --git a/examples/web/index.html b/examples/web/index.html
index a192760d..34557615 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -155,10 +155,6 @@
         </div>
     </div>
 </div>
-<div id="footer-background" class="footer-background"></div>
-<div id="footer" class="footer">
-    Built with ❤️ by <a href="https://joao.me" target="_blank">João Magalhães</a>
-</div>
 <script type="module" src="index.ts"></script>
 </body>
 
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 27f27484..214d4c25 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -5,6 +5,7 @@ import {
     Button,
     ButtonIncrement,
     ButtonSwitch,
+    Footer,
     Info,
     Link,
     Pair,
@@ -22,6 +23,9 @@ export const App = () => {
     const onClick = () => setCount(count + 1);
     return (
         <>
+            <Footer>
+                Built with ❤️ by <a href="https://joao.me" target="_blank">João Magalhães</a>
+            </Footer>
             <PanelSplit left={<div>This is the left panel</div>}>
                 <Title
                     text="Boytacean"
diff --git a/examples/web/react/components/footer/footer.css b/examples/web/react/components/footer/footer.css
new file mode 100644
index 00000000..4a6ae541
--- /dev/null
+++ b/examples/web/react/components/footer/footer.css
@@ -0,0 +1,19 @@
+.footer {
+    bottom: 0px;
+    height: 40px;
+    left: 0px;
+    line-height: 40px;
+    padding: 0px 0px 0px 0px;
+    position: fixed;
+    text-align: center;
+    width: 100%;
+}
+
+.footer > .footer-background {
+    filter: blur(1.0rem);
+    -o-filter: blur(1.0rem);
+    -ms-filter: blur(1.0rem);
+    -moz-filter: blur(1.0rem);
+    -khtml-filter: blur(1.0rem);
+    -webkit-filter: blur(1.0rem);
+}
diff --git a/examples/web/react/components/footer/footer.tsx b/examples/web/react/components/footer/footer.tsx
new file mode 100644
index 00000000..66c9369a
--- /dev/null
+++ b/examples/web/react/components/footer/footer.tsx
@@ -0,0 +1,18 @@
+import React, { FC, ReactNode } from "react";
+
+import "./footer.css";
+
+type FooterProps = {
+    children: ReactNode;
+    style?: string[];
+};
+
+export const Footer: FC<FooterProps> = ({ children, style = [] }) => {
+    const classes = () => ["footer", ...style].join(" ");
+    return <div className={classes()}>
+        <div className="footer-background"></div>
+        <div className="footer-contents">{children}</div>
+    </div>
+};
+
+export default Footer;
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index a9e3046a..b3c9a92d 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -1,6 +1,7 @@
 export * from "./button/button";
 export * from "./button-increment/button-increment";
 export * from "./button-switch/button-switch";
+export * from "./footer/footer";
 export * from "./info/info";
 export * from "./link/link";
 export * from "./pair/pair";
-- 
GitLab