Added footer component

README.md

@@ -133,6 +133,7 @@ FastUI already defines the following components, all are shown in the [demo app]
 - `Link` — renders a link `<a>`
 - `LinkList` — renders a list of links
 - `Navbar` — renders a navbar `<nav>`
+- `Footer` — renders a footer `<footer>` with links and/or text
 - `Modal` — renders a modal dialog that opens triggered by an event
 - `ServerLoad` — render components fetched from the server, also provides SSE mode to update components based on server sent events
 - `Table` — renders a table

demo/shared.py

@@ -35,4 +35,13 @@ def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyCo
                 *components,
             ],
         ),
+        c.Footer(
+            extra_text=c.Text(text='FastUI Demo - Extra footer text'),
+            links=[
+                c.Link(components=[c.Text(text='Home')], on_click=GoToEvent(url='/')),
+                c.Link(components=[c.Text(text='Components')], on_click=GoToEvent(url='/components')),
+                c.Link(components=[c.Text(text='Tables')], on_click=GoToEvent(url='/table/cities')),
+                c.Link(components=[c.Text(text='Forms')], on_click=GoToEvent(url='/forms/login')),
+            ],
+        ),
     ]

src/npm-fastui-bootstrap/src/footer.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import { components, useClassName } from 'fastui'
+
+export const Footer: FC<components.FooterProps> = (props) => {
+  const links = props.links.map((link) => {
+    link.mode = link.mode || 'footer'
+    return link
+  })
+  const extraSeparatorProp = useClassName(props, { el: 'extra-separator' })
+  const extraProp = useClassName(props, { el: 'extra' })
+  return (
+    <div className={useClassName(props, { el: 'contents' })}>
+      <footer className={useClassName(props)}>
+        <ul className={useClassName(props, { el: 'link-list' })}>
+          {links.map((link, i) => (
+            <li className="nav-item">
+              <components.LinkComp key={i} {...link} />
+            </li>
+          ))}
+        </ul>
+        {props.extraText && props.links.length > 0 && <div className={extraSeparatorProp} />}
+        {props.extraText && (
+          <div className={extraProp}>
+            <components.TextComp {...props.extraText} />
+          </div>
+        )}
+      </footer>
+    </div>
+  )
+}

src/npm-fastui-bootstrap/src/index.tsx

@@ -5,12 +5,15 @@ import type { ClassNameGenerator, CustomRender, ClassName } from 'fastui'
 import { Modal } from './modal'
 import { Navbar } from './navbar'
 import { Pagination } from './pagination'
+import { Footer } from './footer'
 
 export const customRender: CustomRender = (props) => {
   const { type } = props
   switch (type) {
     case 'Navbar':
       return () => <Navbar {...props} />
+    case 'Footer':
+      return () => <Footer {...props} />
     case 'Modal':
       return () => <Modal {...props} />
     case 'Pagination':
@@ -100,10 +103,24 @@ export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subEle
         default:
           return 'border-bottom fixed-top bg-body'
       }
+    case 'Footer':
+      switch (subElement) {
+        case 'contents':
+          return 'border-top py-3 my-3'
+        case 'link-list':
+          return 'nav justify-content-center pb-3'
+        case 'extra-separator':
+          return 'border-top'
+        case 'extra':
+          return 'text-center text-muted pt-3'
+        default:
+          return 'container'
+      }
     case 'Link':
       return {
         active: pathMatch(props.active, fullPath),
-        'nav-link': props.mode === 'navbar' || props.mode === 'tabs',
+        'nav-link': props.mode === 'navbar' || props.mode === 'tabs' || props.mode === 'footer',
+        'text-muted': props.mode === 'footer',
       }
     case 'LinkList':
       if (subElement === 'link-list-item' && props.mode) {

src/npm-fastui/src/components/footer.tsx

@@ -0,0 +1,31 @@
+import { ClassName, useClassName } from '../hooks/className'
+
+import { LinkProps, LinkComp } from './link'
+import { TextComp, TextProps } from './text'
+
+export interface FooterProps {
+  type: 'Footer'
+  extraText?: TextProps
+  links: LinkProps[]
+  className?: ClassName
+}
+
+export const FooterComp = (props: FooterProps) => {
+  const links = props.links.map((link) => {
+    link.mode = link.mode || 'footer'
+    return link
+  })
+  const extraTextClassName = useClassName(props, { el: 'extra' })
+  return (
+    <footer className={useClassName(props)}>
+      {links.map((link, i) => (
+        <LinkComp key={i} {...link} />
+      ))}
+      {props.extraText && (
+        <div className={extraTextClassName}>
+          <TextComp {...props.extraText} />
+        </div>
+      )}
+    </footer>
+  )
+}

src/npm-fastui/src/components/index.tsx

@@ -38,6 +38,7 @@ import {
 } from './display'
 import { JsonComp, JsonProps } from './Json'
 import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
+import { FooterComp, FooterProps } from './footer'
 import { ImageComp, ImageProps } from './image'
 import { IframeComp, IframeProps } from './Iframe'
 
@@ -61,6 +62,7 @@ export type {
   LinkProps,
   LinkListProps,
   NavbarProps,
+  FooterProps,
   AllDisplayProps,
   DisplayPrimitiveProps,
   JsonProps,
@@ -70,7 +72,7 @@ export type {
 }
 
 // TODO some better way to export components
-export { LinkComp, LinkRender }
+export { LinkComp, LinkRender, TextComp }
 
 export type FastProps =
   | TextProps
@@ -92,6 +94,7 @@ export type FastProps =
   | LinkProps
   | LinkListProps
   | NavbarProps
+  | FooterProps
   | AllDisplayProps
   | JsonProps
   | ServerLoadProps
@@ -142,6 +145,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <LinkListComp {...props} />
       case 'Navbar':
         return <NavbarComp {...props} />
+      case 'Footer':
+        return <FooterComp {...props} />
       case 'Form':
       case 'ModelForm':
         return <FormComp {...props} />

src/npm-fastui/src/components/link.tsx

@@ -9,7 +9,7 @@ import { FastProps, AnyCompList } from './index'
 export interface LinkProps {
   type: 'Link'
   components: FastProps[]
-  mode?: 'navbar' | 'tabs' | 'vertical' | 'pagination'
+  mode?: 'navbar' | 'footer' | 'tabs' | 'vertical' | 'pagination'
   active?: boolean | string
   locked?: boolean
   onClick?: AnyEvent

src/python-fastui/fastui/components/__init__.py

@@ -37,6 +37,7 @@
     'Button',
     'Modal',
     'ModelForm',
+    'Footer',
     'FormFieldInput',
     'FormFieldBoolean',
     'FormFieldFile',
@@ -126,7 +127,7 @@ class Button(pydantic.BaseModel, extra='forbid'):
 class Link(pydantic.BaseModel, extra='forbid'):
     components: '_t.List[AnyComponent]'
     on_click: _t.Union[events.AnyEvent, None] = pydantic.Field(default=None, serialization_alias='onClick')
-    mode: _t.Union[_t.Literal['navbar', 'tabs', 'vertical', 'pagination'], None] = None
+    mode: _t.Union[_t.Literal['navbar', 'footer', 'tabs', 'vertical', 'pagination'], None] = None
     active: _t.Union[bool, str, None] = None
     locked: _t.Union[bool, None] = None
     class_name: _class_name.ClassName = None
@@ -148,6 +149,13 @@ class Navbar(pydantic.BaseModel, extra='forbid'):
     type: _t.Literal['Navbar'] = 'Navbar'
 
 
+class Footer(pydantic.BaseModel, extra='forbid'):
+    extra_text: _t.Union[Text, None] = pydantic.Field(default=None, serialization_alias='extraText')
+    links: _t.List[Link] = pydantic.Field(default_factory=list)
+    class_name: _class_name.ClassName = None
+    type: _t.Literal['Footer'] = 'Footer'
+
+
 class Modal(pydantic.BaseModel, extra='forbid'):
     title: str
     body: '_t.List[AnyComponent]'
@@ -216,6 +224,7 @@ class Iframe(pydantic.BaseModel, extra='forbid'):
         Link,
         LinkList,
         Navbar,
+        Footer,
         Modal,
         ServerLoad,
         Table,