Feature rocket card

src/components/Footer/Footer.css

@@ -1,12 +1,42 @@
-.footer{
+.footer {
   width: 100%;
   height: 55px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  background-color: #0677a9;
+  font-family: monospace;
+  font-size: 16px;
+  background-color: #272727;
   color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0px -7px 20px rgb(2 9 39 / 34%);
   margin-top: 20px;
-}
+}
+
+.heart {
+  color: red;
+  margin: 0 5px;
+  animation: heart-beat 0.35s infinite alternate;
+  -webkit-animation: heart-beat 0.35s infinite alternate;
+}
+
+@keyframes heart-beat {
+  0%,
+  50%,
+  100% {
+    transform: scale(1);
+  }
+  60% {
+    transform: scale(1.1);
+  }
+}
+
+@-webkit-keyframes heart-beat {
+  0%,
+  50%,
+  100% {
+    transform: scale(1);
+  }
+  60% {
+    transform: scale(1.1);
+  }
+}

src/components/Footer/Footer.js

@@ -4,7 +4,7 @@ import './Footer.css'
 function Footer() {
   return (
     <div className="footer">
-      Designed & Made by Adarsh❤️
+      Crafted with <span className="heart">❤</span> by Adarsh
     </div>
   )
 }

src/components/RocketCard/RocketCard.css

@@ -0,0 +1,17 @@
+.rocket-list {
+  max-width: 600px;
+  margin: auto;
+  padding: 0 10px;
+}
+
+.rocket-list li {
+  list-style: none;
+}
+
+.rocket-list li div {
+  margin: 40px 0 10px;
+}
+
+.rocket-list li:first-child div {
+  margin-top: 20px;
+}

src/components/RocketCard/RocketCard.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Typography, Divider } from '@material-ui/core';
+import './RocketCard.css'
+
+function RocketCard(props) {
+  return (
+    <ul className="rocket-list">
+      {
+        props.rockets.data.map((rocket) => (
+          <li key={`${rocket.id + '-' + Math.random()}`}>
+            <div>
+            <Typography variant="h5" className="text-ellipsis" component="h2" title={rocket.name}>
+              {rocket.name}
+            </Typography>
+            <Typography variant="body2" align="justify">
+              {rocket.description}
+            </Typography>
+            </div>
+            <Divider  key={rocket.id} variant="fullWidth" />
+          </li>
+        ))
+      }
+    </ul>
+  )
+}
+
+RocketCard.propTypes = {
+  rockets: PropTypes.object.isRequired
+}
+
+export default RocketCard
+

src/queries/RocketsResult.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useQuery, gql } from "@apollo/client";
 import RocketLoader from "../loaders/RocketLoader";
+import RocketCard from '../components/RocketCard/RocketCard'
 
 const RocketsResultQuery = gql`
 {
@@ -45,17 +46,15 @@ const RocketsResultQuery = gql`
 `
 
 export default function RocketsResult(props) {
-  const { loading, error } = useQuery(RocketsResultQuery);
+  const { loading, error, data } = useQuery(RocketsResultQuery);
   const { value, index } = props;
 
   if (loading) return <RocketLoader />;
   if (error) return <p>Error :(</p>;
 
   return (
     <>
-      {value === index && (<div className="rockets-container">
-        Coming soon...
-      </div>)}
+      {value === index && (<RocketCard rockets={data.rocketsResult} />)}
     </>
   );
 }