86 lines
2.8 KiB
JavaScript
86 lines
2.8 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
|
|
const TrackOrder = () => {
|
|
const [orderNumber, setOrderNumber] = useState("");
|
|
const [countryCode, setCountryCode] = useState("");
|
|
const [phoneNumber, setPhoneNumber] = useState("");
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
setCountryCode("");
|
|
setOrderNumber("");
|
|
setPhoneNumber("");
|
|
|
|
// Handle form submission here
|
|
console.log("Form submitted:", { orderNumber, countryCode, phoneNumber });
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl min-h-[60vh] mx-auto p-6">
|
|
<h2 className="text-3xl font-bold mb-4">Order Lookup</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label
|
|
htmlFor="order-number"
|
|
className="block text-lg my-5 font-medium text-gray-700"
|
|
>
|
|
Order Number *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="order-number"
|
|
name="order-number"
|
|
required
|
|
className="mt-1 block w-full p-3 border rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
value={orderNumber}
|
|
onChange={(e) => setOrderNumber(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="contact"
|
|
className="block text-lg font-medium my-5 text-gray-700"
|
|
>
|
|
Email ID or Phone Number *
|
|
</label>
|
|
<div className="mt-1 flex rounded-md shadow-sm">
|
|
<input
|
|
type="text"
|
|
id="country-code"
|
|
name="country-code"
|
|
placeholder="+1"
|
|
required
|
|
className="flex-shrink-0 p-3 border w-16 rounded-l-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 "
|
|
value={countryCode}
|
|
onChange={(e) => setCountryCode(e.target.value)}
|
|
/>
|
|
<input
|
|
type="tel"
|
|
id="phone-number"
|
|
name="phone-number"
|
|
placeholder="Phone number"
|
|
required
|
|
className="flex-1 rounded-r-md p-3 border border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
value={phoneNumber}
|
|
onChange={(e) => setPhoneNumber(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#AC8C6B] hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Track
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TrackOrder;
|