Table

src/components/ShippingDetails.js

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './ShippingDetails.css';
+
+function ShippingDetails() {
+  const [address, setAddress] = useState('');
+  const [deliveryDate, setDeliveryDate] = useState('');
+  const [deliveryTime, setDeliveryTime] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = () => {
+    navigate(`/delivery-form?address=${address}&deliveryDate=${deliveryDate}&deliveryTime=${deliveryTime}`);
+  };
+
+  return (
+    <section className="shipping-details">
+      <div className="container">
+        <h2>Shipping Details</h2>
+        <div className="shipping-forms">
+          <ShippingForm
+            title="Delivery Address"
+            inputPlaceholder="Enter your delivery address"
+            type="text"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+          />
+          <ShippingForm
+            title="Delivery Date"
+            type="date"
+            value={deliveryDate}
+            onChange={(e) => setDeliveryDate(e.target.value)}
+          />
+          <ShippingTimeForm
+            title="Delivery Time"
+            value={deliveryTime}
+            onChange={(e) => setDeliveryTime(e.target.value)}
+          />
+          <FAQ
+            title="FAQ"
+            description="Answers to your delivery-related questions."
+          />
+        </div>
+        <button className='button-form' onClick={handleSubmit}>Continue to Delivery Form</button>
+      </div>
+    </section>
+  );
+}
+
+function ShippingForm({ title, inputPlaceholder, type, value, onChange }) {
+  return (
+    <div className="shipping-form">
+      <h3>{title}</h3>
+      <input type={type} placeholder={inputPlaceholder} value={value} onChange={onChange} />
+    </div>
+  );
+}
+
+function ShippingTimeForm({ title, value, onChange }) {
+  return (
+    <div className="shipping-form">
+      <h3>{title}</h3>
+      <select value={value} onChange={(e) => onChange(e.target.value)}>
+        <option>Choose your desired delivery time slot</option>
+        <option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option>
+        <option value="12:00 PM - 4:00 PM">12:00 PM - 4:00 PM</option>
+        <option value="4:00 PM - 8:00 PM">4:00 PM - 8:00 PM</option>
+      </select>
+    </div>
+  );
+}
+
+function FAQ({ title, description }) {
+  return (
+    <div className="shipping-form">
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  );
+}
+
+export default ShippingDetails;