.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='max-w-full'>
        {paragraphs.map((paragraph, index) => {
          return <InterestParagraph key={index} {...paragraph} />
        })}
        <InterestsList />
      </div>

      <style jsx global>{`
        #__next {
          display: block;
        }
      `}</style>
    </>
  )
}