Update testnavbar.py

testnavbar.py

@@ -51,35 +51,36 @@ PaymentMethod = Card(
 def ProductCard(p):
     # Card does lots of boilerplate classes so you can just pass in the content
     return Card( 
-        # width:100% makes the image take the full width so we are guarenteed that we won't
-        # have the image cut off or not large enough. Because all our images are a consistent
-        # size we do not need to worry about stretching or skewing the image, this is ideal.
-        # If you have images of different sizes, you will need to use object-fit:cover and/or
-        # height to either strech, shrink, or crop the image. It is much better to adjust your
-        # images to be a consistent size upfront so you don't have to handle edge cases of
-        # different images skeweing/stretching differently.
-        Img(src=p["img"], alt=p["name"], style="width:100%"),
-        # All components can take a cls argument to add additional styling - `mt-2` adds margin
-        # to the top (see spacing tutorial for details on spacing).
-        # 
-        # Often adding space makes a site look more put together - usually the 2 - 5 range is a
-        # good choice
-        H4(p["name"], cls="mt-3 text-lg font-semibold"), 
-        # There are helpful Enums, such as TextPresetsT, ButtonT, ContainerT, etc that allow for easy
-        # discoverability of class options.
-        # bold_sm is helpful for things that you want to look like regular text, but stand out
-        # visually for emphasis.
-        p["price"], cls=(TextPresets.bold_sm, "text-gray-700 mt-1"), 
-        # ButtonT.primary is useful for actions you really want the user to take (like adding
-        # something to the cart) - these stand out visually. For dangerous actions (like
-        # deleting something) you generally would want to use ButtonT.destructive. For UX actions
-        # that aren't a goal of the page (like cancelling something that hasn't been submitted)
-        # you generally want the default styling.
-        Button("Add to cart", cls=(ButtonT.primary, "mt-2"),  
-               # HTMX can be used as normal on any component
-               hx_get=product_detail.to(product_name=p['name']),
-               hx_push_url='true',
-               hx_target='body'))
+    # width:100% makes the image take the full width so we are guarenteed that we won't
+    # have the image cut off or not large enough. Because all our images are a consistent
+    # size we do not need to worry about stretching or skewing the image, this is ideal.
+    # If you have images of different sizes, you will need to use object-fit:cover and/or
+    # height to either strech, shrink, or crop the image. It is much better to adjust your
+    # images to be a consistent size upfront so you don't have to handle edge cases of
+    # different images skeweing/stretching differently.
+    Img(src=p["img"], alt=p["name"], style="width:100%"),
+    # All components can take a cls argument to add additional styling - `mt-2` adds margin
+    # to the top (see spacing tutorial for details on spacing).
+    # 
+    # Often adding space makes a site look more put together - usually the 2 - 5 range is a
+    # good choice
+    H4(p["name"], cls="mt-3 text-lg font-semibold"), 
+    # There are helpful Enums, such as TextPresetsT, ButtonT, ContainerT, etc that allow for easy
+    # discoverability of class options.
+    # bold_sm is helpful for things that you want to look like regular text, but stand out
+    # visually for emphasis.
+    P(p["price"], cls=(TextPresets.bold_sm, "text-gray-700 mt-1")), 
+    # ButtonT.primary is useful for actions you really want the user to take (like adding
+    # something to the cart) - these stand out visually. For dangerous actions (like
+    # deleting something) you generally would want to use ButtonT.destructive. For UX actions
+    # that aren't a goal of the page (like cancelling something that hasn't been submitted)
+    # you generally want the default styling.
+    Button("Add to cart", cls=(ButtonT.primary, "mt-2"),  
+           # HTMX can be used as normal on any component
+           hx_get=product_detail.to(product_name=p['name']),
+           hx_push_url='true',
+           hx_target='body')
+)
 
 @rt
 def index():