seccodesmith/seccodesmith-frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance ProjectModal and Projects components by removing unused onClose prop and improving modal styling

Browse Source
This commit is contained in:
SecCodeSmith
2025-05-26 00:06:30 +02:00
parent c539be3c87
commit 8e2030b0ab
3 changed files with 92 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProjectCard.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ const ProjectLinks: React.FC<{ links: { github?: string; demo?: string }, id: st
<button
className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}
onClick={() => onOpenDetails(id)}
>
data-bs-toggle="modal" data-bs-target="#shadowguardianModal">
<i className={`fas fa-info-circle ${style.btnIcon}`} ></i>
Project Details
</button>
src/components/ProjectModal.tsx
+90 -12
View File
@@ -5,23 +5,24 @@ import style from '@styles/Project.module.scss'
interface ProjectModalProps {
project: ProjectProps | null;
onClose: () => void;
}
export const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose }) => {
export const ProjectModal: React.FC<ProjectModalProps> = ({ project }) => {
if (!project) return null;
return (
<div className="modal fade" id="shadowguardianModal" tabIndex={-1} aria-labelledby="shadowguardianModalLabel" aria-hidden="true">
<div className="modal-dialog modal-xl modal-dialog-scrollable">
<div className="modal-content">
<div className={`modal-content ${style.modalContent}`}>
<div className="modal-header">
<h5 className="modal-title" id="shadowguardianModalLabel">ShadowGuardian: Secure IoT Monitoring System</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 className={style.modalHeader} id="shadowguardianModalLabel">
{project.title}
</h5>
<button type="button" className={`btn-close ${style.btnClose}`} data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<div className={`modal-body ${style.modalBody}`}>
<div className="mb-4">
<img src="/api/placeholder/1000/400" className="img-fluid rounded mb-3" alt="ShadowGuardian Project"></img>
<img src="/api/placeholder/1000/400" className="img-fluid rounded mb-3" alt="ShadowGuardian Project" />
<div className="row">
<div className="col-md-8">
<p>ShadowGuardian is a comprehensive security monitoring system designed for both residential and commercial applications. Built on a foundation of STM32 microcontrollers, it provides reliable, secure monitoring with extremely low power consumption, allowing for battery operation of up to 2 years.</p>
@@ -56,18 +57,95 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose })
<li>Optional cellular backup connection for critical deployments</li>
</ul>
<h4 className="mt-4 mb-3">Technologies Used</h4>
<div className="mb-4">
<span className="tech-chip">
<i className="devicon-cplusplus-plain tech-chip-icon"></i>
<span className="tech-chip-name">C++</span>
</span>
<span className="tech-chip">
<i className="fas fa-microchip tech-chip-icon"></i>
<span className="tech-chip-name">STM32F4</span>
</span>
<span className="tech-chip">
<i className="fas fa-wifi tech-chip-icon"></i>
<span className="tech-chip-name">ESP32</span>
</span>
<span className="tech-chip">
<i className="fas fa-shield-alt tech-chip-icon"></i>
<span className="tech-chip-name">AES-256</span>
</span>
<span className="tech-chip">
<i className="devicon-react-original tech-chip-icon"></i>
<span className="tech-chip-name">React Native</span>
</span>
<span className="tech-chip">
<i className="fas fa-broadcast-tower tech-chip-icon"></i>
<span className="tech-chip-name">BLE 5.0</span>
</span>
<span className="tech-chip">
<i className="fas fa-network-wired tech-chip-icon"></i>
<span className="tech-chip-name">Zigbee</span>
</span>
<span className="tech-chip">
<i className="fas fa-server tech-chip-icon"></i>
<span className="tech-chip-name">Node.js</span>
</span>
<span className="tech-chip">
<i className="fas fa-database tech-chip-icon"></i>
<span className="tech-chip-name">PostgreSQL</span>
</span>
<span className="tech-chip">
<i className="devicon-docker-plain tech-chip-icon"></i>
<span className="tech-chip-name">Docker</span>
</span>
</div>
<div className="modal-footer">
<a href="#" className="btn btn-outline-secondary">
<h4 className="mt-4 mb-3">Gallery</h4>
<div className="row">
<div className="col-md-4 col-6">
<div className="gallery-item">
<img src="/api/placeholder/300/300" alt="ShadowGuardian Hub" className="gallery-image"></img>
</div>
</div>
<div className="col-md-4 col-6">
<div className="gallery-item">
<img src="/api/placeholder/300/300" alt="ShadowGuardian Sensor" className="gallery-image"></img>
</div>
</div>
<div className="col-md-4 col-6">
<div className="gallery-item">
<img src="/api/placeholder/300/300" alt="Mobile App Dashboard" className="gallery-image" />
</div>
</div>
<div className="col-md-4 col-6">
<div className="gallery-item">
<img src="/api/placeholder/300/300" alt="Door Sensor Installation" className="gallery-image" />
</div>
</div>
<div className="col-md-4 col-6">
<div className="gallery-item">
<img src="/api/placeholder/300/300" alt="System Architecture Diagram" className="gallery-image" />
</div>
</div>
<div className="col-md-4 col-6">
<div className="gallery-item">
<img src="/api/placeholder/300/300" alt="PCB Design" className="gallery-image" />
</div>
</div>
</div>
</div>
<div className={`modal-footer ${style.modalFooter}`}>
<a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
<i className="fab fa-github btn-icon"></i>Source Code
</a>
<a href="#" className="btn btn-outline-secondary">
<a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
<i className="fas fa-external-link-alt btn-icon"></i>Live Demo
</a>
<a href="#" className="btn btn-outline-secondary">
<a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
<i className="fas fa-book btn-icon"></i>Documentation
</a>
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" className={`btn btn-secondary`} data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
src/pages/Projects.tsx
+1 -5
View File
@@ -32,10 +32,6 @@ export const Projects = () => {
}
};
const handleCloseDetails = () => {
setSelectedProject(null);
};
return (
<>
<PageHeader
@@ -90,7 +86,7 @@ export const Projects = () => {
</div>
{selectedProject && (
<ProjectModal project={selectedProject} onClose={handleCloseDetails} />
<ProjectModal project={selectedProject} />
)}
</>
);