Skip to content

Fixed: Issues #1 to #8 #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Fixed: Issues #1 to #8 #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6290d51
fixed: issue #1
antono91 Aug 8, 2023
3cc10e9
fixed: issue #2
antono91 Aug 8, 2023
3f2f1bb
fixed: issue #3
antono91 Aug 9, 2023
20460d4
fixed: issue #5
antono91 Aug 10, 2023
3d5abdf
fixed: issue #6
antono91 Aug 10, 2023
e1ff41a
fixed: issue #7 & #8
antono91 Aug 10, 2023
8863427
fixed: spelling issue #5
antono91 Aug 10, 2023
23cc18f
fixed: ony one option issue #1
antono91 Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

146 changes: 95 additions & 51 deletions src/Components/Cart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import { Dialog, Transition } from "@headlessui/react";
import { XIcon } from "@heroicons/react/outline";
import React, { Fragment } from "react";
import { Dialog, Transition } from '@headlessui/react'
import { XIcon, ShoppingCartIcon } from '@heroicons/react/outline'
import React, { Fragment } from 'react'

export default function Cart({ open, setOpen, cart, updateCart }) {
const subTotal = cart.reduce((s, p) => p.price * p.quantity + s, 0)

return (
<Transition.Root show={open} as={Fragment}>
<Transition.Root
show={open}
as={Fragment}
>
<Dialog
as="div"
className="fixed inset-0 overflow-hidden z-10"
onClose={() => {
setOpen;
setOpen
}}
>
<div className="absolute inset-0 overflow-hidden">
Expand All @@ -21,6 +26,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
onClick={() => setOpen(false)}
>
<Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
Expand All @@ -39,75 +45,112 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
<div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
<div className="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
<div className="flex items-start justify-between">
<Dialog.Title className="text-lg font-medium text-gray-900"> Shopping cart </Dialog.Title>
<Dialog.Title className="text-lg font-medium text-gray-900">
{' '}
Shopping cart{' '}
</Dialog.Title>
<div className="ml-3 flex h-7 items-center">
<button
type="button"
className="-m-2 p-2 text-gray-400 hover:text-gray-500"
onClick={() => setOpen(false)}
>
<span className="sr-only">Close panel</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
<XIcon
className="h-6 w-6"
aria-hidden="true"
/>
</button>
</div>
</div>

<div className="mt-8">
<div
className={
cart.length === 0
? 'mt-8 flex h-full items-center justify-center'
: 'mt-8'
}
>
<div className="flow-root">
<ul role="list" className="-my-6 divide-y divide-gray-200">
{cart.map((product) => (
<li key={product.id} className="flex py-6">
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
<img
src={product.imageSrc}
alt={product.imageAlt}
className="h-full w-full object-cover object-center"
/>
</div>
{cart.length === 0 ? (
<div className="flex flex-col items-center">
<ShoppingCartIcon
className="w-12"
aria-hidden="true"
/>
<span className="pt-2">Your Cart is Empty.</span>
</div>
) : (
<ul
role="list"
className="-my-6 divide-y divide-gray-200"
>
{cart.map((product) => (
<li
key={product.id}
className="flex py-6"
>
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
<img
src={product.imageSrc}
alt={product.imageAlt}
className="h-full w-full object-cover object-center"
/>
</div>

<div className="ml-4 flex flex-1 flex-col">
<div>
<div className="flex justify-between text-base font-medium text-gray-900">
<h3>{product.name}</h3>
<p className="ml-4">${product.price}</p>
<div className="ml-4 flex flex-1 flex-col">
<div>
<div className="flex justify-between text-base font-medium text-gray-900">
<h3>{product.name}</h3>
<p className="ml-4">${product.price}</p>
</div>
</div>
</div>
<div className="flex flex-1 items-end justify-between text-sm">
<p className="text-gray-500">Qty {product.quantity}</p>
<div className="flex flex-1 items-end justify-between text-sm">
<p className="text-gray-500">
Qty {product.quantity}
</p>

<div className="flex">
<button
onClick={() => {
let newCart = cart.filter((p) => {
if (p.id === product.id) {
p.quantity -= 1;
}
<div className="flex">
<button
onClick={() => {
let newCart = cart.filter((p) => {
if (p.id === product.id) {
p.quantity -= 1
}

return p.quantity > 0;
});
updateCart(newCart);
}}
type="button"
className="font-medium text-gray-500 hover:text-black"
>
Remove
</button>
return p.quantity > 0
})
updateCart(newCart)
// Issue #2
localStorage.setItem(
'cart',
JSON.stringify(newCart)
)
}}
type="button"
className="font-medium text-gray-500 hover:text-black"
>
Remove
</button>
</div>
</div>
</div>
</div>
</li>
))}
</ul>
</li>
))}
</ul>
)}
</div>
</div>
</div>

<div className="border-t border-gray-200 py-6 px-4 sm:px-6">
<div className="flex justify-between text-base font-medium text-gray-900">
<p>Subtotal</p>
<p>$262.00</p>
<p>${subTotal.toFixed(2)}</p>
</div>
<p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
<p className="mt-0.5 text-sm text-gray-500">
Shipping and taxes calculated at checkout.
</p>
<div className="mt-6">
<a
href="#"
Expand All @@ -118,13 +161,14 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
</div>
<div className="mt-6 flex justify-center text-center text-sm text-gray-500">
<p>
or{" "}
or{' '}
<button
type="button"
className="font-medium text-gray-700 hover:text-black"
onClick={() => setOpen(false)}
>
Continue Shopping<span aria-hidden="true"> &rarr;</span>
Continue Shopping
<span aria-hidden="true"> &rarr;</span>
</button>
</p>
</div>
Expand All @@ -136,5 +180,5 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
</div>
</Dialog>
</Transition.Root>
);
)
}
26 changes: 18 additions & 8 deletions src/Components/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ShoppingBagIcon } from "@heroicons/react/outline";
import React from "react";
import { ShoppingBagIcon } from '@heroicons/react/outline'
import React from 'react'

export default function NavBar({ setOpen }) {
export default function NavBar({ setOpen, productsInCart }) {
return (
<div className="bg-white">
<header className="relative">
Expand All @@ -23,7 +23,10 @@ export default function NavBar({ setOpen }) {
</div>

{/* Logo (lg-) */}
<a href="#" className="lg:hidden">
<a
href="#"
className="lg:hidden"
>
<span className="sr-only">Workflow</span>
<img
src="https://tailwindui.com/img/logos/workflow-mark.svg?color=black&shade=600"
Expand All @@ -36,13 +39,20 @@ export default function NavBar({ setOpen }) {
<div className="flex items-center lg:ml-8">
{/* Cart Icon */}
<div className="ml-4 flow-root lg:ml-8">
<button onClick={() => setOpen(true)} className="group -m-2 p-2 flex items-center">
<button
onClick={() => setOpen(true)}
className="group -m-2 p-2 flex items-center"
>
<ShoppingBagIcon
className="flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="sr-only">items in cart, view bag</span>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
{productsInCart}
</span>
<span className="sr-only">
items in cart, view bag
</span>
</button>
</div>
</div>
Expand All @@ -54,5 +64,5 @@ export default function NavBar({ setOpen }) {
</nav>
</header>
</div>
);
)
}
Loading