function AvatarCustomizer({ categories }) { const renderCategory = (category)=>/*#__PURE__*/ React.createElement("div", { className: "my-4", key: category.name, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-crimson-text mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, category.name), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, category.items.map((item, index)=>/*#__PURE__*/ React.createElement("img", { src: item.src, alt: item.alt, className: "w-full h-auto rounded-lg", key: `${category.name}-${index}`, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this })))); return /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[calc(100vh-200px)]", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, categories.map(renderCategory)); } function AvatarCustomizerStory() { const categories = [ { name: "Hair", items: [ { src: "path/to/avatars/hair1.png", alt: "Avatar hair style 1" }, { src: "path/to/avatars/hair2.png", alt: "Avatar hair style 2" } ] }, { name: "Eyes", items: [ { src: "path/to/avatars/eyes1.png", alt: "Avatar eye style 1" }, { src: "path/to/avatars/eyes2.png", alt: "Avatar eye style 2" } ] }, { name: "Clothes", items: [ { src: "path/to/avatars/clothes1.png", alt: "Avatar clothing style 1" }, { src: "path/to/avatars/clothes2.png", alt: "Avatar clothing style 2" } ] } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AvatarCustomizer, { categories: categories, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function MainComponent() { const categories = [ { name: "Hair", items: [ { src: "path/to/avatars/emoji_1.png", alt: "Avatar hair style 1" }, { src: "path/to/avatars/emoji_2.png", alt: "Avatar hair style 2" }, { src: "path/to/avatars/emoji_3.png", alt: "Avatar hair style 3" } ] }, { name: "Eyes", items: [ { src: "path/to/avatars/emoji_4.png", alt: "Avatar eye style 1" }, { src: "path/to/avatars/emoji_5.png", alt: "Avatar eye style 2" } ] }, { name: "Clothes", items: [ { src: "path/to/avatars/emoji_6.png", alt: "Avatar clothing style 1" }, { src: "path/to/avatars/emoji_7.png", alt: "Avatar clothing style 2" } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex text-[#ffffff]", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-[#0d0d0d] p-4 border-r-2 border-[#00ff7f]", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-xl mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "AFROVERSE"), /*#__PURE__*/ React.createElement(AvatarCustomizer, { categories: categories, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[url('/path/to/pattern.png')] bg-cover flex items-center justify-center", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[80vh] border-2 border-[#00ff7f] p-2 flex items-center justify-center bg-[#0d0d0d]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/avatars/preview.png", alt: "3D Avatar preview", className: "w-[500px] h-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, ` .rotate { animation: rotate 10s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); }