Spaces:
Sleeping
Sleeping
File size: 8,685 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 140 141 142 |
"""FrankenUI Cards Example built with MonsterUI (original design by ShadCN)"""
from fasthtml.common import *
from fasthtml.components import Uk_input_tag
from fasthtml.svg import *
from monsterui.all import *
import calendar
from datetime import datetime
app, rt = fast_app(hdrs=Theme.blue.headers())
CreateAccount = Card(
Grid(Button(DivLAligned(UkIcon('github'),Div('Github'))),Button('Google')),
DividerSplit("OR CONTINUE WITH", text_cls=TextPresets.muted_sm),
LabelInput('Email', id='email', placeholder='m@example.com'),
LabelInput('Password', id='password',placeholder='Password', type='Password'),
header=(H3('Create an Account'),Subtitle('Enter your email below to create your account')),
footer=Button('Create Account',cls=(ButtonT.primary,'w-full')))
PaypalSVG_data = "M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
AppleSVG_data = "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
Card1Svg = Svg(viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke_linecap="round", stroke_linejoin="round", stroke_width="2", cls="h-6 w-6 mr-1")(Rect(width="20", height="14", x="2", y="5", rx="2"),Path(d="M2 10h20"))
PaypalSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=PaypalSVG_data, fill="currentColor")),
AppleSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=AppleSVG_data, fill="currentColor"))
PaymentMethod = Card(
Grid(Button(DivCentered(Card1Svg, "Card"), cls='h-20 border-2 border-primary'),
Button(DivCentered(PaypalSvg, "PayPal"), cls='h-20'),
Button(DivCentered(AppleSvg, "Apple"), cls='h-20')),
Form(LabelInput('Name', id='name', placeholder='John Doe'),
LabelInput('Card Number', id='card_number', placeholder='m@example.com'),
Grid(LabelSelect(*Options(*calendar.month_name[1:],selected_idx=0),label='Expires',id='expire_month'),
LabelSelect(*Options(*range(2024,2030),selected_idx=0), label='Year', id='expire_year'),
LabelInput('CVV', id='cvv',placeholder='CVV', cls='mt-0'))),
header=(H3('Payment Method'),Subtitle('Add a new payment method to your account.')))
area_opts = ('Team','Billing','Account','Deployment','Support')
severity_opts = ('Severity 1 (Highest)', 'Severity 2', 'Severity 3', 'Severity 4 (Lowest)')
ReportIssue = Card(
Grid(Div(LabelSelect(*Options(*area_opts), label='Area', id='area')),
Div(LabelSelect(*Options(*severity_opts),label='Severity',id='area'))),
LabelInput( label='Subject', id='subject', placeholder='I need help with'),
LabelTextArea( label='Description', id='description',placeholder='Please include all information relevant to your issue'),
Div(FormLabel('Tags', fr='#tags'),
Uk_input_tag(name="Tags",state="danger", value="Spam,Invalid", uk_cloak=True, id='tags')),
header=(H3('Report Issue'),Subtitle('What area are you having problems with?')),
footer = DivFullySpaced(Button('Cancel'), Button(cls=ButtonT.primary)('Submit')))
monster_desc ="Python-first beautifully designed components because you deserve to focus on features that matter and your app deserves to be beautiful from day one."
MonsterUI = Card(H4("Monster UI"),
Subtitle(monster_desc),
DivLAligned(
Div("Python"),
DivLAligned(UkIcon('star'),Div("20k"), cls='space-x-1'),
Div(datetime.now().strftime("%B %d, %Y")),
cls=('space-x-4',TextPresets.muted_sm)))
def CookieTableRow(heading, description, active=False):
return Tr(Td(H5(heading)),
Td(P(description, cls=TextPresets.muted_sm)),
Td(Switch(checked=active)))
CookieSettings = Card(
Table(Tbody(
CookieTableRow('Strictly Necessary', 'These cookies are essential in order to use the website and use its features.', True),
CookieTableRow('Functional Cookies', 'These cookies allow the website to provide personalized functionality.'),
CookieTableRow('Performance Cookies', 'These cookies help to improve the performance of the website.'))),
header=(H4('Cookie Settings'),Subtitle('Manage your cookie settings here.')),
footer=Button('Save Preferences', cls=(ButtonT.primary, 'w-full')))
team_members = [("Sofia Davis", "m@example.com", "Owner"),("Jackson Lee", "p@example.com", "Member"),]
def TeamMemberRow(name, email, role):
return DivFullySpaced(
DivLAligned(
DiceBearAvatar(name, 10,10),
Div(P(name, cls=(TextT.sm, TextT.medium)),
P(email, cls=TextPresets.muted_sm))),
Button(role, UkIcon('chevron-down', cls='ml-4')),
DropDownNavContainer(map(NavCloseLi, [
A(Div('Viewer', NavSubtitle('Can view and comment.'))),
A(Div('Developer', NavSubtitle('Can view, comment and edit.'))),
A(Div('Billing', NavSubtitle('Can view, comment and manage billing.'))),
A(Div('Owner', NavSubtitle('Admin-level access to all resources.')))])))
TeamMembers = Card(*[TeamMemberRow(*member) for member in team_members],
header = (H4('Team Members'),Subtitle('Invite your team members to collaborate.')))
access_roles = ("Read and write access", "Read-only access")
team_members = [("Olivia Martin", "m@example.com", "Read and write access"),
("Isabella Nguyen", "b@example.com", "Read-only access"),
("Sofia Davis", "p@example.com", "Read-only access")]
def TeamMemberRow(name, email, role):
return DivFullySpaced(
DivLAligned(DiceBearAvatar(name, 10,10),
Div(P(name, cls=(TextT.sm, TextT.medium)),
P(email, cls=TextPresets.muted_sm))),
Select(*Options(*access_roles, selected_idx=access_roles.index(role))))
ShareDocument = Card(
DivLAligned(Input(value='http://example.com/link/to/document'),Button('Copy link', cls='whitespace-nowrap')),
Divider(),
H4('People with access', cls=TextPresets.bold_sm),
*[TeamMemberRow(*member) for member in team_members],
header = (H4('Share this document'),Subtitle('Anyone with the link can view this document.')))
DateCard = Card(Button('Jan 20, 2024 - Feb 09, 2024'))
section_content =(('bell','Everything',"Email digest, mentions & all activity."),
('user',"Available","Only mentions and comments"),
('ban', "Ignoring","Turn of all notifications"))
def NotificationRow(icon, name, desc):
return Li(cls='-mx-1')(A(DivLAligned(UkIcon(icon),Div(P(name),P(desc, cls=TextPresets.muted_sm)))))
Notifications = Card(
NavContainer(
*[NotificationRow(*row) for row in section_content],
cls=NavT.secondary),
header = (H4('Notification'),Subtitle('Choose what you want to be notified about.')),
body_cls='pt-0')
TeamCard = Card(
DivLAligned(
DiceBearAvatar("Isaac Flath", h=24, w=24),
Div(H3("Isaac Flath"), P("Library Creator"))),
footer=DivFullySpaced(
DivHStacked(UkIcon("map-pin", height=16), P("Alexandria, VA")),
DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))),
cls=CardT.hover)
@rt
def index():
return Title("Cards Example"),Container(Grid(
*map(Div,(
Div(PaymentMethod,CreateAccount, TeamCard, cls='space-y-4'),
Div(TeamMembers, ShareDocument,DateCard,Notifications, cls='space-y-4'),
Div(ReportIssue,MonsterUI,CookieSettings, cls='space-y-4'))),
cols_md=1, cols_lg=2, cols_xl=3))
serve()
|