Skip to content

Commit

Permalink
fix: proper navigations from cart to checkout
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamtrazy
iamtrazy committed Jul 20, 2024
1 parent 18d8da1 commit 57b5da1
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 83 deletions.
131 changes: 65 additions & 66 deletions src/components/User/Cart/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react';
import Food from '@images/product/pizza.png';
import { Checkbox } from '@nextui-org/react';
import QtySelector from './QtySelector';
// import { Link } from '@nextui-org/react';
import { Link } from 'react-router-dom';
import { Button } from "@nextui-org/react";
import { Button } from '@nextui-org/react';
import { useNavigate } from 'react-router-dom';

function index() {
const navigate = useNavigate();
const item = [
{
id: '01',
Expand Down Expand Up @@ -88,10 +88,12 @@ function index() {
className="rounded-xl border dark:border-foodbg dark:bg-foodbg p-2 shadow-sm md:px-6 backdrop-blur-md"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
>


<div className="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0">
<Checkbox radius="full" color="warning" className='text-foodbg'></Checkbox>
<Checkbox
radius="full"
color="warning"
className="text-foodbg"
></Checkbox>
<a href="#" className="shrink-0 md:order-1">
<img
className="h-30 w-30"
Expand Down Expand Up @@ -138,62 +140,61 @@ function index() {
</h3>

<div className="mt-6 grid grid-cols-3 gap-4 sm:mt-8">

{alsoBoughtItems.map((_: any) => {
return (
<div
className="space-y-6 overflow-hidden rounded-xl border border-gray-200 dark:bg-foodbg dark:border-foodbg p-6 shadow-sm backdrop-blur-md"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
>
<a href="#" className="overflow-hidden rounded">
<img
className="mx-auto h-44 w-44"
src={Food}
alt="imac image"
/>
</a>
<div>
<a
href="#"
className="text-xl font-semibold leading-tight text-gray-900 hover:underline dark:text-white"
>
Cheese Pizza
{alsoBoughtItems.map((_: any) => {
return (
<div
className="space-y-6 overflow-hidden rounded-xl border border-gray-200 dark:bg-foodbg dark:border-foodbg p-6 shadow-sm backdrop-blur-md"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
>
<a href="#" className="overflow-hidden rounded">
<img
className="mx-auto h-44 w-44"
src={Food}
alt="imac image"
/>
</a>
<p className="mt-2 text-base font-normal text-gray-500 dark:text-gray-400">
Indulge in our classic Cheese Pizza, featuring..
</p>
</div>
<div>
<p className="text-lg font-bold text-gray-900 dark:text-white">
<span className="pr-2 text-orange-500">Rs.</span>
3500
</p>
</div>
<div className="mt-2 flex items-center gap-2.5">
<Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300">
<svg
className="-ms-2 me-2 h-5 w-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
<div>
<a
href="#"
className="text-xl font-semibold leading-tight text-gray-900 hover:underline dark:text-white"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7h-1M8 7h-.688M13 5v4m-2-2h4"
/>
</svg>
Add to cart
</Button>
Cheese Pizza
</a>
<p className="mt-2 text-base font-normal text-gray-500 dark:text-gray-400">
Indulge in our classic Cheese Pizza, featuring..
</p>
</div>
<div>
<p className="text-lg font-bold text-gray-900 dark:text-white">
<span className="pr-2 text-orange-500">Rs.</span>
3500
</p>
</div>
<div className="mt-2 flex items-center gap-2.5">
<Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300">
<svg
className="-ms-2 me-2 h-5 w-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7h-1M8 7h-.688M13 5v4m-2-2h4"
/>
</svg>
Add to cart
</Button>
</div>
</div>
</div>
);
})}
);
})}
</div>
</div>
</div>
Expand Down Expand Up @@ -256,14 +257,12 @@ function index() {
</dl>
</div>

<Link
to="/checkout"
className='hover:text-white transition duration-300 ease-in-out'
<Button
className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-8"
onClick={() => navigate('/checkout')}
>
<Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-8">
Proceed to Checkout
</Button>
</Link>
Proceed to Checkout
</Button>

<div className="flex items-center justify-center gap-2">
<span className="text-sm font-normal text-gray-500 dark:text-gray-400">
Expand Down
20 changes: 9 additions & 11 deletions src/components/User/Checkout/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@nextui-org/react';
import { useNavigate } from 'react-router-dom';

function index() {
const navigate = useNavigate();
return (
<section
className="bg-white py-8 antialiased dark:bg-foodbg border dark:border-foodbg backdrop-blur-md rounded-2xl md:py-16"
Expand Down Expand Up @@ -177,10 +177,10 @@ function index() {
height="30px"
viewBox="0 0 80 64"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlnsXlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--emojione"
className="iconify iconify--emojione"
preserveAspectRatio="xMidYMid meet"
>
<path
Expand Down Expand Up @@ -441,14 +441,12 @@ function index() {
</div>

<div className="space-y-3">
<Link
to="/checkout"
className="hover:text-white transition duration-300 ease-in-out"
<Button
className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 py-5 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-2"
onClick={() => navigate('/checkout')}
>
<Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 py-5 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300 mt-2">
Proceed to Payment
</Button>
</Link>
Proceed to Payment
</Button>
</div>
</div>
</div>
Expand Down
9 changes: 3 additions & 6 deletions src/pages/Checkout/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from 'react'
import Checkout from '@components/User/Checkout/index.tsx'
import Checkout from '@components/User/Checkout/index.tsx';

function index() {
return (
<Checkout />
)
return <Checkout />;
}

export default index
export default index;

0 comments on commit 57b5da1

Please sign in to comment.