Add Marquee HTML tag

packages/fastui/src/components/index.tsx

@@ -6,6 +6,7 @@ import { unreachable } from '../tools'
 
 import { TextProps, TextComp } from './text'
 import { ParagraphProps, ParagraphComp } from './paragraph'
+import { MarqueeProps, MarqueeComp } from './marquee'
 import { PageTitleProps, PageTitleComp } from './PageTitle'
 import { AllDivProps, DivComp, DivProps } from './div'
 import { HeadingComp, HeadingProps } from './heading'
@@ -42,6 +43,7 @@ import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
 export type {
   TextProps,
   ParagraphProps,
+  MarqueeProps,
   PageTitleProps,
   AllDivProps,
   DivProps,
@@ -71,6 +73,7 @@ export { LinkComp, LinkRender }
 export type FastProps =
   | TextProps
   | ParagraphProps
+  | MarqueeProps
   | PageTitleProps
   | AllDivProps
   | DivProps
@@ -117,6 +120,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <TextComp {...props} />
       case 'Paragraph':
         return <ParagraphComp {...props} />
+      case 'Marquee':
+        return <MarqueeComp {...props} />
       case 'PageTitle':
         return <PageTitleComp {...props} />
       case 'Div':

packages/fastui/src/components/marquee.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react'
+
+export interface MarqueeProps {
+  type: 'Marquee'
+  text: string
+}
+
+export const MarqueeComp: FC<MarqueeProps> = ({ text }) => <marquee>{text}</marquee>

python/demo/components_list.py

@@ -35,6 +35,13 @@ def components_view() -> list[AnyComponent]:
             ],
             class_name='border-top mt-3 pt-1',
         ),
+        c.Div(
+            components=[
+                c.Heading(text='Marquee', level=2),
+                c.Marquee(text='This is basic example of marquee.'),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         c.Div(
             components=[
                 c.Heading(text='Heading', level=2),

python/demo/main.py

@@ -21,6 +21,7 @@ def api_index() -> list[AnyComponent]:
 * `Markdown` — that's me :-)
 * `Text`— example [here](/components#text)
 * `Paragraph` — example [here](/components#paragraph)
+* `Marquee` — example [here](/components#marquee)
 * `PageTitle` — you'll see the title in the browser tab change when you navigate through the site
 * `Heading` — example [here](/components#heading)
 * `Code` — example [here](/components#code)

python/fastui/components/__init__.py

@@ -32,6 +32,7 @@
 __all__ = (
     'AnyComponent',
     'Text',
+    'Marquee',
     'Div',
     'Page',
     'Heading',
@@ -60,6 +61,11 @@ class Paragraph(pydantic.BaseModel, extra='forbid'):
     type: typing.Literal['Paragraph'] = 'Paragraph'
 
 
+class Marquee(pydantic.BaseModel, extra='forbid'):
+    text: str
+    type: typing.Literal['Marquee'] = 'Marquee'
+
+
 class PageTitle(pydantic.BaseModel, extra='forbid'):
     """
     This sets the title of the HTML page via the `document.title` property.
@@ -173,6 +179,7 @@ class ServerLoad(pydantic.BaseModel, extra='forbid'):
 AnyComponent = typing.Annotated[
     Text
     | Paragraph
+    | Marquee
     | PageTitle
     | Div
     | Page