feat(layout): Implement AppBar layout component

Author: spuxx-dev

apps/solid/src/App.tsx

@@ -4,16 +4,17 @@ import '@spuxx/browser-utils/themes';
 import { For, type Component } from 'solid-js';
 import './styles/index.css';
 import { routes } from './routes/routes';
+import { AppLayout } from './layout/app.layout';
 
 const App: Component = () => {
   return (
-    <main>
+    <AppLayout>
       <Router>
         <For each={routes}>
           {(route) => <Route path={route.path} component={route.component} />}
         </For>
       </Router>
-    </main>
+    </AppLayout>
   );
 };
 

apps/solid/src/layout/app-bars/bottom-app-bar.component.tsx

@@ -0,0 +1,16 @@
+import { AppBar, Button } from '@spuxx/solid';
+
+export const BottomAppBar = () => {
+  return (
+    <AppBar
+      position="bottom"
+      center={
+        <a href="https://spuxx.dev">
+          <Button variant="colored" color="text-default" rounded>
+            Made with ❤️ by spuxx
+          </Button>
+        </a>
+      }
+    />
+  );
+};

apps/solid/src/layout/app-bars/top-app-bar.component.tsx

@@ -0,0 +1,21 @@
+import { AppBar, Button } from '@spuxx/solid';
+
+export const TopAppBar = () => {
+  return (
+    <AppBar
+      left={<Button icon="mdi:menu" title="Menu" variant="colored" color="text-default" rounded />}
+      center={
+        <a href="/">
+          <Button title="Home" variant="colored" color="text-default" rounded>
+            @spuxx/solid
+          </Button>
+        </a>
+      }
+      right={
+        <a href="https://github.com/spuxx-dev/jslibs" target="_blank">
+          <Button icon="mdi:github" title="GitHub" variant="colored" color="text-default" rounded />
+        </a>
+      }
+    />
+  );
+};

apps/solid/src/layout/app.layout.tsx

@@ -0,0 +1,13 @@
+import { Component, ParentProps } from 'solid-js';
+import { TopAppBar } from './app-bars/top-app-bar.component';
+import { BottomAppBar } from './app-bars/bottom-app-bar.component';
+
+export const AppLayout: Component<ParentProps> = (props) => {
+  return (
+    <>
+      <TopAppBar />
+      <main>{props.children}</main>
+      <BottomAppBar />
+    </>
+  );
+};

apps/solid/src/routes/components/control/input.route.tsx

@@ -84,18 +84,12 @@ export const InputRoute: Component = () => {
           <For each={variants}>
             {(variant) => (
               <>
-                <Input
-                  label="Username"
-                  class="m-1"
-                  icon="mdi:account"
-                  attrs={{ type: 'text' }}
-                  variant={variant}
-                />
+                <Input label="Username" class="m-1" icon="mdi:account" variant={variant} />
                 <Input
                   label="Password"
                   class="m-1"
                   icon="mdi:lock"
-                  attrs={{ type: 'password' }}
+                  type="password"
                   variant={variant}
                 />
               </>
@@ -108,24 +102,27 @@ export const InputRoute: Component = () => {
           <For each={variants}>
             {(variant) => (
               <>
-                <Input
-                  label="Username"
-                  class="m-1"
-                  icon="mdi:account"
-                  attrs={{ type: 'text' }}
-                  variant={variant}
-                />
+                <Input label="Username" class="m-1" icon="mdi:account" variant={variant} />
                 <Input
                   label="Password"
                   class="m-1"
                   icon="mdi:lock"
-                  attrs={{ type: 'password' }}
+                  type="password"
                   variant={variant}
                 />
               </>
             )}
           </For>
         </Container>
+        <Container variant="contained" color="surface">
+          <Heading level={2}>On Surface</Heading>
+          <Divider color="gradient" />
+          <For each={variants}>
+            {(variant) => (
+              <Input label="Username" class="m-1" icon="mdi:account" variant={variant} />
+            )}
+          </For>
+        </Container>
       </Container>
     </>
   );

packages/solid/src/components/layout/app-bar/app-bar.component.test.tsx

@@ -0,0 +1,18 @@
+import { AppBarProps, attributes, classNames } from '@src/main';
+import { Component } from 'solid-js';
+
+export const AppBar: Component<AppBarProps> = (props) => {
+  const { position = 'top' } = props;
+
+  return (
+    <header
+      {...classNames('spx-app-bar', props.class)}
+      {...attributes(props)}
+      spx-position={position}
+    >
+      <div {...classNames('spx-app-bar-left')}>{props.left}</div>
+      <div {...classNames('spx-app-bar-center')}>{props.center}</div>
+      <div {...classNames('spx-app-bar-right')}>{props.right}</div>
+    </header>
+  );
+};

packages/solid/src/components/layout/app-bar/app-bar.component.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps } from '@src/main';
+import { JSX } from 'solid-js/jsx-runtime';
+
+/**
+ * The AppBar component properties.
+ */
+export interface AppBarProps extends ComponentProps<JSX.HTMLAttributes<HTMLElement>> {
+  /**
+   * The position of the app bar.
+   * @default 'top'
+   */
+  position?: 'top' | 'bottom';
+  /**
+   * The left-side content of the app bar.
+   */
+  left?: JSX.Element;
+  /**
+   * The center content of the app bar.
+   */
+  center?: JSX.Element;
+  /**
+   * The right-side content of the app bar.
+   */
+  right?: JSX.Element;
+}

packages/solid/src/components/layout/app-bar/app-bar.types.ts

@@ -0,0 +1,2 @@
+export * from './app-bar.component';
+export * from './app-bar.types';

packages/solid/src/components/layout/app-bar/index.ts

@@ -6,6 +6,7 @@ export * from './types/public';
 
 export * from './components/control/button';
 export * from './components/control/input';
+export * from './components/layout/app-bar';
 export * from './components/layout/container';
 export * from './components/layout/divider';
 export * from './components/typography/heading';