add order details page

components/ui/card.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+import { VariantProps, tv } from 'tailwind-variants';
+
+const cardStyles = tv({
+  base: 'rounded p-6 text-left w-full',
+  variants: {
+    outlined: {
+      true: 'border bg-white',
+      false: {}
+    },
+    elevated: {
+      true: 'shadow-lg shadow-content/10 bg-white',
+      false: {}
+    }
+  },
+  defaultVariants: {
+    outlined: true
+  }
+});
+
+interface CardProps extends React.ComponentPropsWithoutRef<'div'>, VariantProps<typeof cardStyles> {
+  asChild?: boolean;
+}
+
+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} />
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export { Card, type CardProps };