completed the search by source command

src/components/NewsCard/Card.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Card, Typography, CardActionArea, CardActions, CardContent, CardMedia, Button } from "@mui/material"
+import useStyles from "./styles"
+
+const NewsCard = ({ article: { description, publishedAt, source, title, url, urlToImage }, i }) => {
+
+    const classes = useStyles();
+
+    return (
+        <Card className={classes.card}>
+            <CardActionArea href={url} target="_blank">
+                <CardMedia className={classes.media} image={urlToImage || 'https://w7.pngwing.com/pngs/150/410/png-transparent-newspaper-computer-icons-journalist-news-corporation-business-text-people-logo.png'} />
+                <div className={classes.details}>
+                    <Typography variant='body2' color="textSecondary" component="h2">{(new Date(publishedAt)).toDateString()}</Typography>
+                    <Typography variant='body2' color="textSecondary" component="h2">{source.name}</Typography>
+                </div>
+                <Typography className={classes.title} gutterBottom variant='h5'>{title}</Typography>
+                <CardContent>
+                    <Typography variant='body2' color="textSecondary" component="p">{description}</Typography>
+                </CardContent>
+            </CardActionArea>
+            <CardActions className={classes.cardActions}>
+                <Button size='small' color='primary'>Learn More</Button>
+                <Typography variant='h5' color="textSecondary">{i + 1}</Typography>
+            </CardActions>
+        </Card>
+    )
+}
+
+export default NewsCard;

src/components/NewsCard/styles.js

@@ -0,0 +1,39 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles({
+
+    media: {
+        height: 250,
+    },
+    border: {
+        border: 'solid',
+    },
+    fullHeightCard: {
+        height: '100%',
+    },
+    card: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        borderBottom: '10px solid white',
+    },
+    activeCard: {
+        borderBottom: '10px solid #22289a',
+    },
+    grid: {
+        display: 'flex',
+    },
+    details: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: '20px',
+    },
+    title: {
+        padding: '0 16px',
+    },
+    cardActions: {
+        padding: '0 16px 8px 16px',
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+});

src/components/NewsCards/Cards.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Grid, Grow, Typography } from "@mui/material";
+import NewsCard from "../NewsCard/Card";
+import useStyles from "./styles";
+
+const Cards = ({ articles }) => {
+
+    const classes = useStyles();
+    return (
+
+        <Grow in>
+            <Grid className={classes.container} container alignItems="stretch" spacing={3}>
+                {articles.map((article, i) => (
+
+                    <Grid item xs={12} sm={6} md={4} lg={3} display="flex">
+                        <NewsCard article={article} i={i} />
+                    </Grid>
+                ))}
+            </Grid>
+        </Grow>
+    )
+}
+
+export default Cards;

src/components/NewsCards/styles.js

@@ -0,0 +1,10 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles({
+
+    container: {
+        padding: '0 5%',
+        width: '100%',
+        margin: '0'
+    }
+});