1592 lines
43 KiB
JavaScript
1592 lines
43 KiB
JavaScript
/* @ds-bundle: {"format":3,"namespace":"CubeCraftCreationsDesignSystem_0c419c","components":[{"name":"Badge","sourcePath":"components/core/Badge.jsx"},{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"Tag","sourcePath":"components/core/Tag.jsx"},{"name":"CategoryCard","sourcePath":"components/product/CategoryCard.jsx"},{"name":"ProductCard","sourcePath":"components/product/ProductCard.jsx"}],"sourceHashes":{"components/core/Badge.jsx":"eefcaedfbeea","components/core/Button.jsx":"0eb42e02c6a7","components/core/Tag.jsx":"782d692151ad","components/product/CategoryCard.jsx":"dfd98900f67f","components/product/ProductCard.jsx":"b08c05b76a55","ui_kits/storefront/CartDrawer.jsx":"c712060e601b","ui_kits/storefront/Header.jsx":"9ef823c5a991","ui_kits/storefront/HomePage.jsx":"bc8a40adc9f7","ui_kits/storefront/ProductDetailPage.jsx":"32e235afbc57","ui_kits/storefront/ShopPage.jsx":"6ec746ad6888"},"inlinedExternals":[],"unexposedExports":[]} */
|
||
|
||
(() => {
|
||
|
||
const __ds_ns = (window.CubeCraftCreationsDesignSystem_0c419c = window.CubeCraftCreationsDesignSystem_0c419c || {});
|
||
|
||
const __ds_scope = {};
|
||
|
||
(__ds_ns.__errors = __ds_ns.__errors || []);
|
||
|
||
// components/core/Badge.jsx
|
||
try { (() => {
|
||
/**
|
||
* CubeCraft Creations — Badge
|
||
* Compact status indicator. Use for "New", "Sale", category tags, order status.
|
||
*/
|
||
function Badge({
|
||
children,
|
||
variant = 'brand',
|
||
size = 'md',
|
||
dot = false
|
||
}) {
|
||
const base = {
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: '5px',
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 700,
|
||
borderRadius: '9999px',
|
||
lineHeight: 1,
|
||
whiteSpace: 'nowrap'
|
||
};
|
||
const sizes = {
|
||
sm: {
|
||
padding: '3px 8px',
|
||
fontSize: '10px',
|
||
letterSpacing: '0.06em'
|
||
},
|
||
md: {
|
||
padding: '4px 10px',
|
||
fontSize: '11px',
|
||
letterSpacing: '0.05em'
|
||
},
|
||
lg: {
|
||
padding: '5px 12px',
|
||
fontSize: '12px',
|
||
letterSpacing: '0.04em'
|
||
}
|
||
};
|
||
const variants = {
|
||
brand: {
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
color: '#fff'
|
||
},
|
||
blue: {
|
||
background: '#EBEBF8',
|
||
color: '#3B3AB8'
|
||
},
|
||
purple: {
|
||
background: '#F6EAFD',
|
||
color: '#A035CC'
|
||
},
|
||
neutral: {
|
||
background: '#F4F4F6',
|
||
color: '#52525E'
|
||
},
|
||
success: {
|
||
background: '#DCFCE7',
|
||
color: '#16A34A'
|
||
},
|
||
warning: {
|
||
background: '#FEF3C7',
|
||
color: '#D97706'
|
||
},
|
||
error: {
|
||
background: '#FEE2E2',
|
||
color: '#DC2626'
|
||
},
|
||
dark: {
|
||
background: '#18181D',
|
||
color: '#fff'
|
||
},
|
||
outline: {
|
||
background: 'transparent',
|
||
color: '#3B3AB8',
|
||
border: '1.5px solid #3B3AB8'
|
||
}
|
||
};
|
||
const style = {
|
||
...base,
|
||
...sizes[size],
|
||
...variants[variant],
|
||
textTransform: 'uppercase'
|
||
};
|
||
return /*#__PURE__*/React.createElement("span", {
|
||
style: style
|
||
}, dot && /*#__PURE__*/React.createElement("span", {
|
||
style: {
|
||
width: size === 'sm' ? 5 : 6,
|
||
height: size === 'sm' ? 5 : 6,
|
||
borderRadius: '50%',
|
||
background: 'currentColor',
|
||
flexShrink: 0,
|
||
opacity: 0.85
|
||
}
|
||
}), children);
|
||
}
|
||
Object.assign(__ds_scope, { Badge });
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Badge.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// components/core/Button.jsx
|
||
try { (() => {
|
||
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
||
/**
|
||
* CubeCraft Creations — Button
|
||
* Primary interactive element. Supports gradient, solid, outline, and ghost variants.
|
||
*/
|
||
function Button({
|
||
children,
|
||
variant = 'gradient',
|
||
size = 'md',
|
||
disabled = false,
|
||
fullWidth = false,
|
||
icon = null,
|
||
iconPosition = 'left',
|
||
onClick,
|
||
type = 'button',
|
||
href,
|
||
...rest
|
||
}) {
|
||
const base = {
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
gap: '6px',
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 700,
|
||
letterSpacing: '0.02em',
|
||
borderRadius: '9999px',
|
||
border: 'none',
|
||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||
opacity: disabled ? 0.5 : 1,
|
||
transition: 'all 200ms cubic-bezier(0,0,0.2,1)',
|
||
textDecoration: 'none',
|
||
whiteSpace: 'nowrap',
|
||
width: fullWidth ? '100%' : undefined,
|
||
lineHeight: 1
|
||
};
|
||
const sizes = {
|
||
sm: {
|
||
padding: '8px 16px',
|
||
fontSize: '13px'
|
||
},
|
||
md: {
|
||
padding: '11px 22px',
|
||
fontSize: '14px'
|
||
},
|
||
lg: {
|
||
padding: '14px 28px',
|
||
fontSize: '16px'
|
||
},
|
||
xl: {
|
||
padding: '17px 36px',
|
||
fontSize: '18px'
|
||
}
|
||
};
|
||
const variants = {
|
||
gradient: {
|
||
background: 'linear-gradient(135deg, #3B3AB8 0%, #A035CC 100%)',
|
||
color: '#ffffff',
|
||
boxShadow: '0 4px 20px rgba(59,58,184,0.25)'
|
||
},
|
||
primary: {
|
||
background: '#3B3AB8',
|
||
color: '#ffffff',
|
||
boxShadow: '0 2px 8px rgba(59,58,184,0.20)'
|
||
},
|
||
secondary: {
|
||
background: '#F4F4F6',
|
||
color: '#18181D',
|
||
boxShadow: 'none'
|
||
},
|
||
outline: {
|
||
background: 'transparent',
|
||
color: '#3B3AB8',
|
||
border: '2px solid #3B3AB8',
|
||
boxShadow: 'none'
|
||
},
|
||
ghost: {
|
||
background: 'transparent',
|
||
color: '#3B3AB8',
|
||
boxShadow: 'none'
|
||
},
|
||
danger: {
|
||
background: '#DC2626',
|
||
color: '#ffffff',
|
||
boxShadow: '0 2px 8px rgba(220,38,38,0.20)'
|
||
}
|
||
};
|
||
const style = {
|
||
...base,
|
||
...sizes[size],
|
||
...variants[variant]
|
||
};
|
||
const content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && icon, children, icon && iconPosition === 'right' && icon);
|
||
const handleMouseEnter = e => {
|
||
if (disabled) return;
|
||
e.currentTarget.style.transform = 'scale(1.03)';
|
||
e.currentTarget.style.filter = 'brightness(1.08)';
|
||
};
|
||
const handleMouseLeave = e => {
|
||
e.currentTarget.style.transform = 'scale(1)';
|
||
e.currentTarget.style.filter = 'brightness(1)';
|
||
};
|
||
const handleMouseDown = e => {
|
||
if (disabled) return;
|
||
e.currentTarget.style.transform = 'scale(0.97)';
|
||
};
|
||
const handleMouseUp = e => {
|
||
e.currentTarget.style.transform = 'scale(1.03)';
|
||
};
|
||
if (href && !disabled) {
|
||
return /*#__PURE__*/React.createElement("a", _extends({
|
||
href: href,
|
||
style: style,
|
||
onMouseEnter: handleMouseEnter,
|
||
onMouseLeave: handleMouseLeave,
|
||
onMouseDown: handleMouseDown,
|
||
onMouseUp: handleMouseUp
|
||
}, rest), content);
|
||
}
|
||
return /*#__PURE__*/React.createElement("button", _extends({
|
||
type: type,
|
||
disabled: disabled,
|
||
onClick: onClick,
|
||
style: style,
|
||
onMouseEnter: handleMouseEnter,
|
||
onMouseLeave: handleMouseLeave,
|
||
onMouseDown: handleMouseDown,
|
||
onMouseUp: handleMouseUp
|
||
}, rest), content);
|
||
}
|
||
Object.assign(__ds_scope, { Button });
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Button.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// components/core/Tag.jsx
|
||
try { (() => {
|
||
/**
|
||
* CubeCraft Creations — Tag
|
||
* Soft pill for content categorization (product categories, filter chips, skill tags).
|
||
*/
|
||
function Tag({
|
||
children,
|
||
active = false,
|
||
onClick,
|
||
onRemove,
|
||
color = 'default'
|
||
}) {
|
||
const isInteractive = !!onClick;
|
||
const colors = {
|
||
default: {
|
||
bg: active ? '#EBEBF8' : '#F4F4F6',
|
||
text: active ? '#3B3AB8' : '#52525E',
|
||
border: active ? '#CDCDF0' : '#E4E4EA'
|
||
},
|
||
blue: {
|
||
bg: '#EBEBF8',
|
||
text: '#3B3AB8',
|
||
border: '#CDCDF0'
|
||
},
|
||
purple: {
|
||
bg: '#F6EAFD',
|
||
text: '#A035CC',
|
||
border: '#E8CBFA'
|
||
},
|
||
green: {
|
||
bg: '#DCFCE7',
|
||
text: '#16A34A',
|
||
border: '#BBF7D0'
|
||
},
|
||
orange: {
|
||
bg: '#FEF3C7',
|
||
text: '#D97706',
|
||
border: '#FDE68A'
|
||
}
|
||
};
|
||
const c = colors[color] || colors.default;
|
||
const style = {
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: '5px',
|
||
padding: '5px 12px',
|
||
borderRadius: '9999px',
|
||
background: c.bg,
|
||
color: c.text,
|
||
border: `1px solid ${c.border}`,
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 600,
|
||
fontSize: '13px',
|
||
cursor: isInteractive ? 'pointer' : 'default',
|
||
transition: 'all 150ms ease-out',
|
||
userSelect: 'none',
|
||
lineHeight: 1.3
|
||
};
|
||
return /*#__PURE__*/React.createElement("span", {
|
||
style: style,
|
||
onClick: onClick,
|
||
onMouseEnter: isInteractive ? e => {
|
||
e.currentTarget.style.filter = 'brightness(0.95)';
|
||
} : undefined,
|
||
onMouseLeave: isInteractive ? e => {
|
||
e.currentTarget.style.filter = 'brightness(1)';
|
||
} : undefined
|
||
}, children, onRemove && /*#__PURE__*/React.createElement("span", {
|
||
onClick: e => {
|
||
e.stopPropagation();
|
||
onRemove();
|
||
},
|
||
style: {
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
marginLeft: 2,
|
||
opacity: 0.6,
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
lineHeight: 1
|
||
}
|
||
}, "\xD7"));
|
||
}
|
||
Object.assign(__ds_scope, { Tag });
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Tag.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// components/product/CategoryCard.jsx
|
||
try { (() => {
|
||
/**
|
||
* CubeCraft Creations — CategoryCard
|
||
* Full-width feature card for homepage category sections.
|
||
*/
|
||
function CategoryCard({
|
||
image,
|
||
title,
|
||
description,
|
||
ctaLabel = 'Shop now',
|
||
href = '#',
|
||
align = 'left',
|
||
badge
|
||
}) {
|
||
const [hovered, setHovered] = React.useState(false);
|
||
return /*#__PURE__*/React.createElement("a", {
|
||
href: href,
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: align === 'right' ? 'row-reverse' : 'row',
|
||
borderRadius: '20px',
|
||
overflow: 'hidden',
|
||
border: '1px solid #E4E4EA',
|
||
background: '#fff',
|
||
textDecoration: 'none',
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
transition: 'all 220ms cubic-bezier(0,0,0.2,1)',
|
||
boxShadow: hovered ? '0 8px 32px rgba(0,0,0,0.12)' : '0 2px 8px rgba(0,0,0,0.06)',
|
||
transform: hovered ? 'translateY(-2px)' : 'none',
|
||
minHeight: '240px'
|
||
},
|
||
onMouseEnter: () => setHovered(true),
|
||
onMouseLeave: () => setHovered(false)
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
flex: '0 0 45%',
|
||
overflow: 'hidden',
|
||
position: 'relative'
|
||
}
|
||
}, image && /*#__PURE__*/React.createElement("img", {
|
||
src: image,
|
||
alt: title,
|
||
style: {
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover',
|
||
transition: 'transform 400ms cubic-bezier(0.34,1.56,0.64,1)',
|
||
transform: hovered ? 'scale(1.05)' : 'scale(1)'
|
||
}
|
||
})), /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
flex: 1,
|
||
padding: '36px 40px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
gap: '12px'
|
||
}
|
||
}, badge && /*#__PURE__*/React.createElement("span", {
|
||
style: {
|
||
display: 'inline-flex',
|
||
alignSelf: 'flex-start',
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
color: '#fff',
|
||
padding: '3px 10px',
|
||
borderRadius: '9999px',
|
||
fontSize: '10px',
|
||
fontWeight: 800,
|
||
letterSpacing: '0.07em',
|
||
textTransform: 'uppercase'
|
||
}
|
||
}, badge), /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
fontSize: '30px',
|
||
fontWeight: 800,
|
||
color: '#18181D',
|
||
lineHeight: 1.2,
|
||
letterSpacing: '-0.01em'
|
||
}
|
||
}, title), description && /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
fontSize: '15px',
|
||
fontWeight: 400,
|
||
color: '#52525E',
|
||
lineHeight: 1.6
|
||
}
|
||
}, description), /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
marginTop: 8,
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: 6
|
||
}
|
||
}, /*#__PURE__*/React.createElement("span", {
|
||
style: {
|
||
padding: '10px 22px',
|
||
borderRadius: '9999px',
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
color: '#fff',
|
||
fontWeight: 700,
|
||
fontSize: '14px',
|
||
letterSpacing: '0.02em',
|
||
boxShadow: '0 4px 16px rgba(59,58,184,0.25)'
|
||
}
|
||
}, ctaLabel))));
|
||
}
|
||
Object.assign(__ds_scope, { CategoryCard });
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/product/CategoryCard.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// components/product/ProductCard.jsx
|
||
try { (() => {
|
||
/**
|
||
* CubeCraft Creations — ProductCard
|
||
* Standard product grid card for shop listings.
|
||
*/
|
||
function ProductCard({
|
||
image,
|
||
name,
|
||
price,
|
||
originalPrice,
|
||
badge,
|
||
category,
|
||
onAddToCart,
|
||
onWishlist,
|
||
wishlisted = false,
|
||
href = '#'
|
||
}) {
|
||
const [hovered, setHovered] = React.useState(false);
|
||
const [imgHovered, setImgHovered] = React.useState(false);
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
background: '#fff',
|
||
borderRadius: '16px',
|
||
border: '1px solid #E4E4EA',
|
||
overflow: 'hidden',
|
||
transition: 'all 220ms cubic-bezier(0,0,0.2,1)',
|
||
boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.12)' : '0 2px 6px rgba(0,0,0,0.06)',
|
||
transform: hovered ? 'translateY(-3px)' : 'translateY(0)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
cursor: 'pointer'
|
||
},
|
||
onMouseEnter: () => setHovered(true),
|
||
onMouseLeave: () => setHovered(false)
|
||
}, /*#__PURE__*/React.createElement("a", {
|
||
href: href,
|
||
style: {
|
||
display: 'block',
|
||
position: 'relative',
|
||
aspectRatio: '1',
|
||
overflow: 'hidden',
|
||
background: '#F4F4F6',
|
||
textDecoration: 'none'
|
||
},
|
||
onMouseEnter: () => setImgHovered(true),
|
||
onMouseLeave: () => setImgHovered(false)
|
||
}, image && /*#__PURE__*/React.createElement("img", {
|
||
src: image,
|
||
alt: name,
|
||
style: {
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover',
|
||
transition: 'transform 350ms cubic-bezier(0.34,1.56,0.64,1)',
|
||
transform: imgHovered ? 'scale(1.06)' : 'scale(1)'
|
||
}
|
||
}), /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
position: 'absolute',
|
||
top: 10,
|
||
left: 10,
|
||
display: 'flex',
|
||
gap: 6,
|
||
flexWrap: 'wrap'
|
||
}
|
||
}, badge && /*#__PURE__*/React.createElement("span", {
|
||
style: {
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
color: '#fff',
|
||
padding: '3px 9px',
|
||
borderRadius: '9999px',
|
||
fontSize: '10px',
|
||
fontWeight: 800,
|
||
letterSpacing: '0.06em',
|
||
textTransform: 'uppercase',
|
||
boxShadow: '0 2px 8px rgba(59,58,184,0.3)'
|
||
}
|
||
}, badge)), onWishlist && /*#__PURE__*/React.createElement("button", {
|
||
onClick: e => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onWishlist();
|
||
},
|
||
style: {
|
||
position: 'absolute',
|
||
top: 8,
|
||
right: 8,
|
||
width: 32,
|
||
height: 32,
|
||
borderRadius: '50%',
|
||
background: 'rgba(255,255,255,0.9)',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '15px',
|
||
transition: 'all 150ms ease-out',
|
||
backdropFilter: 'blur(4px)'
|
||
}
|
||
}, wishlisted ? '♥' : '♡')), /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
padding: '14px 16px 16px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 6,
|
||
flex: 1
|
||
}
|
||
}, category && /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
fontSize: '10px',
|
||
fontWeight: 700,
|
||
letterSpacing: '0.07em',
|
||
textTransform: 'uppercase',
|
||
color: '#A035CC'
|
||
}
|
||
}, category), /*#__PURE__*/React.createElement("a", {
|
||
href: href,
|
||
style: {
|
||
fontWeight: 700,
|
||
fontSize: '15px',
|
||
color: '#18181D',
|
||
textDecoration: 'none',
|
||
lineHeight: 1.3
|
||
}
|
||
}, name), /*#__PURE__*/React.createElement("div", {
|
||
style: {
|
||
display: 'flex',
|
||
alignItems: 'baseline',
|
||
gap: 8,
|
||
marginTop: 2
|
||
}
|
||
}, /*#__PURE__*/React.createElement("span", {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: '17px',
|
||
color: '#3B3AB8'
|
||
}
|
||
}, "$", price), originalPrice && /*#__PURE__*/React.createElement("span", {
|
||
style: {
|
||
fontWeight: 600,
|
||
fontSize: '13px',
|
||
color: '#9898A8',
|
||
textDecoration: 'line-through'
|
||
}
|
||
}, "$", originalPrice)), onAddToCart && /*#__PURE__*/React.createElement("button", {
|
||
onClick: e => {
|
||
e.stopPropagation();
|
||
onAddToCart();
|
||
},
|
||
style: {
|
||
marginTop: 8,
|
||
padding: '9px 16px',
|
||
borderRadius: '9999px',
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
color: '#fff',
|
||
border: 'none',
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 700,
|
||
fontSize: '13px',
|
||
letterSpacing: '0.02em',
|
||
cursor: 'pointer',
|
||
transition: 'all 200ms ease-out',
|
||
boxShadow: '0 4px 14px rgba(59,58,184,0.22)'
|
||
},
|
||
onMouseEnter: e => {
|
||
e.currentTarget.style.filter = 'brightness(1.08)';
|
||
e.currentTarget.style.transform = 'scale(1.02)';
|
||
},
|
||
onMouseLeave: e => {
|
||
e.currentTarget.style.filter = 'brightness(1)';
|
||
e.currentTarget.style.transform = 'scale(1)';
|
||
}
|
||
}, "Add to cart")));
|
||
}
|
||
Object.assign(__ds_scope, { ProductCard });
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/product/ProductCard.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// ui_kits/storefront/CartDrawer.jsx
|
||
try { (() => {
|
||
// CubeCraft Creations — Cart Drawer
|
||
|
||
Object.assign(window, {
|
||
CartDrawer: function CartDrawer({
|
||
open,
|
||
onClose,
|
||
cartItems,
|
||
onRemove
|
||
}) {
|
||
const {
|
||
Button
|
||
} = window.CubeCraft;
|
||
const total = cartItems.reduce((sum, item) => sum + parseFloat(item.price) * item.qty, 0);
|
||
return React.createElement(React.Fragment, null,
|
||
// Overlay
|
||
open && React.createElement('div', {
|
||
onClick: onClose,
|
||
style: {
|
||
position: 'fixed',
|
||
inset: 0,
|
||
background: 'rgba(9,9,11,0.5)',
|
||
zIndex: 300,
|
||
transition: 'opacity 200ms ease-out'
|
||
}
|
||
}),
|
||
// Drawer
|
||
React.createElement('div', {
|
||
style: {
|
||
position: 'fixed',
|
||
top: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
width: 400,
|
||
background: '#fff',
|
||
zIndex: 400,
|
||
boxShadow: '-8px 0 40px rgba(0,0,0,0.15)',
|
||
transform: open ? 'translateX(0)' : 'translateX(100%)',
|
||
transition: 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
fontFamily: "'Nunito', system-ui, sans-serif"
|
||
}
|
||
},
|
||
// Header
|
||
React.createElement('div', {
|
||
style: {
|
||
padding: '24px 24px 20px',
|
||
borderBottom: '1px solid #E4E4EA',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: 20,
|
||
color: '#18181D'
|
||
}
|
||
}, `Cart (${cartItems.reduce((s, i) => s + i.qty, 0)})`), React.createElement('button', {
|
||
onClick: onClose,
|
||
style: {
|
||
width: 32,
|
||
height: 32,
|
||
borderRadius: '50%',
|
||
background: '#F4F4F6',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontSize: 18,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#52525E'
|
||
}
|
||
}, '×')),
|
||
// Items
|
||
React.createElement('div', {
|
||
style: {
|
||
flex: 1,
|
||
overflowY: 'auto',
|
||
padding: '16px 24px'
|
||
}
|
||
}, cartItems.length === 0 ? React.createElement('div', {
|
||
style: {
|
||
textAlign: 'center',
|
||
padding: '60px 20px',
|
||
color: '#9898A8'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
fontSize: 40,
|
||
marginBottom: 12
|
||
}
|
||
}, '🛒'), React.createElement('div', {
|
||
style: {
|
||
fontWeight: 700,
|
||
fontSize: 16
|
||
}
|
||
}, 'Your cart is empty'), React.createElement('div', {
|
||
style: {
|
||
fontSize: 14,
|
||
marginTop: 4
|
||
}
|
||
}, 'Add something handcrafted and lovely!')) : cartItems.map((item, i) => React.createElement('div', {
|
||
key: i,
|
||
style: {
|
||
display: 'flex',
|
||
gap: 14,
|
||
padding: '16px 0',
|
||
borderBottom: '1px solid #F4F4F6',
|
||
alignItems: 'center'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
width: 64,
|
||
height: 64,
|
||
borderRadius: 12,
|
||
overflow: 'hidden',
|
||
background: '#F4F4F6',
|
||
flexShrink: 0
|
||
}
|
||
}, item.image && React.createElement('img', {
|
||
src: item.image,
|
||
style: {
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover'
|
||
}
|
||
})), React.createElement('div', {
|
||
style: {
|
||
flex: 1
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
fontWeight: 700,
|
||
fontSize: 14,
|
||
color: '#18181D',
|
||
marginBottom: 2
|
||
}
|
||
}, item.name), React.createElement('div', {
|
||
style: {
|
||
fontSize: 12,
|
||
color: '#A035CC',
|
||
fontWeight: 700
|
||
}
|
||
}, item.category), React.createElement('div', {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: 15,
|
||
color: '#3B3AB8',
|
||
marginTop: 4
|
||
}
|
||
}, `$${item.price} × ${item.qty}`)), React.createElement('button', {
|
||
onClick: () => onRemove(i),
|
||
style: {
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
color: '#9898A8',
|
||
fontSize: 18,
|
||
padding: 4
|
||
}
|
||
}, '×')))),
|
||
// Footer
|
||
cartItems.length > 0 && React.createElement('div', {
|
||
style: {
|
||
padding: '20px 24px',
|
||
borderTop: '1px solid #E4E4EA'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 16,
|
||
fontWeight: 800,
|
||
fontSize: 18
|
||
}
|
||
}, React.createElement('span', {
|
||
style: {
|
||
color: '#18181D'
|
||
}
|
||
}, 'Total'), React.createElement('span', {
|
||
style: {
|
||
color: '#3B3AB8'
|
||
}
|
||
}, `$${total.toFixed(2)}`)), React.createElement(Button, {
|
||
variant: 'gradient',
|
||
size: 'lg',
|
||
fullWidth: true
|
||
}, 'Checkout'), React.createElement('div', {
|
||
style: {
|
||
textAlign: 'center',
|
||
marginTop: 10,
|
||
fontSize: 12,
|
||
color: '#9898A8',
|
||
fontWeight: 600
|
||
}
|
||
}, 'Free shipping on orders over $50'))));
|
||
}
|
||
});
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/storefront/CartDrawer.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// ui_kits/storefront/Header.jsx
|
||
try { (() => {
|
||
// CubeCraft Creations — Storefront Header
|
||
// Nav bar with logo, links, cart, and search
|
||
|
||
Object.assign(window, {
|
||
StorefrontHeader: function StorefrontHeader({
|
||
page,
|
||
setPage,
|
||
cartCount,
|
||
onCartOpen
|
||
}) {
|
||
const [menuOpen, setMenuOpen] = React.useState(false);
|
||
const navLinks = [{
|
||
label: 'Shop All',
|
||
key: 'shop'
|
||
}, {
|
||
label: '3D Prints',
|
||
key: 'shop',
|
||
filter: '3D Prints'
|
||
}, {
|
||
label: 'Crochet',
|
||
key: 'shop',
|
||
filter: 'Crochet'
|
||
}, {
|
||
label: 'Apparel',
|
||
key: 'shop',
|
||
filter: 'Apparel'
|
||
}];
|
||
const headerStyle = {
|
||
position: 'sticky',
|
||
top: 0,
|
||
zIndex: 200,
|
||
background: 'rgba(255,255,255,0.95)',
|
||
backdropFilter: 'blur(12px)',
|
||
borderBottom: '1px solid #E4E4EA',
|
||
fontFamily: "'Nunito', system-ui, sans-serif"
|
||
};
|
||
return React.createElement('header', {
|
||
style: headerStyle
|
||
}, React.createElement('div', {
|
||
style: {
|
||
maxWidth: 1280,
|
||
margin: '0 auto',
|
||
padding: '0 32px',
|
||
height: 68,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 32
|
||
}
|
||
},
|
||
// Logo
|
||
React.createElement('img', {
|
||
src: '../../assets/logos/Header_Logo.png',
|
||
alt: 'CubeCraft Creations',
|
||
style: {
|
||
height: 40,
|
||
cursor: 'pointer',
|
||
flexShrink: 0
|
||
},
|
||
onClick: () => setPage({
|
||
key: 'home'
|
||
})
|
||
}),
|
||
// Nav links
|
||
React.createElement('nav', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 4,
|
||
flex: 1
|
||
}
|
||
}, navLinks.map((link, i) => React.createElement('button', {
|
||
key: i,
|
||
onClick: () => setPage({
|
||
key: link.key,
|
||
filter: link.filter
|
||
}),
|
||
style: {
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 600,
|
||
fontSize: 15,
|
||
color: page.key === link.key ? '#3B3AB8' : '#52525E',
|
||
padding: '6px 14px',
|
||
borderRadius: 9999,
|
||
transition: 'all 150ms ease-out'
|
||
},
|
||
onMouseEnter: e => {
|
||
e.currentTarget.style.background = '#F4F4F6';
|
||
e.currentTarget.style.color = '#3B3AB8';
|
||
},
|
||
onMouseLeave: e => {
|
||
e.currentTarget.style.background = 'none';
|
||
e.currentTarget.style.color = page.key === link.key ? '#3B3AB8' : '#52525E';
|
||
}
|
||
}, link.label))),
|
||
// Actions
|
||
React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 8,
|
||
alignItems: 'center'
|
||
}
|
||
},
|
||
// Search
|
||
React.createElement('button', {
|
||
style: {
|
||
width: 38,
|
||
height: 38,
|
||
borderRadius: '50%',
|
||
background: 'none',
|
||
border: '1px solid #E4E4EA',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 16
|
||
}
|
||
}, '🔍'),
|
||
// Cart
|
||
React.createElement('button', {
|
||
onClick: onCartOpen,
|
||
style: {
|
||
position: 'relative',
|
||
width: 38,
|
||
height: 38,
|
||
borderRadius: '50%',
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 16,
|
||
color: '#fff'
|
||
}
|
||
}, '🛒', cartCount > 0 && React.createElement('span', {
|
||
style: {
|
||
position: 'absolute',
|
||
top: -4,
|
||
right: -4,
|
||
width: 18,
|
||
height: 18,
|
||
borderRadius: '50%',
|
||
background: '#DC2626',
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
fontWeight: 800,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
border: '2px solid #fff'
|
||
}
|
||
}, cartCount)))));
|
||
}
|
||
});
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/storefront/Header.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// ui_kits/storefront/HomePage.jsx
|
||
try { (() => {
|
||
// CubeCraft Creations — Homepage View
|
||
|
||
Object.assign(window, {
|
||
HomePage: function HomePage({
|
||
setPage,
|
||
products,
|
||
onAddToCart
|
||
}) {
|
||
const {
|
||
ProductCard,
|
||
CategoryCard,
|
||
Button,
|
||
Badge
|
||
} = window.CubeCraft;
|
||
const featured = products.slice(0, 4);
|
||
return React.createElement('div', {
|
||
style: {
|
||
fontFamily: "'Nunito', system-ui, sans-serif"
|
||
}
|
||
},
|
||
// ── Hero ──────────────────────────────────────────────────
|
||
React.createElement('section', {
|
||
style: {
|
||
background: '#fff',
|
||
padding: '72px 0 48px'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
maxWidth: 1280,
|
||
margin: '0 auto',
|
||
padding: '0 32px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 64
|
||
}
|
||
},
|
||
// Hero copy
|
||
React.createElement('div', {
|
||
style: {
|
||
flex: '0 0 520px'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
display: 'inline-flex',
|
||
marginBottom: 20
|
||
}
|
||
}, React.createElement(Badge, {
|
||
variant: 'brand'
|
||
}, 'New Pet Rocks Drop')), React.createElement('h1', {
|
||
style: {
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 800,
|
||
fontSize: 56,
|
||
lineHeight: 1.1,
|
||
letterSpacing: '-0.03em',
|
||
margin: '0 0 20px',
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent',
|
||
backgroundClip: 'text'
|
||
}
|
||
}, 'Made with creativity. Crafted with heart.'), React.createElement('p', {
|
||
style: {
|
||
fontSize: 18,
|
||
color: '#52525E',
|
||
lineHeight: 1.65,
|
||
margin: '0 0 36px',
|
||
fontWeight: 400
|
||
}
|
||
}, 'Handcrafted crochet, custom 3D prints, and branded gear — every piece made by real hands with real care.'), React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 12,
|
||
alignItems: 'center'
|
||
}
|
||
}, React.createElement(Button, {
|
||
variant: 'gradient',
|
||
size: 'lg',
|
||
onClick: () => setPage({
|
||
key: 'shop'
|
||
})
|
||
}, 'Shop All Products'), React.createElement(Button, {
|
||
variant: 'ghost',
|
||
size: 'lg',
|
||
onClick: () => setPage({
|
||
key: 'shop',
|
||
filter: '3D Prints'
|
||
})
|
||
}, 'See Pet Rocks →'))),
|
||
// Hero image
|
||
React.createElement('div', {
|
||
style: {
|
||
flex: 1,
|
||
borderRadius: 24,
|
||
overflow: 'hidden',
|
||
aspectRatio: '4/3',
|
||
background: '#F4F4F6'
|
||
}
|
||
}, React.createElement('img', {
|
||
src: '../../assets/images/cubecraft_hero_mock_petrocks_v1.png',
|
||
alt: 'Pet Rocks hero',
|
||
style: {
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover'
|
||
}
|
||
})))),
|
||
// ── Categories ───────────────────────────────────────────
|
||
React.createElement('section', {
|
||
style: {
|
||
background: '#F4F4F6',
|
||
padding: '64px 0'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
maxWidth: 1280,
|
||
margin: '0 auto',
|
||
padding: '0 32px'
|
||
}
|
||
}, React.createElement('h2', {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: 32,
|
||
color: '#18181D',
|
||
margin: '0 0 32px',
|
||
letterSpacing: '-0.01em'
|
||
}
|
||
}, 'Shop by category'), React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 20
|
||
}
|
||
}, React.createElement(CategoryCard, {
|
||
image: '../../assets/images/cubecraft_3dprints_category_image.png',
|
||
title: '3D Prints',
|
||
description: 'Fresh off the Bambu Lab — expressive Pet Rocks and custom collectibles ready for your shelf.',
|
||
ctaLabel: 'Shop 3D Prints',
|
||
badge: 'Now shipping',
|
||
href: '#'
|
||
}), React.createElement(CategoryCard, {
|
||
image: '../../assets/images/Crocheted_Items.png',
|
||
title: 'Crocheted Items',
|
||
description: 'Handmade with yarn and love. Hats, plushes, and seasonal favorites.',
|
||
ctaLabel: 'Shop Crochet',
|
||
align: 'right',
|
||
href: '#'
|
||
}), React.createElement(CategoryCard, {
|
||
image: '../../assets/images/apparel_category_image.png',
|
||
title: 'Apparel',
|
||
description: 'Wear the brand. Logo tees and more, printed on quality blanks.',
|
||
ctaLabel: 'Shop Apparel',
|
||
href: '#'
|
||
})))),
|
||
// ── Featured Products ────────────────────────────────────
|
||
React.createElement('section', {
|
||
style: {
|
||
background: '#fff',
|
||
padding: '64px 0'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
maxWidth: 1280,
|
||
margin: '0 auto',
|
||
padding: '0 32px'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 32
|
||
}
|
||
}, React.createElement('h2', {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: 32,
|
||
color: '#18181D',
|
||
margin: 0,
|
||
letterSpacing: '-0.01em'
|
||
}
|
||
}, 'Featured picks'), React.createElement(Button, {
|
||
variant: 'ghost',
|
||
onClick: () => setPage({
|
||
key: 'shop'
|
||
})
|
||
}, 'View all →')), React.createElement('div', {
|
||
style: {
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||
gap: 20
|
||
}
|
||
}, featured.map(p => React.createElement(ProductCard, {
|
||
key: p.id,
|
||
image: p.image,
|
||
name: p.name,
|
||
price: p.price,
|
||
originalPrice: p.originalPrice,
|
||
badge: p.badge,
|
||
category: p.category,
|
||
onAddToCart: () => onAddToCart(p),
|
||
onWishlist: () => {}
|
||
}))))),
|
||
// ── Brand strip ──────────────────────────────────────────
|
||
React.createElement('section', {
|
||
style: {
|
||
background: 'linear-gradient(135deg,#3B3AB8,#A035CC)',
|
||
padding: '56px 32px',
|
||
textAlign: 'center'
|
||
}
|
||
}, React.createElement('img', {
|
||
src: '../../assets/logos/CubeCraftCreations_Logo_Official_No_BG.png',
|
||
alt: 'CubeCraft Creations',
|
||
style: {
|
||
height: 80,
|
||
filter: 'brightness(0) invert(1)',
|
||
marginBottom: 20
|
||
}
|
||
}), React.createElement('p', {
|
||
style: {
|
||
color: 'rgba(255,255,255,0.85)',
|
||
fontSize: 20,
|
||
fontWeight: 600,
|
||
margin: 0
|
||
}
|
||
}, 'Made with creativity. Crafted with heart.')));
|
||
}
|
||
});
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/storefront/HomePage.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// ui_kits/storefront/ProductDetailPage.jsx
|
||
try { (() => {
|
||
// CubeCraft Creations — Product Detail Page
|
||
|
||
Object.assign(window, {
|
||
ProductDetailPage: function ProductDetailPage({
|
||
product,
|
||
onAddToCart,
|
||
onBack
|
||
}) {
|
||
const {
|
||
Button,
|
||
Badge,
|
||
Tag
|
||
} = window.CubeCraft;
|
||
const [qty, setQty] = React.useState(1);
|
||
const [added, setAdded] = React.useState(false);
|
||
const handleAdd = () => {
|
||
for (let i = 0; i < qty; i++) onAddToCart(product);
|
||
setAdded(true);
|
||
setTimeout(() => setAdded(false), 2000);
|
||
};
|
||
return React.createElement('div', {
|
||
style: {
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
background: '#fff',
|
||
minHeight: '100vh'
|
||
}
|
||
},
|
||
// Breadcrumb
|
||
React.createElement('div', {
|
||
style: {
|
||
padding: '16px 32px',
|
||
maxWidth: 1280,
|
||
margin: '0 auto'
|
||
}
|
||
}, React.createElement('button', {
|
||
onClick: onBack,
|
||
style: {
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
color: '#3B3AB8',
|
||
fontFamily: "'Nunito',sans-serif",
|
||
fontWeight: 600,
|
||
fontSize: 14,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 6,
|
||
padding: 0
|
||
}
|
||
}, '← Back to shop')),
|
||
// Main content
|
||
React.createElement('div', {
|
||
style: {
|
||
maxWidth: 1280,
|
||
margin: '0 auto',
|
||
padding: '16px 32px 64px',
|
||
display: 'grid',
|
||
gridTemplateColumns: '1fr 1fr',
|
||
gap: 64
|
||
}
|
||
},
|
||
// Image
|
||
React.createElement('div', {
|
||
style: {
|
||
borderRadius: 24,
|
||
overflow: 'hidden',
|
||
aspectRatio: '1',
|
||
background: '#F4F4F6'
|
||
}
|
||
}, product.image && React.createElement('img', {
|
||
src: product.image,
|
||
alt: product.name,
|
||
style: {
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover'
|
||
}
|
||
})),
|
||
// Info
|
||
React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 20,
|
||
paddingTop: 8
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 8,
|
||
flexWrap: 'wrap'
|
||
}
|
||
}, product.badge && React.createElement(Badge, {
|
||
variant: 'brand'
|
||
}, product.badge), React.createElement(Badge, {
|
||
variant: 'blue'
|
||
}, product.category)), React.createElement('h1', {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: 40,
|
||
color: '#18181D',
|
||
lineHeight: 1.15,
|
||
letterSpacing: '-0.02em',
|
||
margin: 0
|
||
}
|
||
}, product.name), React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
alignItems: 'baseline',
|
||
gap: 12
|
||
}
|
||
}, React.createElement('span', {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: 32,
|
||
color: '#3B3AB8'
|
||
}
|
||
}, `$${product.price}`), product.originalPrice && React.createElement('span', {
|
||
style: {
|
||
fontWeight: 600,
|
||
fontSize: 18,
|
||
color: '#9898A8',
|
||
textDecoration: 'line-through'
|
||
}
|
||
}, `$${product.originalPrice}`), product.originalPrice && React.createElement(Badge, {
|
||
variant: 'error',
|
||
size: 'sm'
|
||
}, 'Sale')), React.createElement('p', {
|
||
style: {
|
||
fontSize: 16,
|
||
color: '#52525E',
|
||
lineHeight: 1.65,
|
||
margin: 0
|
||
}
|
||
}, product.description || 'Handcrafted with care by the CubeCraft Creations team. Every piece is made to order and finished by hand — no two are exactly alike.'),
|
||
// Tags
|
||
React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 8,
|
||
flexWrap: 'wrap'
|
||
}
|
||
}, React.createElement(Tag, {
|
||
color: 'blue'
|
||
}, 'Handmade'), React.createElement(Tag, {
|
||
color: 'purple'
|
||
}, 'Made to order'), React.createElement(Tag, {
|
||
color: 'green'
|
||
}, 'In stock')), React.createElement('div', {
|
||
style: {
|
||
width: '100%',
|
||
height: 1,
|
||
background: '#E4E4EA'
|
||
}
|
||
}),
|
||
// Quantity + Add to Cart
|
||
React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 12,
|
||
alignItems: 'center'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
border: '1px solid #E4E4EA',
|
||
borderRadius: 9999,
|
||
overflow: 'hidden'
|
||
}
|
||
}, React.createElement('button', {
|
||
onClick: () => setQty(q => Math.max(1, q - 1)),
|
||
style: {
|
||
width: 40,
|
||
height: 44,
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontSize: 18,
|
||
fontWeight: 600,
|
||
color: '#3B3AB8'
|
||
}
|
||
}, '−'), React.createElement('span', {
|
||
style: {
|
||
width: 36,
|
||
textAlign: 'center',
|
||
fontWeight: 700,
|
||
fontSize: 16
|
||
}
|
||
}, qty), React.createElement('button', {
|
||
onClick: () => setQty(q => q + 1),
|
||
style: {
|
||
width: 40,
|
||
height: 44,
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontSize: 18,
|
||
fontWeight: 600,
|
||
color: '#3B3AB8'
|
||
}
|
||
}, '+')), React.createElement(Button, {
|
||
variant: added ? 'primary' : 'gradient',
|
||
size: 'lg',
|
||
fullWidth: true,
|
||
onClick: handleAdd
|
||
}, added ? '✓ Added to cart!' : 'Add to cart')), React.createElement('div', {
|
||
style: {
|
||
fontSize: 13,
|
||
color: '#70707E',
|
||
fontWeight: 600,
|
||
display: 'flex',
|
||
gap: 16
|
||
}
|
||
}, React.createElement('span', null, '🚚 Free shipping on orders over $50'), React.createElement('span', null, '♻️ Made to order')))));
|
||
}
|
||
});
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/storefront/ProductDetailPage.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
// ui_kits/storefront/ShopPage.jsx
|
||
try { (() => {
|
||
// CubeCraft Creations — Shop / Product Listing View
|
||
|
||
Object.assign(window, {
|
||
ShopPage: function ShopPage({
|
||
initialFilter,
|
||
products,
|
||
onAddToCart,
|
||
onSelectProduct
|
||
}) {
|
||
const {
|
||
ProductCard,
|
||
Tag,
|
||
Badge
|
||
} = window.CubeCraft;
|
||
const [activeFilter, setActiveFilter] = React.useState(initialFilter || 'All');
|
||
const filters = ['All', '3D Prints', 'Crochet', 'Apparel'];
|
||
const filtered = activeFilter === 'All' ? products : products.filter(p => p.category === activeFilter);
|
||
return React.createElement('div', {
|
||
style: {
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
background: '#F4F4F6',
|
||
minHeight: '100vh'
|
||
}
|
||
},
|
||
// Page header
|
||
React.createElement('div', {
|
||
style: {
|
||
background: '#fff',
|
||
borderBottom: '1px solid #E4E4EA',
|
||
padding: '32px 32px 0'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
maxWidth: 1280,
|
||
margin: '0 auto'
|
||
}
|
||
}, React.createElement('h1', {
|
||
style: {
|
||
fontWeight: 800,
|
||
fontSize: 36,
|
||
color: '#18181D',
|
||
margin: '0 0 20px',
|
||
letterSpacing: '-0.02em'
|
||
}
|
||
}, activeFilter === 'All' ? 'Shop All' : activeFilter),
|
||
// Filter tabs
|
||
React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 8
|
||
}
|
||
}, filters.map(f => React.createElement('button', {
|
||
key: f,
|
||
onClick: () => setActiveFilter(f),
|
||
style: {
|
||
padding: '10px 20px',
|
||
borderRadius: '12px 12px 0 0',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 700,
|
||
fontSize: 14,
|
||
background: activeFilter === f ? '#F4F4F6' : 'transparent',
|
||
color: activeFilter === f ? '#3B3AB8' : '#52525E',
|
||
transition: 'all 150ms ease-out',
|
||
borderBottom: activeFilter === f ? '3px solid #3B3AB8' : '3px solid transparent'
|
||
}
|
||
}, f))))),
|
||
// Product grid
|
||
React.createElement('div', {
|
||
style: {
|
||
maxWidth: 1280,
|
||
margin: '0 auto',
|
||
padding: '32px 32px'
|
||
}
|
||
}, React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 24
|
||
}
|
||
}, React.createElement('span', {
|
||
style: {
|
||
fontSize: 14,
|
||
color: '#70707E',
|
||
fontWeight: 600
|
||
}
|
||
}, `${filtered.length} products`), React.createElement('div', {
|
||
style: {
|
||
display: 'flex',
|
||
gap: 8,
|
||
alignItems: 'center'
|
||
}
|
||
}, React.createElement('span', {
|
||
style: {
|
||
fontSize: 13,
|
||
color: '#70707E',
|
||
fontWeight: 600
|
||
}
|
||
}, 'Sort:'), React.createElement('select', {
|
||
style: {
|
||
fontFamily: "'Nunito', system-ui, sans-serif",
|
||
fontWeight: 600,
|
||
fontSize: 13,
|
||
border: '1px solid #E4E4EA',
|
||
borderRadius: 9999,
|
||
padding: '6px 14px',
|
||
background: '#fff',
|
||
color: '#18181D',
|
||
cursor: 'pointer'
|
||
}
|
||
}, React.createElement('option', null, 'Featured'), React.createElement('option', null, 'Price: Low to High'), React.createElement('option', null, 'Price: High to Low'), React.createElement('option', null, 'Newest')))), React.createElement('div', {
|
||
style: {
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||
gap: 20
|
||
}
|
||
}, filtered.map(p => React.createElement('div', {
|
||
key: p.id,
|
||
onClick: () => onSelectProduct(p),
|
||
style: {
|
||
cursor: 'pointer'
|
||
}
|
||
}, React.createElement(ProductCard, {
|
||
image: p.image,
|
||
name: p.name,
|
||
price: p.price,
|
||
originalPrice: p.originalPrice,
|
||
badge: p.badge,
|
||
category: p.category,
|
||
onAddToCart: e => {
|
||
onAddToCart(p);
|
||
},
|
||
onWishlist: () => {}
|
||
}))))));
|
||
}
|
||
});
|
||
})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/storefront/ShopPage.jsx", error: String((e && e.message) || e) }); }
|
||
|
||
__ds_ns.Badge = __ds_scope.Badge;
|
||
|
||
__ds_ns.Button = __ds_scope.Button;
|
||
|
||
__ds_ns.Tag = __ds_scope.Tag;
|
||
|
||
__ds_ns.CategoryCard = __ds_scope.CategoryCard;
|
||
|
||
__ds_ns.ProductCard = __ds_scope.ProductCard;
|
||
|
||
})();
|