Hi @caiosheperd
Set up your development environment:
Install Node.js and npm.
Install the AEM Cloud SDK CLI.
Create a new project using the AEM Cloud SDK CLI:
aem-sdk init
shell
Create a new functional component for your custom container:
Create a new file called CustomContainer.js in the src/components directory.
Implement your custom container component using functional components and hooks. Here's an example:
import React from 'react';
const CustomContainer = ({ backgroundColor, children }) => {
const containerStyle = {
backgroundColor: backgroundColor || 'transparent',
padding: '20px',
};
return <div style={containerStyle}>{children}</div>;
};
export default CustomContainer;
jsx
Create a dialog for your custom container:
Create a new file called CustomContainerDialog.js in the src/dialogs directory.
Implement your dialog using the Coral UI components. Here's an example:
import React from 'react';
import { Dialog, TextField } from '@adobe/react-spectrum';
const CustomContainerDialog = ({ isOpen, onClose, onChangeBackgroundColor, backgroundColor }) => {
return (
<Dialog isOpen={isOpen} onClose={onClose}>
<TextField
label="Background Color"
value={backgroundColor}
onChange={onChangeBackgroundColor}
/>
</Dialog>
);
};
export default CustomContainerDialog;
jsx
Use your custom container component in a page:
In your page component, import and use your custom container component. Here's an example:
import React, { useState } from 'react';
import CustomContainer from '../components/CustomContainer';
const MyPage = () => {
const [backgroundColor, setBackgroundColor] = useState('`#ffffff`');
const handleBackgroundColorChange = (value) => {
setBackgroundColor(value);
};
return (
<div>
<CustomContainer backgroundColor={backgroundColor}>
{/* Add your custom components here */}
</CustomContainer>
</div>
);
};
export default MyPage;
jsx
Build and deploy your project:
Run npm run build to build your project.
Deploy the built project to AEM using the AEM Cloud SDK CLI.
Please refer
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/cont...
https://github.com/adobe/aem-project-archetype/issues/415