Update testnavbar.py

testnavbar.py

@@ -2,6 +2,10 @@ from fasthtml.common import *
 # MonsterUI shadows fasthtml components with the same name
 from monsterui.all import *
 # If you don't want shadowing behavior, you use import monsterui.core as ... style instead
+from fasthtml.components import Uk_input_tag
+from fasthtml.svg import *
+import calendar
+from datetime import datetime
 
 # Get frankenui and tailwind headers via CDN using Theme.blue.headers()
 hdrs = Theme.blue.headers()
@@ -19,6 +23,31 @@ products = [
     {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/400/100?random=5"},
     {"name": "Camera", "price": "$799", "img": "https://picsum.photos/400/100?random=6"},]
 
+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.')))
+
 def ProductCard(p):
     # Card does lots of boilerplate classes so you can just pass in the content
     return Card(