Hi Team
I have a working card component and define it as a function, but some how my navbar and card are not displaying well according to the spec below. Let me share my working code below.
// app.css
/**
* All the stylesheet for the application
*@author:Gcobani Mkontwana
@date:14/06/2022
*/
/* Style the body */
body {
font-family: Arial, Roboto, sans-serif;
margin: 0;
}
/* Style the top navigation bar */
.navbar {
color: orangered;
background-color: #FF6600;
text-align: center;
}
/* Style the form - display items horizontally */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
font-family: Arial, Roboto, sans-serif;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.card {
display:flex;
font-family: Arial, Roboto, sans-serif;
}
/* Main column */
.main {
display: flex;
font-family: Arial, Roboto, sans-serif;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: white;
font-family: Arial, Roboto, sans-serif;
}
/**
Content
*/
.on-time-delivery-guaranteed {
color: #FF6600;
font-family: Arial, Roboto, sans-serif;
font-size: 14px;
line-height: 16px;
display: flex;
}
/*
Free shipping
*/
.free-shipping-up {
color: #FF6600;
font-family: Arial, Roboto, sans-serif;
font-size: 14px;
line-height: 16px;
display: flex;
}
/**logo*/
.logo {
width: 46px;
height: 40px;
}
/**
Button stylesheet here.
*/
//Card.js
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn } from 'mdb-react-ui-kit';
import React,{ useEffect, useState} from 'react';
function Card (){
/**
* fetch and accessing rest api data for shipping information
* synchronus to allow data be exposed without delay.
*/
const[list, setList] = useState([]);
const[error, setError] = useState([]);
const[load, setLoaded] = useState([]);
useEffect(() => {
const loadAsyncStuff = async () => {
try {
const response = await fetch('https://fe-assignment.vaimo.net/');
const json = await response.json();
setList(json);
} catch (error) {
setError(error);
} finally {
setLoaded(true);
}
};
loadAsyncStuff();
},[]);
// returning our values as jsx
return (
<div className='card'>
<MDBCard style={{ maxWidth: '95rem'}}>
<MDBCardBody>
<MDBCardTitle>Card title</MDBCardTitle>
<MDBCardText>
</MDBCardText>
<MDBBtn>Button</MDBBtn>
</MDBCardBody>
</MDBCard>
</div>
)
}
export default Card;