darkmavis1980

Untitled

Feb 23rd, 2021
718
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // in config/data.js
  2. export const brands = [
  3.   {
  4.     id: 'accenti',
  5.     label: 'Accenti',
  6.   },
  7.   {
  8.     id: 'valentino',
  9.     label: 'valentino.com',
  10.     },
  11.   {
  12.     id: 'redvalentino',
  13.     label: 'redvalentino.com',
  14.   },
  15. ];
  16.  
  17. // in components/Portoflio.js
  18.  
  19. import React from 'react';
  20. import PropTypes from 'prop-types';
  21.  
  22. const Portfolio = ({brands}) => {
  23.   if (!brands) {
  24.     return null;
  25.   }
  26.  
  27.   return (
  28.     <div id="portfolio" className="py-16 bg-gray-800 text-white">
  29.       <div className="container mx-auto px-60">
  30.         <h2 className="h1 text-center uppercase">Questo è il Portfolio</h2>
  31.         <ul className="grid grid-cols-4 gap-0">
  32.           { brands.map(brand => (
  33.             <li key={brand.id} className="portfolio__element bg-no-repeat bg-cover bg-center"
  34.               style={{backgroundImage: `url(../assets/images/portfolio/${brand.id}.jpg)`}}
  35.             >
  36.               {brand.label}
  37.             </li>
  38.           ))}
  39.         </ul>
  40.       </div>
  41.     </div>
  42.   )
  43. }
  44.  
  45. Portfolio.propTypes = {
  46.   brands: PropTypes.shape({
  47.     id: PropTypes.string.isRequired,
  48.     label: PropTypes.string.isRequired,
  49.   })
  50. }
  51.  
  52. export default Portfolio;
  53.  
  54. // uso del componente in un altro file
  55.  
  56. import React from 'react';
  57. import { brands } from '../config/data';
  58. import Portfolio from './Portfolio.js';
  59.  
  60. const MainComponent = () => (
  61.   <div>
  62.     <Portfolio brands={brands} />
  63.   </div>
  64. )
  65.  
  66. export default MainComponent;
  67.  
RAW Paste Data