.profile/components/Skills/Skill.tsx

import Image from 'next/image'

import { skills } from './skills'

export interface SkillProps {
  skill: keyof typeof skills
}

export const Skill: React.FC<SkillProps> = props => {
  const { skill } = props
  const skillProperties = skills[skill]

  return (
    <>
      <a
        href={skillProperties.link}
        className='skills-link'
        target='_blank'
        rel='noopener noreferrer'
      >
        <div className='skills-content text-center'>
          <Image
            width={60}
            height={60}
            alt={skill}
            src={skillProperties.image}
          />
          <p className='skills-text'>{skill}</p>
        </div>
      </a>

      <style jsx>{`
        .skills-link {
          max-width: 120px;
          margin: 0px 10px 0 10px;
        }
        .skills-text {
          margin-top: 5px;
        }
      `}
      </style>
    </>
  )
}