default footer

packages/material/src/components/Footer.js

@@ -1,3 +1,23 @@
-import { Fragment } from 'react';
+import React from 'react';
+import { useComponents } from '@wq/react';
 
-export default Fragment;
+export default function Footer() {
+ const { Typography, FooterContent } = useComponents();
+
+ return (
+ <div
+ style={{
+ height: '3em',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: 'white',
+ borderTop: '1px solid rgba(0, 0, 0, 0.12)'
+ }}
+ >
+ <Typography variant="caption" color="textSecondary">
+ <FooterContent />
+ </Typography>
+ </div>
+ );
+}

packages/material/src/components/FooterContent.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useComponents } from '@wq/react';
+
+export default function FooterContent() {
+ const { Link } = useComponents();
+ return (
+ <>
+ Powered by{' '}
+ <Link component="a" href="https://wq.io/" target="_blank">
+ wq
+ </Link>
+ </>
+ );
+}

packages/material/src/components/FooterContent.native.js

@@ -0,0 +1,3 @@
+import { Fragment } from 'react';
+
+export default Fragment;

packages/material/src/components/index.js

@@ -2,6 +2,7 @@ import Container from './Container';
 import Header from './Header';
 import Main from './Main';
 import Footer from './Footer';
+import FooterContent from './FooterContent';
 import View from './View';
 import ScrollView from './ScrollView';
 import HorizontalView from './HorizontalView';
@@ -52,6 +53,7 @@ export {
  Header,
  Main,
  Footer,
+ FooterContent,
  View,
  ScrollView,
  HorizontalView,

packages/react/src/components/Footer.js

@@ -1,5 +1,13 @@
 import React from 'react';
+import { useComponents } from '../hooks';
 
 export default function Footer() {
- return <></>;
+ const { FooterContent } = useComponents();
+ return (
+ <center>
+ <small>
+ <FooterContent />
+ </small>
+ </center>
+ );
 }

packages/react/src/components/FooterContent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function FooterContent() {
+ return (
+ <>
+ Powered by{' '}
+ <a href="https://wq.io/">
+ <b>wq</b>
+ </a>
+ </>
+ );
+}

packages/react/src/components/index.js

@@ -2,6 +2,7 @@ import Container from './Container';
 import Header from './Header';
 import Main from './Main';
 import Footer from './Footer';
+import FooterContent from './FooterContent';
 import View from './View';
 import ScrollView from './ScrollView';
 import HorizontalView from './HorizontalView';
@@ -59,6 +60,7 @@ export {
  Header,
  Main,
  Footer,
+ FooterContent,
  View,
  ScrollView,
  HorizontalView,