Untitled
import React from "react"; const SkillsSection = ({ title, skills }) => { return ( <div className="skills__content"> <h3 className="skills__title">{title}</h3> <div className="skills__box"> <div className="skills__group"> {skills.slice(0, Math.ceil(skills.length / 2)).map((skill, index) => ( <div className="skills__data" key={index}> <i className="bx bx-badge-check"></i> <div> <h3 className="skills__name">{skill.name}</h3> <span className="skills__level">{skill.level}</span> </div> </div> ))} </div> <div className="skills__group"> {skills.slice(Math.ceil(skills.length / 2)).map((skill, index) => ( <div className="skills__data" key={index}> <i className="bx bx-badge-check"></i> <div> <h3 className="skills__name">{skill.name}</h3> <span className="skills__level">{skill.level}</span> </div> </div> ))} </div> </div> </div> ); }; export default SkillsSection; import React from "react"; import SkillsSection from "./SkillsSection"; const ParentComponent = () => { const skillSets = [ { title: "Frontend Developer", skills: [ { name: "HTML", level: "Basic" }, { name: "CSS", level: "Advanced" }, { name: "JavaScript", level: "Intermediate" }, { name: "React", level: "Intermediate" }, { name: "Git", level: "Intermediate" }, ], }, { title: "Backend Developer", skills: [ { name: "Node.js", level: "Intermediate" }, { name: "Express", level: "Intermediate" }, { name: "MongoDB", level: "Intermediate" }, { name: "SQL", level: "Intermediate" }, { name: "Docker", level: "Basic" }, ], }, { title: "Mobile Developer", skills: [ { name: "Swift", level: "Advanced" }, { name: "Kotlin", level: "Intermediate" }, { name: "Flutter", level: "Intermediate" }, { name: "React Native", level: "Basic" }, ], }, ]; return ( <div> {skillSets.map((set, index) => ( <SkillsSection key={index} title={set.title} skills={set.skills} /> ))} </div> ); }; export default ParentComponent;
Leave a Comment