Spaces:
Sleeping
Sleeping
File size: 6,588 Bytes
d467ea7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
"""FrankenUI Music Example build with MonsterUI (Original design by ShadCN)"""
from fasthtml.common import *
from monsterui.all import *
app, rt = fast_app(hdrs=Theme.blue.headers())
def MusicLi(t,hk=''): return Li(A(DivFullySpaced(t,P(hk,cls=TextPresets.muted_sm))))
music_items = [("About Music", "" ),
("Preferences", "⌘" ),
("Hide Music" , "⌘H" ),
("Hide Others", "⇧⌘H"),
("Quit Music" , "⌘Q" )]
file_dd_items = [("New", ""),
("Open Stream URL", "⌘U"),
("Close Window", "⌘W"),
("Library", ""),
("Import", "⌘O"),
("Burn Playlist to Disc", ""),
("Show in Finder", "⇧⌘R"),
("Convert", ""),
("Page Setup", "Print")]
edit_actions = [("Undo", "⌘Z"),
("Redo", "⇧⌘Z"),
("Cut", "⌘X"),
("Copy", "⌘C"),
("Paste", "⌘V"),
("Select All", "⌘A"),
("Deselect All", "⇧⌘A")]
view_dd_data = ["Show Playing Next", "Show Lyrics", "Show Status Bar", "Hide Sidebar", "Enter Full Screen"]
music_headers = NavBar(
Button("Music", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("Music"),NavContainer(map(lambda x: MusicLi(*x), music_items)))),
Button("File", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("File"), NavContainer(map(lambda x: MusicLi(*x), file_dd_items)))),
Button("Edit", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("Edit")),NavContainer(
*map(lambda x: MusicLi(*x), edit_actions),
Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))),
Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe")))))),
Button("View", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("View"),NavContainer(map(lambda x: MusicLi(x), view_dd_data)))),
brand=DivLAligned(H2("Purrify"))
)
# music_headers = NavBarContainer(
# NavBarLSide(
# NavBarNav(
# Li(A("Music"),NavBarNavContainer(map(lambda x: MusicLi(*x), music_items))),
# Li(A("File"), NavBarNavContainer(map(lambda x: MusicLi(*x), file_dd_items))),
# Li(A("Edit")),
# NavBarNavContainer(
# *map(lambda x: MusicLi(*x), edit_actions),
# Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))),
# Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe"))))),
# Li(A("View"),
# NavBarNavContainer(map(lambda x: MusicLi(x), view_dd_data))),
# Li(A("Account"),
# NavBarNavContainer(
# NavHeaderLi("Switch Account"),
# *map(MusicLi, ("Andy", "Benoit", "Luis", "Manage Family", "Add Account")))))))
def Album(title,artist):
img_url = 'https://ucarecdn.com/e5607eaf-2b2a-43b9-ada9-330824b6afd7/music1.webp'
return Div(
Div(cls="overflow-hidden rounded-md")(Img(cls="transition-transform duration-200 hover:scale-105", src=img_url)),
Div(cls='space-y-1')(Strong(title),P(artist,cls=TextT.muted)))
listen_now_albums = (("Roar", "Catty Perry"), ("Feline on a Prayer", "Cat Jovi"),("Fur Elise", "Ludwig van Beethovpurr"),("Purrple Rain", "Prince's Cat"))
made_for_you_albums = [("Like a Feline", "Catdonna"),
("Livin' La Vida Purrda", "Ricky Catin"),
("Meow Meow Rocket", "Elton Cat"),
("Rolling in the Purr", "Catdelle"),
("Purrs of Silence", "Cat Garfunkel"),
("Meow Me Maybe", "Carly Rae Purrsen"),]
music_content = (Div(H3("Listen Now"), cls="mt-6 space-y-1"),
Subtitle("Top picks for you. Updated daily."),
DividerLine(),
Grid(*[Album(t,a) for t,a in listen_now_albums], cls='gap-8'),
Div(H3("Made for You"), cls="mt-6 space-y-1"),
Subtitle("Your personal playlists. Updated daily."),
DividerLine(),
Grid(*[Album(t,a) for t,a in made_for_you_albums], cols_xl=6))
tabs = TabContainer(
Li(A('Music', href='#'), cls='uk-active'),
Li(A('Podcasts', href='#')),
Li(A('Live', cls='opacity-50'), cls='uk-disabled'),
uk_switcher='connect: #component-nav; animation: uk-animation-fade',
alt=True)
def podcast_tab():
return Div(
Div(cls='space-y-3 mt-6')(
H3("New Episodes"),
Subtitle("Your favorite podcasts. Updated daily.")),
Div(cls="uk-placeholder flex h-[450px] items-center justify-center rounded-md mt-4",uk_placeholder=True)(
DivVStacked(cls="space-y-6")(
UkIcon("microphone", 3),
H4("No episodes added"),
Subtitle("You have not added any podcasts. Add one below."),
Button("Add Podcast", cls=ButtonT.primary))))
discoved_data = [("play-circle","Listen Now"), ("binoculars", "Browse"), ("rss","Radio")]
library_data = [("play-circle", "Playlists"), ("music", "Songs"), ("user", "Made for You"), ("users", "Artists"), ("bookmark", "Albums")]
playlists_data = [("library","Recently Added"), ("library","Recently Played")]
def MusicSidebarLi(icon, text): return Li(A(DivLAligned(UkIcon(icon), P(text))))
sidebar = NavContainer(
NavHeaderLi(H3("Discover")), *[MusicSidebarLi(*o) for o in discoved_data],
NavHeaderLi(H3("Library")), *[MusicSidebarLi(*o) for o in library_data],
NavHeaderLi(H3("Playlists")),*[MusicSidebarLi(*o) for o in playlists_data],
cls=(NavT.primary,'space-y-3','pl-8'))
@rt
def index():
return Title("Music Example"),Container(music_headers, DividerSplit(),
Grid(sidebar,
Div(cls="col-span-4 border-l border-border")(
Div(cls="px-8 py-6")(
DivFullySpaced(
Div(cls="max-w-80")(tabs),
Button(cls=ButtonT.primary)(DivLAligned(UkIcon('circle-plus')),Div("Add music"))),
Ul(id="component-nav", cls="uk-switcher")(
Li(*music_content),
Li(podcast_tab())))),
cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5))
serve()
|