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

frontend/src/components/PricingForm.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+
+interface PricingFormProps {
+  priceType: "hour" | "day";
+  pricePerHour: number | string;
+  pricePerDay: number | string;
+  replacementCost: number | string;
+  minimumRentalDays: number;
+  onPriceTypeChange: (type: "hour" | "day") => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+}
+
+const PricingForm: React.FC<PricingFormProps> = ({
+  priceType,
+  pricePerHour,
+  pricePerDay,
+  replacementCost,
+  minimumRentalDays,
+  onPriceTypeChange,
+  onChange
+}) => {
+  return (
+    <div className="card mb-4">
+      <div className="card-body">
+        <div className="mb-3">
+          <div className="row align-items-center">
+            <div className="col-auto">
+              <label className="col-form-label">Price per</label>
+            </div>
+            <div className="col-auto">
+              <select
+                className="form-select"
+                value={priceType}
+                onChange={(e) => onPriceTypeChange(e.target.value as "hour" | "day")}
+              >
+                <option value="hour">Hour</option>
+                <option value="day">Day</option>
+              </select>
+            </div>
+            <div className="col">
+              <div className="input-group">
+                <span className="input-group-text">$</span>
+                <input
+                  type="number"
+                  className="form-control"
+                  id={priceType === "hour" ? "pricePerHour" : "pricePerDay"}
+                  name={priceType === "hour" ? "pricePerHour" : "pricePerDay"}
+                  value={priceType === "hour" ? pricePerHour : pricePerDay}
+                  onChange={onChange}
+                  step="0.01"
+                  min="0"
+                  placeholder="0.00"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="minimumRentalDays" className="form-label">
+            Minimum Rental {priceType === "hour" ? "Hours" : "Days"}
+          </label>
+          <input
+            type="number"
+            className="form-control"
+            id="minimumRentalDays"
+            name="minimumRentalDays"
+            value={minimumRentalDays}
+            onChange={onChange}
+            min="1"
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="replacementCost" className="form-label mb-0">
+            Replacement Cost *
+          </label>
+          <div className="form-text mb-2">
+            The cost to replace the item if lost
+          </div>
+          <div className="input-group">
+            <span className="input-group-text">$</span>
+            <input
+              type="number"
+              className="form-control"
+              id="replacementCost"
+              name="replacementCost"
+              value={replacementCost}
+              onChange={onChange}
+              step="0.01"
+              min="0"
+              placeholder="0"
+              required
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PricingForm;