.profile/components/Interests/index.tsx

import useTranslation from 'next-translate/useTranslation'

import { InterestParagraph, InterestParagraphProps } from './InterestParagraph'
import { InterestsList } from './InterestsList'

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

  const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
    returnObjects: true
  })

  return (
    <>
      <div className='col-24'>
        {paragraphs.map((paragraph, index) => {
          return <InterestParagraph key={index} {...paragraph} />
        })}
        <InterestsList />
      </div>
    </>
  )
}