Timeline component with icons from dash-mantine-components and DashIconify

dmc_timeline_with_icons.py

# Timeline component with icons from dash-mantine-components and DashIconify

import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash(__name__)


def make_icon(icon):
    return [
        dmc.ThemeIcon(
            radius="xl", variant="outline", children=[DashIconify(icon=icon, width=16)]
        )
    ]


app.layout = dmc.Timeline(
    [
        dmc.TimelineItem(
            "pip install dash-mantine-components",
            bullet=make_icon("akar-icons:circle-check"),
        ),
        dmc.TimelineItem(
            [
                "Check out our  ",
                dmc.Anchor(
                    "documentation",
                    href="https://www.dash-mantine-components.com/",
                    underline=False,
                ),
            ],
            bullet=make_icon("charm:rocket"),
        ),
        dmc.TimelineItem(
            [
                "Join our ",
                dmc.Anchor(
                    "Discord", href="https://discord.gg/KuJkh4Pyq5", underline=False
                ),
                " Community.",
            ],
            bullet=make_icon("fa-brands:discord"),
        ),
        dmc.TimelineItem("Make something cool", bullet=make_icon("carbon:face-cool")),
        dmc.TimelineItem(
            "Share your app in show-and-tell!",
            bullet=make_icon("twemoji:confetti-ball"),
        ),
    ],
    active=0,
)



if __name__ == "__main__":
    app.run_server()