adicionando display grid para customers

idomelo · Feb 14, 2022 · 5d6ec52 · 5d6ec52
1 parent e6b323d
commit 5d6ec52
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/src/components/CustomersCard.js b/src/components/CustomersCard.js
@@ -1,15 +1,19 @@
 import * as React from 'react'
 
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import CardActions from '@mui/material/CardActions'
-import Avatar from '@mui/material/Avatar'
-import IconButton from '@mui/material/IconButton'
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Avatar,
+  IconButton,
+  Typography,
+} from '@mui/material'
 
-import Typography from '@mui/material/Typography'
-import FavoriteIcon from '@mui/icons-material/Favorite'
-import ShareIcon from '@mui/icons-material/Share'
+import {
+  Favorite as FavoriteIcon,
+  Share as ShareIcon,
+} from '@mui/icons-material/'
 
 const CustomersCard = ({
   name,

diff --git a/src/pages/Customers.js b/src/pages/Customers.js
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react'
-import CustomersCard from '../components/CustomersCard'
 import axios from 'axios'
+import Grid from '@mui/material/Grid'
+
+import CustomersCard from '../components/CustomersCard'
+
 
 const Customers = () => {
   const [customers, setCustomers] = useState([])
 
-
-
   useEffect( () => {
     axios.get('https://reqres.in/api/users')
     .then( response => {
@@ -18,15 +19,20 @@ const Customers = () => {
   return (
     <>
       <h1>Customers</h1>
-      {
-        customers.map(item => {
-          return (
-            <CustomersCard name={item.first_name} lastName={item.last_name} email={item.email} avatar={item.avatar}/>
-          )
-        })
-      }
+
+      <Grid container spacing={3}>
+        {
+          customers.map(item => {
+            return (
+              <Grid item xs={12} md={4}>
+                <CustomersCard name={item.first_name} lastName={item.last_name} email={item.email} avatar={item.avatar}/>
+              </Grid>
+            )
+          })
+        }
+      </Grid>
     </>
   )
 }
 
-export default Customers
+export default Customers