add preloading to account's pages

components/account/orders/order-summary-mobile.tsx

@@ -0,0 +1,46 @@
+'use client';
+import { ShoppingCartIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import Text from 'components/ui/text';
+import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react';
+import Divider from 'components/divider';
+import Price from 'components/price';
+import { Order } from 'lib/shopify/types';
+import OrderSummary from './order-summary';
+
+export default function OrderSummaryMobile({ order }: { order: Order }) {
+  return (
+    <div className="block lg:hidden">
+      <Disclosure>
+        {({ open }) => (
+          <>
+            <DisclosureButton className="flex w-full justify-between p-6">
+              <div className="flex items-center gap-2 text-primary">
+                <ShoppingCartIcon className="w-6" />
+                <Text>{open ? 'Hide order summary' : 'Show order summary'}</Text>
+                {open ? <ChevronUpIcon className="w-4" /> : <ChevronDownIcon className="w-4" />}
+              </div>
+              <Price
+                amount={order.totalPrice!.amount}
+                currencyCode={order.totalPrice!.currencyCode}
+              />
+            </DisclosureButton>
+
+            <Transition
+              enter="duration-200 ease-out"
+              enterFrom="opacity-0 -translate-y-6"
+              enterTo="opacity-100 translate-y-0"
+              leave="duration-300 ease-out"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 -translate-y-6"
+            >
+              <DisclosurePanel className="origin-top p-6 text-gray-500 transition">
+                <OrderSummary order={order} />
+              </DisclosurePanel>
+            </Transition>
+          </>
+        )}
+      </Disclosure>
+      <Divider hasSpacing={false} />
+    </div>
+  );
+}

components/account/orders/order-summary.tsx

@@ -0,0 +1,73 @@
+import Image from 'next/image';
+import Price from 'components/price';
+import Badge from 'components/ui/badge';
+import Heading from 'components/ui/heading';
+import Label from 'components/ui/label';
+import Text from 'components/ui/text';
+import { Order } from 'lib/shopify/types';
+
+export default function OrderSummary({ order }: { order: Order }) {
+  return (
+    <div className="flex flex-col gap-6">
+      <Heading size="sm">Order Summary</Heading>
+      <div className="flex flex-col gap-6">
+        {order.lineItems.map((lineItem, index) => (
+          <div key={index} className="flex items-center gap-4">
+            <Badge content={lineItem.quantity!}>
+              <Image
+                src={lineItem.image.url}
+                alt={lineItem.image.altText}
+                width={lineItem.image.width}
+                height={lineItem.image.height}
+                className="rounded border"
+              />
+            </Badge>
+            <div className="flex flex-col gap-2">
+              <Text>{lineItem.title}</Text>
+              <Label>{lineItem.sku}</Label>
+            </div>
+            <Price
+              className="text-sm"
+              amount={lineItem.price!.amount}
+              currencyCode={lineItem.price!.currencyCode}
+            />
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col">
+          <div className="flex items-center justify-between">
+            <Text>Subtotal</Text>
+            <Price
+              className="text-sm font-semibold"
+              amount={order.totalPrice!.amount}
+              currencyCode={order.totalPrice!.currencyCode}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Text>Shipping</Text>
+            {order.shippingMethod?.price.amount !== '0.0' ? (
+              <Price
+                className="text-sm font-semibold"
+                amount={order.shippingMethod!.price.amount}
+                currencyCode={order.shippingMethod!.price.currencyCode}
+              />
+            ) : (
+              <Text className="font-semibold">Free</Text>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center justify-between">
+          <Heading as="span" size="sm">
+            Total
+          </Heading>
+          <Price
+            className="font-semibold"
+            amount={order.totalPrice!.amount}
+            currencyCode={order.totalPrice!.currencyCode}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

components/button.tsx

@@ -43,7 +43,9 @@ const buttonVariants = tv({
           // hover color
           'hover:bg-primary-empahsis',
           // disabled
-          'disabled:bg-primary-muted'
+          'disabled:bg-primary-muted',
+          'hover:bg-primary-emphasis',
+          'pressed:bg-primary-emphasis/80'
         ]
       },
       secondary: {

components/ui/card.tsx

@@ -8,15 +8,16 @@ const cardStyles = tv({
   variants: {
     outlined: {
       true: 'border bg-white',
-      false: {}
+      false: ''
     },
     elevated: {
-      true: 'shadow-lg shadow-content/10 bg-white',
-      false: {}
+      true: 'shadow-lg bg-white',
+      false: ''
     }
   },
   defaultVariants: {
-    outlined: true
+    outlined: true,
+    elevated: false
   }
 });
 
@@ -27,8 +28,13 @@ interface CardProps extends React.ComponentPropsWithoutRef<'div'>, VariantProps<
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
   ({ className, asChild, outlined, elevated, ...props }, forwardedRef) => {
     const Component = asChild ? Slot : 'div';
+
     return (
-      <Component ref={forwardedRef} className={cardStyles({ outlined, className })} {...props} />
+      <Component
+        ref={forwardedRef}
+        className={cardStyles({ outlined, elevated, className })}
+        {...props}
+      />
     );
   }
 );