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

frontend/src/components/RulesForm.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+interface RulesFormProps {
+  needsTraining: boolean;
+  rules: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+
+const RulesForm: React.FC<RulesFormProps> = ({
+  needsTraining,
+  rules,
+  onChange
+}) => {
+  return (
+    <div className="card mb-4">
+      <div className="card-body">
+        <div className="form-check mb-3">
+          <input
+            type="checkbox"
+            className="form-check-input"
+            id="needsTraining"
+            name="needsTraining"
+            checked={needsTraining}
+            onChange={onChange}
+          />
+          <label className="form-check-label" htmlFor="needsTraining">
+            Requires in-person training before rental
+          </label>
+        </div>
+        <label htmlFor="rules" className="form-label">
+          Additional Rules
+        </label>
+        <textarea
+          className="form-control"
+          id="rules"
+          name="rules"
+          rows={3}
+          value={rules || ""}
+          onChange={onChange}
+          placeholder="Any specific rules for renting this item"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default RulesForm;