.profile/components/Skills/index.tsx

import useTranslation from 'next-translate/useTranslation'

import { SkillComponent } from './Skill'
import { SkillsSection } from './SkillsSection'

export const Skills: React.FC = () => {
  const { t } = useTranslation()

  return (
    <>
      <SkillsSection title={t('home:skills.languages')}>
        <SkillComponent skill='JavaScript' />
        <SkillComponent skill='TypeScript' />
        <SkillComponent skill='Python' />
        <SkillComponent skill='C/C++' />
        <SkillComponent skill='PHP' />
      </SkillsSection>

      <SkillsSection title='Front-end'>
        <SkillComponent skill='HTML' />
        <SkillComponent skill='CSS' />
        <SkillComponent skill='Tailwind CSS' />
        <SkillComponent skill='React.js (+ Next.js)' />
      </SkillsSection>

      <SkillsSection title='Back-end'>
        <SkillComponent skill='Laravel' />
        <SkillComponent skill='Node.js' />
        <SkillComponent skill='Fastify' />
        <SkillComponent skill='PostgreSQL' />
      </SkillsSection>

      <SkillsSection title={t('home:skills.software-tools')}>
        <SkillComponent skill='GNU/Linux' />
        <SkillComponent skill='Ubuntu' />
        <SkillComponent skill='Visual Studio Code' />
        <SkillComponent skill='Git' />
        <SkillComponent skill='Docker' />
      </SkillsSection>
    </>
  )
}