Merge pull request #84 from GSG-G10/51-property-card

property card

client/src/App.js

@@ -1,4 +1,5 @@
 import { BrowserRouter as Router } from 'react-router-dom';
+import PropertyCard from './components/PropertyCard';
 import NavBar from './components/Navbar';
 import { Footer } from './components';
 

client/src/components/PropertyCard/PropertyCard.css

@@ -0,0 +1,37 @@
+.row{
+    display: flex;
+    flex-wrap: wrap;
+}
+.rectangle{
+    width: 50%;
+    background-color:#26B919;
+    clip-path: polygon(0 -134%, 91% 75%, 91% 100%, 0% 100%);
+    border-radius: 6px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px;
+
+
+}
+.loveicon{
+    text-align: end; 
+}
+.price{
+    font-size: 1.9rem;
+    width: 100%;
+    text-align: center;
+    margin-top: 5px;
+}
+.bathroom,.rooms,.beds,.sqft{
+    width: 45%;
+    background-color:#3781CB;
+    padding: 10px;
+    margin:0 0 10px 10px;
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+}

client/src/components/PropertyCard/index.js

@@ -0,0 +1,103 @@
+import {
+  Card,
+  CardContent,
+} from '@mui/material';
+import PropTypes from 'prop-types';
+
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import { makeStyles } from '@mui/styles';
+import Space from '../../assets/space.png';
+import Bath from '../../assets/bath.png';
+import Rooms from '../../assets/rooms.png';
+import Bed from '../../assets/beds.png';
+import './PropertyCard.css';
+
+const useStyles = makeStyles({
+  card: {
+    backgroundColor: '#F1F1F1',
+    maxWidth: 345,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  icons: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+
+  },
+});
+function PropertyCard({
+  data: {
+    type, price, beds, baths, rooms, space,
+  },
+}) {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.card} style={{ backgroundColor: '#F1F1F1' }}>
+      <CardContent className="row">
+        <div className="rectangle">
+          {type}
+        </div>
+        <div className="loveicon" style={{ width: '50%' }}>
+          <FavoriteBorderIcon />
+        </div>
+        <div className="price">
+          {price}
+          {' '}
+          $
+        </div>
+      </CardContent>
+
+      <CardContent className={classes.icons}>
+        <div className="bathroom">
+          <img
+            src={Bath}
+            alt="space"
+          />
+          {baths}
+          {' '}
+          Bathrooms
+        </div>
+        <div className="rooms">
+          <img
+            src={Rooms}
+            alt="space"
+          />
+          {rooms}
+          {' '}
+          Rooms
+        </div>
+        <div className="beds">
+          <img
+            src={Bed}
+            alt="space"
+          />
+          {beds}
+          {' '}
+          Beds
+        </div>
+        <div className="sqft">
+          <img
+            src={Space}
+            alt="space"
+          />
+          {space}
+          Sqft
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+PropertyCard.propTypes = {
+  data: PropTypes.shape({
+    type: PropTypes.string,
+    price: PropTypes.string,
+    beds: PropTypes.string,
+    baths: PropTypes.string,
+    rooms: PropTypes.string,
+    space: PropTypes.string,
+  }).isRequired,
+};
+
+export default PropertyCard;

package.json

@@ -30,7 +30,7 @@
     "joi": "^17.4.2",
     "jsonwebtoken": "^8.5.1",
     "pg": "^8.7.1"
-    },
+  },
   "devDependencies": {
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",