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;