[feature] Footer

Author: jamesgpearce

package/src/components/App/index.css.ts

@@ -78,3 +78,24 @@ export const mainHasSideNav = style(
     paddingLeft: `calc(${dimensions.sideNavWidth} + ${dimensions.padding})`,
   }),
 );
+
+export const mainHasFooter = style({
+  paddingBottom: `calc(${dimensions.footerHeight} + ${dimensions.padding})`,
+});
+
+export const footer = style({
+  display: 'flex',
+  justifyContent: 'right',
+  alignItems: 'center',
+  gap: dimensions.padding,
+  padding: dimensions.padding,
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: dimensions.footerHeight,
+  backgroundColor: colors.backgroundHaze,
+  borderTop: colors.border,
+  boxShadow: colors.shadow,
+  backdropFilter: 'blur(8px)',
+});

package/src/components/App/index.tsx

@@ -23,8 +23,10 @@ import {Button} from '../Button/index.tsx';
 import {
   app,
   appLayout,
+  footer,
   header,
   main,
+  mainHasFooter,
   mainHasSideNav,
   sideNav,
   sideNavButton,
@@ -83,6 +85,11 @@ export const App = (props: {
    * the application.
    */
   readonly main?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders the footer of
+   * the application.
+   */
+  readonly footer?: ComponentType | ReactNode;
   /**
    * An extra CSS class name for the component.
    */
@@ -104,6 +111,7 @@ const Layout = ({
   topNavRight: topNavRightComponentOrNode,
   sideNav: sideNavComponentOrNode,
   main: mainComponentOrNode,
+  footer: footerComponentOrNode,
   className,
 }: Parameters<typeof App>[0]) => {
   const sessionStoreIsReady = useSessionStoreIsReady();
@@ -124,8 +132,10 @@ const Layout = ({
     topNavRightComponentOrNode,
     sideNavComponentOrNode,
     mainComponentOrNode,
+    footerComponentOrNode,
   ].some((componentOrNode) => componentOrNode);
   const hasSideNav = sideNavComponentOrNode != null;
+  const hasFooter = footerComponentOrNode != null;
 
   return sessionStoreIsReady && routeStoreIsReady && localStoreIsReady ? (
     <div
@@ -169,9 +179,20 @@ const Layout = ({
               </nav>
             ) : null}
           </header>
-          <main className={classNames(main, hasSideNav && mainHasSideNav)}>
+          <main
+            className={classNames(
+              main,
+              hasSideNav && mainHasSideNav,
+              hasFooter && mainHasFooter,
+            )}
+          >
             {renderComponentOrNode(mainComponentOrNode)}
           </main>
+          {hasFooter ? (
+            <footer className={footer}>
+              {renderComponentOrNode(footerComponentOrNode)}
+            </footer>
+          ) : null}
         </>
       ) : null}
     </div>

package/src/css/dimensions.css.ts

@@ -8,6 +8,7 @@ const classAndObject = createTheme({
   radius: fallbackVar('var(--tinyWidgets-radius)', '0.5rem'),
   sideNavWidth: fallbackVar('var(--tinyWidgets-sideNavWidth)', '20rem'),
   topNavHeight: fallbackVar('var(--tinyWidgets-topNavHeight)', '4rem'),
+  footerHeight: fallbackVar('var(--tinyWidgets-footerHeight)', '2rem'),
 });
 export const dimensionsClass = classAndObject[0];
 
@@ -24,6 +25,7 @@ export const dimensionsClass = classAndObject[0];
  * - `radius`
  * - `sideNavWidth`
  * - `topNavHeight`
+ * - `footerHeight`
  *
  * You can use these variables directly in React components that take style
  * attributes, like this:

site/src/App.tsx

@@ -8,6 +8,7 @@ import {
   useSetRouteCallback,
 } from 'tinywidgets';
 import {article, title} from './App.css';
+import {Footer} from './components/Footer.tsx';
 import {SideNav} from './components/SideNav.tsx';
 import {Home} from './pages/Home.tsx';
 import {ROUTES} from './pages/index.ts';
@@ -24,6 +25,7 @@ export const App = () => (
     }
     sideNav={SideNav}
     main={Main}
+    footer={Footer}
   />
 );
 

site/src/components/Footer.css.ts

@@ -0,0 +1,7 @@
+import {style} from '@vanilla-extract/css';
+import {colors} from 'tinywidgets/css';
+
+export const footer = style({
+  color: colors.foregroundDim,
+  fontSize: '0.8rem',
+});

site/src/components/Footer.tsx

@@ -0,0 +1,3 @@
+import {footer} from './Footer.css';
+
+export const Footer = () => <div className={footer}>TinyWidgets © 2024-</div>;

site/src/pages/Configuration.tsx

@@ -37,6 +37,7 @@ export const Configuration = () => {
 
   --tinyWidgets-sideNavWidth: 20rem;
   --tinyWidgets-topNavHeight: 4rem;
+  --tinyWidgets-topNavHeight: 2rem;
 }
       `}
       />

site/src/pages/_api.tsx

@@ -45,6 +45,9 @@ of the application.</p>
 main:<><p>An optional component, element, or string which renders the main part of
 the application.</p>
 </>,
+footer:<><p>An optional component, element, or string which renders the footer of
+the application.</p>
+</>,
 className:<><p>An extra CSS class name for the component.</p>
 </>,
 }}
@@ -949,6 +952,7 @@ application.</p>
 <li><code>radius</code></li>
 <li><code>sideNavWidth</code></li>
 <li><code>topNavHeight</code></li>
+<li><code>footerHeight</code></li>
 </ul>
 <p>You can use these variables directly in React components that take style
 attributes, like this:</p>