In this section, we will build all the components that will be used on the frontend application.
We start with a basic Button component in
/src/components/componentButton.tsx with a bunch of options for modifying it based on the usage.
We then create a Header component in
/src/components/componentHeader.tsx to be used on all pages.
We create a Modal component at
/src/components/componentModal.tsx. Most transitions take place via a modal. This component takes care of the basic Modal functionality and styling.
title; main button set to
buttonText; dismiss button; and overlay are part of this component.
children passed to this component are the content in the modal.
onClick function will be called when the main button is clicked.
We create a ListingCard component at
/src/components/componentListingCard.tsx. This component creates the listing card used on the listings page.
We create an Input component at
/src/components/componentInput.tsx. This works with state variables which will be created with the
useState hook in its Parent Component. We accept the
name for the input field. The input
unit are also accepted as optional props.
We create a CheckBox component at
/src/components/componentCheckBox.tsx. This component is used within the modals. The CreateAccount modal uses it for user role selection. It is also used for selecting amenities in the CreateListing and ManageListing Modals.
We create an AmenitiesInput component at
/src/components/componentAmenitiesInput.tsx. It groups multiple checkboxes for collecting the amenities' availability in the CreateListing and ManageListing modals. We create this component to clean up the code.
/src/components/componentListingIcons.tsx file contains several SVG components for use on the listing page as well as the listing management modals.
It includes icons for: