feat: new footer component

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;

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>
 

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"

examples/web/react/components/footer/footer.css

+.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);
+}

examples/web/react/components/footer/footer.tsx

+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;

examples/web/react/components/index.ts

 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";