// in config/data.js
export const brands = [
  {
    id: 'accenti',
    label: 'Accenti',
  },
  {
    id: 'valentino',
    label: 'valentino.com',
    },
  {
    id: 'redvalentino',
    label: 'redvalentino.com',
  },
];

// in components/Portoflio.js

import React from 'react';
import PropTypes from 'prop-types';

const Portfolio = ({brands}) => {
  if (!brands) {
    return null;
  }

  return (
    <div id="portfolio" className="py-16 bg-gray-800 text-white">
      <div className="container mx-auto px-60">
        <h2 className="h1 text-center uppercase">Questo è il Portfolio</h2>
        <ul className="grid grid-cols-4 gap-0">
          { brands.map(brand => (
            <li key={brand.id} className="portfolio__element bg-no-repeat bg-cover bg-center"
              style={{backgroundImage: `url(../assets/images/portfolio/${brand.id}.jpg)`}}
            >
              {brand.label}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

Portfolio.propTypes = {
  brands: PropTypes.shape({
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
  })
}

export default Portfolio;

// uso del componente in un altro file

import React from 'react';
import { brands } from '../config/data';
import Portfolio from './Portfolio.js';

const MainComponent = () => (
  <div>
    <Portfolio brands={brands} />
  </div>
)

export default MainComponent;