First

src/components/Vehicle.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { formatNums } from "../utilities/utilities";
+import Button from "../pageElements/button";
+
+const Vehicle = (props) => {
+  const { make, model, trim, color, year, category, mileage, price, id } =
+    props;
+
+  return (
+    <div className="veh-container">
+      <div className="vehBox">
+        <div className="veh-col">
+          <div className="veh-row">
+            <p className="veh-text">
+              <b>Make: </b>
+              {make}
+            </p>
+            <p className="veh-text">
+              <b>Model: </b>
+              {model}
+            </p>
+            <p className="veh-text">
+              <b>Trim: </b>
+              {trim}
+            </p>
+            <p className="veh-text">
+              <b>Color: </b>
+              {color}
+            </p>
+          </div>
+        </div>
+        <div className="veh-col">
+          <div className="veh-row">
+            <p className="veh-text">
+              <b>Year: </b>
+              {year}
+            </p>
+            <p className="veh-text">
+              <b>Category: </b>
+              {category}
+            </p>
+            <p className="veh-text">
+              <b>Mileage: </b>
+              {formatNums(mileage)}
+            </p>
+          </div>
+        </div>
+        <div className="veh-col">
+          <div className="veh-row-price">
+            <p className="veh-text">
+              <b>Price: </b>
+              {`$${formatNums(price / 100)}.00`}
+            </p>
+            <p className="veh-text">
+              <b>Id: </b>
+              {id}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="deleteButtonBox">
+        <Button
+          className="deleteButton"
+          labelText="Delete Vehicle"
+          variant="contained"
+          color="primary"
+          onClick={() => props.onClick(props.id)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Vehicle;