Share and Download buttons
The share-buttons
molecule is a React component designed for users actions to share and download chat.
![Share button molecule](/img/molecules/shareButtons.png)
Usage
import ShareButtons from './share-buttons';
const App = () => {
return <ShareButtons />;
};
export default App;
Description
The ShareButtons
molecule consists of the following elements:
- Share button for sharing selected chat.
- Download button for downloading selected chat.
State
shareLoader
: It is used to make share state active is share button is clickeddownloadLoader
: State active when download button is clicked
Functionality
- Upon clicking the download button, the component initiates the download process.
- If share button is clicked it check if system provides share functionality then, a success message is displayed, and if not, an error message is displayed.
Dependencies
- React: JavaScript library for building user interfaces.
- Material-UI (Mui): React components for faster and easier web development.
- React Hot Toast: Toast notification library for React applications.
Configuration
- The default theme colors can be configured in the config.json file.
- The components can be configured in the config.json file.
Styling
- CSS modules are used for styling the component.
Customization
This molecule provides flexibility for customization to suit your application's requirements. Here are some customization options:
Theme Customization
You can customize the theme colors by modifying the values in the config.json
file. The theme object contains primaryColor
and secondaryColor
properties, allowing you to specify the colors according to your brand or design preferences.
"theme": {
"primaryColor": {
"value": "#1e6231",
},
"secondaryColor": {
"value": "#34a755",
}
}
Adding Custom Actions
To add custom actions such as downloading or sharing steps:
- Download Chat Functionality: Implement the download logic within the
downloadChat
function. You can trigger a download process with your backend service.
const downloadChat = async (type: string) => {
// perform your download chat logic here
};
Accessing share and download button
You can select weather which functionality you want by simply modifying allowDownloadChat
and allowShareChat
value in the config.json
file.
"component": {
"allowDownloadChat": true,
"allowShareChat": true,
"shareButtonColor": "#1e6231",
"downloadButtonColor": "#1e6231"
}
Notes
- This molecule does not handle actual download chat feature. It simulates the process by displaying a downloading message upon clicking the download button and share successful message upon clicking share button.
- For further customization, you can modify the JSX structure, styles, and functionality according to your application's needs.