room-craft
Version:
A lightweight React component for displaying products in both Augmented Reality (AR) and 3D. Perfect for eCommerce applications where you want to showcase your products in an immersive and interactive way.
739 lines (735 loc) • 28 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _qrcode = require("qrcode.react");
require("@google/model-viewer");
require("./Arcard.css");
var _webgpu = require("three/webgpu");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
if (!customElements.get("model-viewer")) {
Promise.resolve().then(function () {
return _interopRequireWildcard(require("@google/model-viewer"));
});
}
// QR Scanner Card Component
function QrScannerCard(_ref) {
var onCancel = _ref.onCancel,
url = _ref.url;
return /*#__PURE__*/_react["default"].createElement("article", {
className: "qr-scanner-card"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "qr-scanner-header"
}, /*#__PURE__*/_react["default"].createElement(_qrcode.QRCodeSVG, {
value: url,
size: 155,
bgColor: "#FFFFFF",
fgColor: "#000000"
}), /*#__PURE__*/_react["default"].createElement("button", {
onClick: onCancel,
className: "cancel-button"
}, /*#__PURE__*/_react["default"].createElement("img", {
loading: "lazy",
src: "https://cdn.builder.io/api/v1/image/assets/TEMP/8413f1e3d7bad3c1c6a2161fe0a5e57db6bf71b385607571aa0c4b09275a751c",
alt: "Cancel",
style: {
width: "100%",
height: "100%"
}
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "qr-scanner-footer"
}, "Scan QR Code"));
}
// Main Arcard Component
var Arcard = function Arcard(_ref2) {
var gltfPath = _ref2.gltfPath,
productName = _ref2.productName,
productDescription = _ref2.productDescription,
type = _ref2.type,
customWidth = _ref2.customWidth,
customHeight = _ref2.customHeight,
productPrice = _ref2.productPrice,
productRating = _ref2.productRating,
cardStyle = _ref2.cardStyle,
_ref2$cardColor = _ref2.cardColor,
cardColor = _ref2$cardColor === void 0 ? "#FFFFFF" : _ref2$cardColor,
_ref2$textColor = _ref2.textColor,
textColor = _ref2$textColor === void 0 ? "#000000" : _ref2$textColor;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
showQrScanner = _useState2[0],
setShowQrScanner = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
showPopup = _useState4[0],
setShowPopup = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
isMobile = _useState6[0],
setIsMobile = _useState6[1];
var _useState7 = (0, _react.useState)([]),
_useState8 = _slicedToArray(_useState7, 2),
errors = _useState8[0],
setErrors = _useState8[1];
(0, _react.useEffect)(function () {
var handleResize = function handleResize() {
setIsMobile(window.innerWidth <= 768);
};
window.addEventListener("resize", handleResize);
handleResize();
return function () {
window.removeEventListener("resize", handleResize);
};
}, []);
(0, _react.useEffect)(function () {
var missingFields = [];
if (!gltfPath && type !== "horizontal-slider") missingFields.push("gltfPath");
setErrors(missingFields);
}, [gltfPath, type]);
var handleRightButtonClick = function handleRightButtonClick() {
var baseUrl = window.location.origin;
var arUrl = "".concat(baseUrl, "/xr?gltfPath=").concat(gltfPath);
// If it's a mobile device, redirect directly to the AR view
if (isMobile) {
window.location.href = arUrl; // Directly navigate to AR view
} else {
// For desktop, show the QR code
setShowQrScanner(arUrl); // Show the QR code for desktop
}
};
var handleCancel = function handleCancel() {
return setShowQrScanner(false);
};
var handleClosePopup = function handleClosePopup() {
return setShowPopup(false);
};
if (errors.length > 0) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "error-container"
}, /*#__PURE__*/_react["default"].createElement("h2", null, "Missing Required Props"), /*#__PURE__*/_react["default"].createElement("ul", null, errors.map(function (error) {
return /*#__PURE__*/_react["default"].createElement("li", {
key: error
}, error, " is not provided");
})));
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, type === "3d-ar" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showPopup && /*#__PURE__*/_react["default"].createElement("div", {
className: "popup-overlay",
style: {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.7)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 999
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "popup-content",
style: {
position: "relative",
maxWidth: "90%",
maxHeight: "90%",
background: "#fff",
padding: "20px",
borderRadius: "10px",
boxShadow: "0 2px 15px rgba(0, 0, 0, 0.1)"
}
}, /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
backgroundColor: cardColor,
width: "100%",
height: "400px",
borderRadius: "10px"
}
}), /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleClosePopup,
style: {
position: "absolute",
top: "10px",
right: "10px",
background: "rgba(0, 0, 0, 0.5)",
color: "#fff",
border: "none",
padding: "10px",
borderRadius: "50%",
cursor: "pointer",
fontSize: "16px"
}
}, "\u2715"))), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, cardStyle === "minimal" && /*#__PURE__*/_react["default"].createElement("article", {
className: "main-card",
style: {
position: "relative",
backgroundColor: cardColor || "#fff",
borderRadius: "15px",
overflow: "hidden",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
transition: "transform 0.3s",
cursor: "pointer",
marginBottom: "20px",
padding: showQrScanner ? "0px" : "5px"
}
}, !showQrScanner && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
backgroundColor: cardColor,
width: "100%",
height: "200px",
borderRadius: "10px"
}
}), /*#__PURE__*/_react["default"].createElement("p", {
style: {
position: "absolute",
bottom: "7px",
left: "50%",
transform: "translateX(-50%)",
fontSize: "16px",
fontWeight: "600",
color: textColor || "#fff",
margin: "0",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
// Prevent text from wrapping to a new line
textAlign: "center",
maxWidth: "90%",
// Prevent overflow
wordWrap: "break-word" // Handle long words
}
}, productName), /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleRightButtonClick,
style: {
position: "absolute",
bottom: "10px",
right: "10px",
width: "30px",
height: "30px",
background: "url('https://cdn.builder.io/api/v1/image/assets/TEMP/7344838b6c7244cc25bcab8cd8ceaf043201fa2fc9c5bde3a52bef437742f58c') no-repeat center center",
backgroundSize: "contain",
border: "none",
cursor: "pointer",
transition: "transform 0.3s"
}
})), showQrScanner && !isMobile && /*#__PURE__*/_react["default"].createElement(QrScannerCard, {
onCancel: handleCancel,
url: showQrScanner
})), cardStyle === "glassmorphism" && /*#__PURE__*/_react["default"].createElement("article", {
className: "main-card",
style: {
position: "relative",
backgroundColor: "rgba(255, 255, 255, 0.1)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
border: "1px solid rgba(255, 255, 255, 0.3)",
borderRadius: "15px",
overflow: "hidden",
boxShadow: "0 8px 32px rgba(31, 38, 135, 0.37)",
transition: "transform 0.3s",
cursor: "pointer",
marginBottom: "20px",
padding: showQrScanner ? "0px" : "5px"
}
}, !showQrScanner && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
backgroundColor: cardColor,
width: "100%",
height: "200px",
borderRadius: "10px"
}
}), /*#__PURE__*/_react["default"].createElement("p", {
style: {
position: "absolute",
bottom: "7px",
left: "50%",
transform: "translateX(-50%)",
fontSize: "16px",
fontWeight: "600",
color: textColor || "#fff",
margin: "0",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
// Prevent text from wrapping to a new line
textAlign: "center",
maxWidth: "90%",
// Prevent overflow
wordWrap: "break-word" // Handle long words
}
}, productName), /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleRightButtonClick,
style: {
position: "absolute",
bottom: "10px",
right: "10px",
width: "30px",
height: "30px",
background: "url('https://cdn.builder.io/api/v1/image/assets/TEMP/7344838b6c7244cc25bcab8cd8ceaf043201fa2fc9c5bde3a52bef437742f58c') no-repeat center center",
backgroundSize: "contain",
border: "none",
cursor: "pointer",
transition: "transform 0.3s"
}
})), showQrScanner && !isMobile && /*#__PURE__*/_react["default"].createElement(QrScannerCard, {
onCancel: handleCancel,
url: showQrScanner
})))), type === "3d-only" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, cardStyle === "minimal" && /*#__PURE__*/_react["default"].createElement("div", {
className: "main-card",
style: {
position: "relative",
backgroundColor: cardColor || "#fff",
borderRadius: "15px",
overflow: "hidden",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
transition: "transform 0.3s",
cursor: "pointer",
padding: "2px"
}
}, /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
backgroundColor: cardColor,
width: "100%",
height: "250px",
borderRadius: "10px"
}
}), /*#__PURE__*/_react["default"].createElement("p", {
style: {
marginTop: "5px",
fontSize: "16px",
fontWeight: "600",
color: textColor || "#111111",
textAlign: "center",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
width: "100%" // Ensure it respects the card width
}
}, productName)), cardStyle === "glassmorphism" && /*#__PURE__*/_react["default"].createElement("div", {
className: "main-card",
style: {
position: "relative",
backgroundColor: "rgba(255, 255, 255, 0.1)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
border: "1px solid rgba(255, 255, 255, 0.3)",
borderRadius: "15px",
overflow: "hidden",
boxShadow: "0 8px 32px rgba(31, 38, 135, 0.37)",
transition: "transform 0.3s",
cursor: "pointer",
padding: "2px"
}
}, /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
width: "100%",
height: "250px",
borderRadius: "10px"
}
}), /*#__PURE__*/_react["default"].createElement("p", {
style: {
marginTop: "5px",
fontSize: "16px",
fontWeight: "600",
color: textColor || "#111111",
textAlign: "center",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
width: "100%" // Ensure it respects the card width
}
}, productName))), type === "custom-size" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showPopup && /*#__PURE__*/_react["default"].createElement("div", {
className: "popup-overlay",
style: {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.7)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 999
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "popup-content",
style: {
position: "relative",
maxWidth: "90%",
maxHeight: "90%",
background: "#fff",
padding: "20px",
borderRadius: "10px",
boxShadow: "0 2px 15px rgba(0, 0, 0, 0.1)"
}
}, /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
backgroundColor: cardColor,
width: "100%",
height: "400px",
borderRadius: "10px"
}
}), /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleClosePopup,
style: {
position: "absolute",
top: "10px",
right: "10px",
background: "rgba(0, 0, 0, 0.5)",
color: "#fff",
border: "none",
padding: "10px",
borderRadius: "50%",
cursor: "pointer",
fontSize: "16px"
}
}, "\u2715"))), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, cardStyle === "minimal" && /*#__PURE__*/_react["default"].createElement("article", {
className: "main-card",
style: _defineProperty({
position: "relative",
backgroundColor: cardColor || "#fff",
borderRadius: "15px",
overflow: "hidden",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
transition: "transform 0.3s",
cursor: "pointer",
marginBottom: "20px",
width: customWidth || "300px",
// Default size if not provided
height: customHeight || "200px"
}, "overflow", "auto")
}, !showQrScanner && /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
backgroundColor: cardColor,
width: "100%",
height: "100%",
// Fill container
borderRadius: "10px"
}
}), showQrScanner && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
alignItems: "center",
backgroundColor: "rgba(255, 255, 255, 0.05)"
}
}, /*#__PURE__*/_react["default"].createElement(QrScannerCard, {
onCancel: handleCancel,
url: showQrScanner
})), !showQrScanner && /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleRightButtonClick,
style: {
position: "absolute",
bottom: "10px",
right: "10px",
width: "30px",
height: "30px",
background: "url('https://cdn.builder.io/api/v1/image/assets/TEMP/7344838b6c7244cc25bcab8cd8ceaf043201fa2fc9c5bde3a52bef437742f58c') no-repeat center center",
backgroundSize: "contain",
border: "none",
cursor: "pointer",
transition: "transform 0.3s"
}
})), cardStyle === "glassmorphism" && /*#__PURE__*/_react["default"].createElement("article", {
className: "main-card",
style: _defineProperty({
position: "relative",
backgroundColor: "rgba(255, 255, 255, 0.1)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
border: "1px solid rgba(255, 255, 255, 0.3)",
borderRadius: "15px",
overflow: "hidden",
boxShadow: "0 8px 32px rgba(31, 38, 135, 0.37)",
transition: "transform 0.3s",
cursor: "pointer",
marginBottom: "20px",
padding: "10px",
width: customWidth || "300px",
// Default size
height: customHeight || "200px"
}, "overflow", "auto")
}, showQrScanner && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
alignItems: "center",
backgroundColor: "rgba(255, 255, 255, 0.05)"
}
}, /*#__PURE__*/_react["default"].createElement(QrScannerCard, {
onCancel: handleCancel,
url: showQrScanner
})), !showQrScanner && /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
backgroundColor: cardColor,
width: "100%",
height: "100%",
borderRadius: "10px"
}
}), !showQrScanner && /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleRightButtonClick,
style: {
position: "absolute",
bottom: "10px",
right: "10px",
width: "30px",
height: "30px",
background: "url('https://cdn.builder.io/api/v1/image/assets/TEMP/7344838b6c7244cc25bcab8cd8ceaf043201fa2fc9c5bde3a52bef437742f58c') no-repeat center center",
backgroundSize: "contain",
border: "none",
cursor: "pointer",
transition: "transform 0.3s"
}
})))), type === "detailed" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showPopup && /*#__PURE__*/_react["default"].createElement("div", {
className: "popup-overlay",
style: {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.7)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 9999
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
position: "relative",
width: "80%",
height: "80%",
maxWidth: "1200px",
background: "#fff",
padding: "20px",
borderRadius: "10px",
boxShadow: "0 2px 15px rgba(0, 0, 0, 0.1)"
}
}, /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
width: "100%",
height: "100%",
borderRadius: "10px"
}
}), /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleClosePopup,
style: {
position: "absolute",
top: "15px",
right: "15px",
background: "rgba(0, 0, 0, 0.5)",
color: "#fff",
border: "none",
padding: "10px 13px",
borderRadius: "50%",
cursor: "pointer",
fontSize: "16px",
zIndex: 1
}
}, "\u2715"))), /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: "70vw",
margin: "20px auto",
maxWidth: "1400px",
position: "relative"
}
}, /*#__PURE__*/_react["default"].createElement("article", {
style: {
backgroundColor: cardStyle === "minimal" ? cardColor || "#fff" : "rgba(255, 255, 255, 0.1)",
backdropFilter: cardStyle === "glassmorphism" ? "blur(12px)" : "none",
border: cardStyle === "glassmorphism" ? "1px solid rgba(255, 255, 255, 0.2)" : "none",
borderRadius: "15px",
overflow: "hidden",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
display: "flex",
flexDirection: isMobile ? "column" : "row",
// Responsive layout
gap: "2rem",
padding: "2rem",
width: "100%",
position: "relative"
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
flex: isMobile ? "none" : "row",
minWidth: "300px",
// Adjusted for mobile
height: isMobile ? "300px" : "450px",
width: isMobile ? "" : "550px",
position: "relative"
}
}, !showQrScanner && /*#__PURE__*/_react["default"].createElement("model-viewer", {
src: gltfPath,
alt: "3D Product",
"auto-rotate": true,
"camera-controls": true,
"shadow-intensity": "1",
style: {
width: "100%",
height: "100%",
borderRadius: "10px",
backgroundColor: cardColor || "rgba(255, 255, 255, 0.05)"
}
}), showQrScanner && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: "100%",
height: "100%",
paddingTop: "140px",
borderRadius: "10px",
backgroundColor: "rgba(255, 255, 255, 0.05)"
}
}, /*#__PURE__*/_react["default"].createElement(QrScannerCard, {
onCancel: handleCancel,
url: showQrScanner
}))), /*#__PURE__*/_react["default"].createElement("div", {
style: {
flex: 1,
padding: "2rem",
color: textColor,
display: "flex",
flexDirection: "column",
justifyContent: "center"
}
}, /*#__PURE__*/_react["default"].createElement("h2", {
style: {
fontSize: isMobile ? "2rem" : "2.5rem",
fontWeight: 700,
marginBottom: "1.5rem",
color: textColor
}
}, productName), /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: "flex",
alignItems: "center",
gap: "1.5rem",
marginBottom: "2rem"
}
}, /*#__PURE__*/_react["default"].createElement("span", {
style: {
fontSize: isMobile ? "1.5rem" : "2.2rem",
fontWeight: 600,
color: textColor
}
}, "$", productPrice), /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: "flex",
gap: "0.5rem"
}
}, _toConsumableArray(Array(5)).map(function (_, i) {
return /*#__PURE__*/_react["default"].createElement("svg", {
key: i,
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: i < productRating ? "#ffd700" : "#ddd"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M12 2l2.4 7.4h7.6l-6 4.6 2.4 7.4-6-4.6-6 4.6 2.4-7.4-6-4.6h7.6z"
}));
}))), /*#__PURE__*/_react["default"].createElement("p", {
style: {
fontSize: "1.2rem",
lineHeight: 1.8,
marginBottom: "2.5rem",
opacity: 0.9,
color: textColor
}
}, productDescription), /*#__PURE__*/_react["default"].createElement("button", {
onClick: handleRightButtonClick,
style: {
position: "absolute",
top: "2rem",
right: "2rem",
width: "30px",
height: "30px",
background: "url('https://cdn.builder.io/api/v1/image/assets/TEMP/7344838b6c7244cc25bcab8cd8ceaf043201fa2fc9c5bde3a52bef437742f58c') no-repeat center center",
backgroundSize: "contain",
border: "none",
cursor: "pointer",
transition: "transform 0.3s"
}
}))))));
};
Arcard.propTypes = {
gltfPath: _propTypes["default"].string,
productName: _propTypes["default"].string,
productPrice: _propTypes["default"].string,
productRating: _propTypes["default"].string,
customWidth: _propTypes["default"].string,
customHeight: _propTypes["default"].string,
productDescription: _propTypes["default"].string,
type: _propTypes["default"].oneOf(["horizontal-slider", "3d-only", "3d-ar", "custom-size", "detailed"]),
cardStyle: _propTypes["default"].oneOf(["minimal", "glassmorphism"]),
cardColor: _propTypes["default"].string,
textColor: _propTypes["default"].string
};
var _default = exports["default"] = Arcard;