Skip to content

Commit

Permalink
Merge pull request #187 from 202306-NEA-DZ-FEW/181-fix-styling
Browse files Browse the repository at this point in the history 
Fix styling
  • Loading branch information
@khaoulasara
khaoulasara authored Nov 28, 2023
2 parents ca5cb15 + dd68e38 commit 14cf4c5
Show file tree
Hide file tree
Showing 7 changed files with 265 additions and 227 deletions.
Binary file added public/images/katia.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
218 changes: 114 additions & 104 deletions src/components/Checkout/Checkout.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const Checkout = () => {
const [formData, setFormData] = useState({
Expand Down Expand Up @@ -30,153 +32,161 @@ const Checkout = () => {
expiryDate: "",
cvv: "",
});

// Show success notification
toast.success("Payment done. Thank you for trusting us!");
};

return (
<form className='max-w-md mx-auto p-4 bg-white shadow-md rounded-md'>
<h2 className='text-2xl font-semibold mb-4'>Checkout</h2>

{/* Delivery Information */}
<div className='mb-4'>
<label
htmlFor='fullName'
className='block text-gray-700 font-medium'
>
Full Name
</label>
<input
type='text'
id='fullName'
name='fullName'
value={formData.fullName}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
<div className='p-20 flex flex-col'>
<form className='max-w-md mx-auto p-4 bg-white shadow-md rounded-md'>
<h2 className='text-2xl font-semibold mb-4'>Checkout</h2>

<div className='mb-4'>
<label
htmlFor='address'
className='block text-gray-700 font-medium'
>
Address
</label>
<input
type='text'
id='address'
name='address'
value={formData.address}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
{/* Delivery Information */}
<div className='mb-4'>
<label
htmlFor='city'
htmlFor='fullName'
className='block text-gray-700 font-medium'
>
City
Full Name
</label>
<input
type='text'
id='city'
name='city'
value={formData.city}
id='fullName'
name='fullName'
value={formData.fullName}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div>
<div className='mb-4'>
<label
htmlFor='zipCode'
htmlFor='address'
className='block text-gray-700 font-medium'
>
ZIP Code
Address
</label>
<input
type='text'
id='zipCode'
name='zipCode'
value={formData.zipCode}
id='address'
name='address'
value={formData.address}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

{/* Payment Information */}
<div className='mb-4'>
<label
htmlFor='cardNumber'
className='block text-gray-700 font-medium'
>
Card Number
</label>
<input
type='text'
id='cardNumber'
name='cardNumber'
value={formData.cardNumber}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
<label
htmlFor='city'
className='block text-gray-700 font-medium'
>
City
</label>
<input
type='text'
id='city'
name='city'
value={formData.city}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
<label
htmlFor='expiryDate'
className='block text-gray-700 font-medium'
>
Expiry Date
</label>
<input
type='text'
id='expiryDate'
name='expiryDate'
value={formData.expiryDate}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
<div>
<label
htmlFor='zipCode'
className='block text-gray-700 font-medium'
>
ZIP Code
</label>
<input
type='text'
id='zipCode'
name='zipCode'
value={formData.zipCode}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

<div>
{/* Payment Information */}
<div className='mb-4'>
<label
htmlFor='cvv'
htmlFor='cardNumber'
className='block text-gray-700 font-medium'
>
CVV
Card Number
</label>
<input
type='text'
id='cvv'
name='cvv'
value={formData.cvv}
id='cardNumber'
name='cardNumber'
value={formData.cardNumber}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

{/* Submit Button */}
<button
type='submit'
className='bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300'
onClick={handleSubmit}
>
Place Order
</button>
</form>
<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
<label
htmlFor='expiryDate'
className='block text-gray-700 font-medium'
>
Expiry Date
</label>
<input
type='text'
id='expiryDate'
name='expiryDate'
value={formData.expiryDate}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div>
<label
htmlFor='cvv'
className='block text-gray-700 font-medium'
>
CVV
</label>
<input
type='text'
id='cvv'
name='cvv'
value={formData.cvv}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

{/* Submit Button */}
<button
type='submit'
className='bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300'
onClick={handleSubmit}
>
Place Order
</button>
</form>

{/* Toastify container */}
<ToastContainer />
</div>
);
};

Expand Down
Loading

0 comments on commit 14cf4c5

Please sign in to comment.