{"componentChunkName":"component---src-templates-post-js","path":"/create-listing-card-react","result":{"data":{"markdownRemark":{"html":"

In this post we will make a tour card that will allow us to display all our listings.

\n

Create a cards directory and create ListingCard.js file:

\n
import React from \"react\"\nimport { Rate } from \"antd\"\nimport BodyOne from \"../typography/BodyOne\"\nimport PropTypes from \"prop-types\"\nimport \"antd/dist/antd.css\"\n\nconst ListingCard = ({\n  listingTitle,\n  listingLocation,\n  price,\n  rating,\n  coverPhoto,\n}) => (\n  <>\n    <div className=\"rounded-px w-card h-auto shadow-lg-card cursor-pointer\">\n      <img src={coverPhoto} className=\"w-full h-48 rounded-t-px\" alt=\"cover\" />\n      <div className=\"flex flex-col p-2\">\n        <div className=\"flex flex-col mt-2 \">\n          <BodyOne className=\"text-lg\">{listingTitle}</BodyOne>\n          <BodyOne className=\"text-sm text-grey\">{listingLocation}</BodyOne>\n        </div>\n\n        <BodyOne className=\" text-lg mt-8 text-green-dark\">${price}</BodyOne>\n        <Rate disabled defaultValue={rating} />\n      </div>\n    </div>\n  </>\n)\n\nListingCard.propTypes = {\n  listingTitle: PropTypes.string,\n  listingLocation: PropTypes.string,\n  price: PropTypes.string,\n  rating: PropTypes.number,\n  coverPhoto: PropTypes.string,\n}\nexport default ListingCard
\n

🎡 We have a div that we have given a border-radius and box-shadow that has width and height set to auto.

\n

🎡 It takes props called listingTitle, listingLocation, price, rating and coverPhoto.

\n

Next off we need to add Ant Design because we will use it's tabs and rating components.

\n
$ yarn add antd
\n

Once you're done, it will look like this:

\n

\"tour-card\"

","frontmatter":{"date":"July 16, 2020","path":"/create-listing-card-react","title":"Create Listing Card","postnumber":42}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-all-listings-page","postnumber":43}}},"next":{"node":{"frontmatter":{"path":"/create-remove-button-react","postnumber":41}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}