@tapcart/mobile-components 0.1.7 → 0.1.9

package/dist/components/ui/button.js

@@ -15,7 +15,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { IconLoader2 } from "@tabler/icons-react";
 import { cn } from "../../lib/utils";
-const buttonVariants = cva("flex rounded items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
+const buttonVariants = cva("w-full flex rounded items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
     variants: {
         size: {
             default: "h-10 py-3 px-4",

package/dist/components/ui/product-card.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+type ProductCardProps = {
+    product: {
+        variants: {
+            compare_at_price: number | null;
+            price: number;
+        }[];
+        images: {
+            src: string;
+        }[];
+        title: string;
+        tags: string[];
+    };
+    className?: string;
+    quickAdd: (e: React.MouseEvent<HTMLButtonElement>, product: any) => void;
+    openProduct: (e: React.MouseEvent<HTMLDivElement>, product: any) => void;
+    imageRatio: "1:1" | "2:3" | "4:5";
+    imageFit: "fit" | "fill";
+    theme: {
+        textColors: {
+            priceProduct: string;
+            productTitle: string;
+        };
+        font: {
+            productTitle: string;
+            productPrice: string;
+        };
+    };
+};
+declare const ProductCard: React.FC<ProductCardProps>;
+export default ProductCard;
+//# sourceMappingURL=product-card.d.ts.map

package/dist/components/ui/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":";AAGA,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE;QACP,QAAQ,EAAE;YAAE,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAC/D,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACzE,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAClC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,KAAK,EAAE;QACL,UAAU,EAAE;YACV,YAAY,EAAE,MAAM,CAAC;YACrB,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,IAAI,EAAE;YACJ,YAAY,EAAE,MAAM,CAAC;YACrB,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;KACH,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0E3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/ui/product-card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, AspectRatio, Text, Badge, Loading } from "@tapcart/mobile-components";
+import { useEffect, useState } from "react";
+const ProductCard = ({ product, className, quickAdd, openProduct, imageRatio, imageFit, theme, }) => {
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        // Simulate loading
+        const timer = setTimeout(() => setLoading(false), 1000);
+        return () => clearTimeout(timer);
+    }, []);
+    const variant = product.variants[0];
+    const aspectRatio = {
+        "1:1": 1,
+        "2:3": 2 / 3,
+        "4:5": 4 / 5,
+    }[imageRatio];
+    if (loading) {
+        return _jsx(Loading, {});
+    }
+    return (_jsxs("div", Object.assign({ className: `${className}`, onClick: (e) => openProduct(e, product) }, { children: [_jsxs(AspectRatio, Object.assign({ ratio: aspectRatio }, { children: [_jsx("img", { className: `w-full h-full object-${imageFit} rounded-t-lg`, src: product.images[0].src, alt: product.title }), product.tags.includes("SUMMER") && (_jsx(Badge, Object.assign({ variant: "secondary", className: "absolute bottom-[15px] rounded-none bg-[#e2fe9f] pointer-events-none" }, { children: "SUMMER" })))] })), _jsx(Button, Object.assign({ variant: "quickadd", size: "sm", onClick: (e) => quickAdd(e, product) }, { children: "+ Quick add" })), _jsx(Text, Object.assign({ className: `text-xs mt-[8px] ${theme.font.productTitle}`, style: { color: theme.textColors.productTitle } }, { children: product.title })), _jsxs("div", Object.assign({ className: "flex mt-[4px]" }, { children: [variant.compare_at_price && (_jsxs(Text, Object.assign({ className: `text-sm mr-[8px] line-through text-red-500 ${theme.font.productPrice}` }, { children: ["$", variant.compare_at_price] }))), _jsxs(Text, Object.assign({ className: `text-sm ${theme.font.productPrice}`, style: { color: theme.textColors.priceProduct } }, { children: ["$", variant.price] }))] }))] })));
+};
+export default ProductCard;