Copilot commented on code in PR #337:
URL: https://github.com/apache/cloudstack-www/pull/337#discussion_r2177505340
##########
src/pages/integrations.js:
##########
@@ -423,14 +786,69 @@ successful Proof of…
<p>CloudStack is a multi-hypervisor, multi-tenant,
high-availability cloud management…</p>
</div>
<div className="apache-card-footer">
- <a href="" className="btn btn-primary">Download</a>
+ <a
href="/blog/cloudstack-integrations-linbit-open-source/" className="btn
btn-primary">Download</a>
</div>
</div>
</div>
</div>
</div>
</section>
+ {/* Modal */}
+ {showModal && (
+ <div className="modal-overlay" onClick={closeModal} style={{
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ zIndex: 1000
+ }}>
+ <div className="modal-content" onClick={(e) =>
e.stopPropagation()} style={{
+ backgroundColor: 'white',
+ padding: '2rem',
+ borderRadius: '8px',
+ maxWidth: '600px',
+ width: '90%',
+ maxHeight: '80vh',
+ overflowY: 'auto',
+ boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+ }}>
+ <div className="modal-header" style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: '1rem',
+ borderBottom: '1px solid #eee',
+ paddingBottom: '1rem'
+ }}>
+ <h2 style={{ margin: 0, color: '#333'
}}>{modalContent.title}</h2>
Review Comment:
For improved accessibility, consider adding ARIA roles and attributes (for
example, role="dialog" and aria-labelledby) to the modal container to better
support assistive technologies.
```suggestion
<h2 id="modal-title" style={{ margin: 0, color: '#333'
}}>{modalContent.title}</h2>
```
##########
src/pages/integrations.js:
##########
@@ -123,6 +123,540 @@ support of Tungsten Fabric helps us to meet these
requirements.”
}
export default function CloudStackIntegrations() {
+ const [showModal, setShowModal] = React.useState(false);
+ const [modalContent, setModalContent] = React.useState({});
+
+ // Add hover styles and clickable indicators
+ React.useEffect(() => {
+ const style = document.createElement('style');
+ style.textContent = `
+ .integration-item:hover .learn-more-overlay {
+ opacity: 1 !important;
+ }
Review Comment:
Consider moving the hover and animation styles to a dedicated CSS file
rather than injecting them via JavaScript to enhance maintainability and
separation of concerns.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscr...@cloudstack.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
