made components that create and edit item can share, started item detail changes, listings provide more views

frontend/src/components/DeliveryOptions.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface DeliveryOptionsProps {
+  pickUpAvailable: boolean;
+  inPlaceUseAvailable: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const DeliveryOptions: React.FC<DeliveryOptionsProps> = ({
+  pickUpAvailable,
+  inPlaceUseAvailable,
+  onChange
+}) => {
+  return (
+    <div className="card mb-4">
+      <div className="card-body">
+        <label className="form-label">
+          How will renters receive this item?
+        </label>
+        <div className="form-check">
+          <input
+            type="checkbox"
+            className="form-check-input"
+            id="pickUpAvailable"
+            name="pickUpAvailable"
+            checked={pickUpAvailable}
+            onChange={onChange}
+          />
+          <label className="form-check-label" htmlFor="pickUpAvailable">
+            Pick-Up/Drop-off
+            <div className="small text-muted">
+              You and the renter coordinate pick-up and drop-off
+            </div>
+          </label>
+        </div>
+        <div className="form-check">
+          <input
+            type="checkbox"
+            className="form-check-input"
+            id="inPlaceUseAvailable"
+            name="inPlaceUseAvailable"
+            checked={inPlaceUseAvailable}
+            onChange={onChange}
+          />
+          <label
+            className="form-check-label"
+            htmlFor="inPlaceUseAvailable"
+          >
+            In-Place Use
+            <div className="small text-muted">
+              They use at your location
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeliveryOptions;