Updates.

ex_app/dashboard.py

@@ -3,8 +3,8 @@
 # AUTOGENERATED! DO NOT EDIT! File to edit: ../ex_nbs/03_dashboard.ipynb.
 
 # %% auto 0
-__all__ = ['rev', 'sub', 'sal', 'act', 'top_info_row', 'recent_sales', 'db_nav', 'team_dropdown', 'hotkeys', 'user', 'avatar',
-           'avatar_dropdown', 'top_nav', 'dashboard_homepage', 'InfoCard', 'DiceBearAvatar', 'AvatarItem',
+__all__ = ['rev', 'sub', 'sal', 'act', 'top_info_row', 'recent_sales', 'db_nav', 'team_dropdown', 'headers', 'hotkeys', 'user',
+           'avatar', 'avatar_dropdown', 'top_nav', 'dashboard_homepage', 'InfoCard', 'DiceBearAvatar', 'AvatarItem',
            'generate_chart', 'NavTab', 'UkTab', 'UkNavBar', 'page']
 
 # %% ../ex_nbs/03_dashboard.ipynb 2
@@ -15,31 +15,31 @@
 import numpy as np
 import matplotlib.pylab as plt
 
-# %% ../ex_nbs/03_dashboard.ipynb 10
+# %% ../ex_nbs/03_dashboard.ipynb 9
 def InfoCard(title, value, change):
     return Card(
              Div(UkH3(value),
                 P(change, cls=TextT.muted_sm)),
              header = UkH4(title),)
 
-# %% ../ex_nbs/03_dashboard.ipynb 12
+# %% ../ex_nbs/03_dashboard.ipynb 11
 rev = InfoCard("Total Revenue", "$45,231.89", "+20.1% from last month")
 sub = InfoCard("Subscriptions", "+2350", "+180.1% from last month")
 sal = InfoCard("Sales", "+12,234", "+19% from last month")
 act = InfoCard("Active Now", "+573", "+201 since last hour")
 
-# %% ../ex_nbs/03_dashboard.ipynb 13
+# %% ../ex_nbs/03_dashboard.ipynb 12
 top_info_row = Div(cls='grid grid-cols-2 gap-4 lg:grid-cols-4')(rev,sub,sal,act)
 
-# %% ../ex_nbs/03_dashboard.ipynb 16
+# %% ../ex_nbs/03_dashboard.ipynb 15
 def DiceBearAvatar(seed_name, h, w):
     # Number that work can be found here (not all numbers work): https://tailwindcss.com/docs/height
     return Span(cls=f"relative flex h-{h} w-{w} shrink-0 overflow-hidden rounded-full bg-accent")(
             Img(cls="aspect-square h-full w-full", alt="Avatar", src=f"https://api.dicebear.com/8.x/lorelei/svg?seed={seed_name}"))
 
 show(DiceBearAvatar('Isaac Flath', 12,12))
 
-# %% ../ex_nbs/03_dashboard.ipynb 17
+# %% ../ex_nbs/03_dashboard.ipynb 16
 def AvatarItem(name, email, amount):
     return Div(cls="flex items-center")(
         DiceBearAvatar(name, 9,9),
@@ -48,8 +48,6 @@ def AvatarItem(name, email, amount):
             P(email, cls=TextT.muted_sm)),
         Div(amount, cls="ml-auto font-medium"))
 
-
-
 recent_sales = Card(
     Div(cls="space-y-8")(
         *[AvatarItem(n,e,d) for (n,e,d) in (
@@ -62,13 +60,13 @@ def AvatarItem(name, email, amount):
         UkH3("Recent Sales"),
         P("You made 265 sales this month.", cls=TextT.muted_sm)))
 
-# %% ../ex_nbs/03_dashboard.ipynb 19
+# %% ../ex_nbs/03_dashboard.ipynb 18
 @matplotlib2fasthtml
 def generate_chart(num_points):
     plotdata = [np.random.exponential(1) for _ in range(num_points)]
     plt.plot(range(len(plotdata)), plotdata)
 
-# %% ../ex_nbs/03_dashboard.ipynb 22
+# %% ../ex_nbs/03_dashboard.ipynb 21
 def NavTab(text, active=False):
     return Li(cls="uk-active" if active else " ")(
         A(text, href="#demo", uk_toggle=True))
@@ -80,14 +78,20 @@ def UkTab(*items):
 db_nav = UkTab("Overview", "Analytics", "Reports", "Notifications")
 show(db_nav)
 
-# %% ../ex_nbs/03_dashboard.ipynb 24
+# %% ../ex_nbs/03_dashboard.ipynb 23
 def UkNavBar(*items):
     return Ul(cls="uk-navbar-nav gap-x-4 lg:gap-x-6")(
         *[NavTab(item) for i, item in enumerate(items)])
 
 team_dropdown = UkDropdownButton("Alicia Koch", options = ("Alicia Koch","Acme Inc","Monster Inc.","Create a Team"))
 
-# %% ../ex_nbs/03_dashboard.ipynb 27
+# %% ../ex_nbs/03_dashboard.ipynb 28
+headers = UkNavbar(lnav=(
+    UkNavbarDropdown(*map(lambda x: A(x,href='#'), ["Alicia Koch"]), label="header")
+))
+show(headers)
+
+# %% ../ex_nbs/03_dashboard.ipynb 30
 hotkeys = (('Profile','⇧⌘P'), ('Billing','⌘B'), ('Settings','⌘S'), ('New Team',''), ('Logout',''))
 user = (Div(cls='flex flex-col space-y-1')(P('Alicia Koch'),P('[email protected]',cls=TextT.muted_sm)),)
 avatar = A(href='#', cls='h-8 w-8 inline-flex rounded-full bg-accent ring-ring')(Img(src='https://api.dicebear.com/8.x/lorelei/svg?seed=Alicia Koch'))
@@ -97,7 +101,7 @@ def UkNavBar(*items):
 
 show(avatar_dropdown)
 
-# %% ../ex_nbs/03_dashboard.ipynb 28
+# %% ../ex_nbs/03_dashboard.ipynb 31
 top_nav = Div(cls="flex items-center justify-between w-full")(
     Div(cls="flex items-center gap-x-4 lg:gap-x-6")(
         team_dropdown,
@@ -108,17 +112,18 @@ def UkNavBar(*items):
 
 show(top_nav)
 
-# %% ../ex_nbs/03_dashboard.ipynb 30
+# %% ../ex_nbs/03_dashboard.ipynb 33
 def page():
     return Div(cls="space-y-4")(
         top_nav,
-        UkHSplit(),
-        UkH2('Dashboard'),
-        db_nav, 
-        top_info_row,
-        Div(cls="grid gap-4 lg:grid-cols-7")(
-            Card(generate_chart(10),cls='lg:col-span-4'),
-            Card(recent_sales,cls='lg:col-span-3')))
-
-# %% ../ex_nbs/03_dashboard.ipynb 32
+    )
+#         UkHSplit(),
+#         UkH2('Dashboard'),
+#         db_nav, 
+#         top_info_row,
+#         Div(cls="grid gap-4 lg:grid-cols-7")(
+#             Card(generate_chart(10),cls='lg:col-span-4'),
+#             Card(recent_sales,cls='lg:col-span-3')))
+
+# %% ../ex_nbs/03_dashboard.ipynb 35
 dashboard_homepage = page()

ex_app/playground.py

@@ -3,7 +3,7 @@
 # %% auto 0
 __all__ = ['preset_options', 'playground_homepage', 'playground_navbar', 'page']
 
-# %% ../ex_nbs/07_playground.ipynb 1
+# %% ../ex_nbs/07_playground.ipynb 2
 from fasthtml.common import *
 from fasthtml.components import Uk
 from fh_frankenui.components import *
@@ -19,32 +19,63 @@
 from fh_frankenui.components import *
 
 # %% ../ex_nbs/07_playground.ipynb 9
-preset_options = ["Grammatical Standard English", "Summarize for a 2nd grader",
-        "Text to command","Q&A","English to other languages","Parse unstructured data",
-        "Classification","Natural language to Python","Explain code","Chat","More examples"]
+preset_options = ["Grammatical Standard English"]
+
+# , "Summarize for a 2nd grader",
+#         "Text to command","Q&A","English to other languages","Parse unstructured data",
+#         "Classification","Natural language to Python","Explain code","Chat","More examples"]
 
 # %% ../ex_nbs/07_playground.ipynb 10
-def playground_navbar():
-    rnav = Div(cls='space-x-6 mr-10')(
-#         preset_select,#UkSelect(*Options(*preset_options),name='preset',placeholder='Load a preset',searchable=True),
-        UkDropdownButton(P("Load a preset",cls=TextT.muted_sm),
-            btn_cls=UkButtonT.default,
-            options=(P('Content filter preferences',cls=TextT.muted_sm), UkHSplit(),
-                     P('Delete preset',cls=(TextT.muted_sm,'uk-text-danger'))
-                    )),
+# def playground_navbar():
+#     rnav = Div(cls='space-x-6 mr-10')(
+# #         preset_select,#UkSelect(*Options(*preset_options),name='preset',placeholder='Load a preset',searchable=True),
+#         UkDropdownButton(P("Load a preset",cls=TextT.muted_sm),
+#             btn_cls=UkButtonT.default,
+#             options=(P('Content filter preferences',cls=TextT.muted_sm), UkHSplit(),
+#                      P('Delete preset',cls=(TextT.muted_sm,'uk-text-danger'))
+#                     )),
 
+#         UkButton("Save", cls=UkButtonT.secondary),
+#         UkButton("View Code", cls=UkButtonT.secondary),
+#         UkButton("Share", cls=UkButtonT.secondary),
+#         UkDropdownButton(UkIcon('more',0.5), 
+#             btn_cls=UkButtonT.secondary,
+#             options=(P('Content filter preferences',cls=TextT.muted_sm), UkHSplit(),
+#                      P('Delete preset',cls=(TextT.muted_sm,'uk-text-danger'))
+#                     ))
+#     )
+#     return UkNavbar(lnav=UkH3('Playground'), 
+
+#                     rnav=rnav)
+
+# %% ../ex_nbs/07_playground.ipynb 12
+def playground_navbar():
+    rnav = Div(cls='flex items-center space-x-2')(
+        UkSelect(*["Grammatical Standard English", "Hi"],
+                 name='preset',
+                 optgroup_label="Examples",
+                 placeholder='Load a preset', 
+                 searchable=True, 
+                 cls='h-9 w-[200px] lg:w-[300px]'),
         UkButton("Save", cls=UkButtonT.secondary),
         UkButton("View Code", cls=UkButtonT.secondary),
         UkButton("Share", cls=UkButtonT.secondary),
-        UkDropdownButton(UkIcon('more',0.5), 
+        UkDropdownButton(UkIcon('ellipsis'), 
             btn_cls=UkButtonT.secondary,
-            options=(P('Content filter preferences',cls=TextT.muted_sm), UkHSplit(),
-                     P('Delete preset',cls=(TextT.muted_sm,'uk-text-danger'))
-                    ))
+            options=(
+                A("Content filter preferences", href="#demo"),
+                None, # divider
+                A("Delete preset", cls="text-destructive", href="#demo")
+            )
+        )
     )
-    return UkNavbar(lnav=UkH3('Playground'), 
-
-                    rnav=rnav)
+    return Div(cls="flex h-16 items-center justify-between border-b border-border px-8 py-4")(
+        UkH2("Playground", cls="text-lg font-semibold"),
+        Div(cls="flex w-full flex-1 items-center justify-end")(rnav)
+    )
+
+# Comment: This implementation assumes that the Modal components for "Save" and "View Code" 
+# are defined elsewhere and can be toggled using the uk-toggle attribute.
 
 # %% ../ex_nbs/07_playground.ipynb 14
 from fasthtml.common import *