crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-15 17:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds animation back

Browse Source
This commit is contained in:
Michael Novotny 2023-06-20 21:58:12 -05:00
parent e24e57ad47
commit 5c75a483a7
No known key found for this signature in database
1 changed files with 147 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/cart/modal.tsx
View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import { Dialog } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
@ -11,7 +11,7 @@ import Price from 'components/price';
import { DEFAULT_OPTION } from 'lib/constants'; import { DEFAULT_OPTION } from 'lib/constants';
import type { Cart } from 'lib/shopify/types'; import type { Cart } from 'lib/shopify/types';
import { createUrl } from 'lib/utils'; import { createUrl } from 'lib/utils';
import { useEffect, useRef, useState } from 'react'; import { Fragment, useEffect, useRef, useState } from 'react';
import { useCookies } from 'react-cookie'; import { useCookies } from 'react-cookie';
import DeleteItemButton from './delete-item-button'; import DeleteItemButton from './delete-item-button';
import EditItemQuantityButton from './edit-item-quantity-button'; import EditItemQuantityButton from './edit-item-quantity-button';
@ -56,8 +56,28 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
<button aria-label="Open cart" onClick={openCart} data-testid="open-cart"> <button aria-label="Open cart" onClick={openCart} data-testid="open-cart">
<CartIcon quantity={cart.totalQuantity} /> <CartIcon quantity={cart.totalQuantity} />
</button> </button>
<Dialog open={cartIsOpen} onClose={closeCart} className="relative z-50" data-testid="cart"> <Transition show={cartIsOpen}>
<Dialog onClose={closeCart} className="relative z-50" data-testid="cart">
<Transition.Child
as={Fragment}
enter="transition-all ease-in-out duration-300"
enterFrom="opacity-0 backdrop-blur-none"
enterTo="opacity-100 backdrop-blur-[.5px]"
leave="transition-all ease-in-out duration-200"
leaveFrom="opacity-100 backdrop-blur-[.5px]"
leaveTo="opacity-0 backdrop-blur-none"
>
<div className="fixed inset-0 bg-black/30" aria-hidden="true" /> <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
</Transition.Child>
<Transition.Child
as={Fragment}
enter="transition-all ease-in-out duration-300"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition-all ease-in-out duration-200"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white p-6 text-black dark:bg-black dark:text-white md:w-3/5 lg:w-2/5"> <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white p-6 text-black dark:bg-black dark:text-white md:w-3/5 lg:w-2/5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-lg font-bold">My Cart</p> <p className="text-lg font-bold">My Cart</p>
@ -113,7 +133,9 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
/> />
</div> </div>
<div className="flex flex-1 flex-col text-base"> <div className="flex flex-1 flex-col text-base">
<span className="font-semibold">{item.merchandise.product.title}</span> <span className="font-semibold">
{item.merchandise.product.title}
</span>
{item.merchandise.title !== DEFAULT_OPTION ? ( {item.merchandise.title !== DEFAULT_OPTION ? (
<p className="text-sm" data-testid="cart-product-variant"> <p className="text-sm" data-testid="cart-product-variant">
{item.merchandise.title} {item.merchandise.title}
@ -177,7 +199,9 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
</div> </div>
)} )}
</Dialog.Panel> </Dialog.Panel>
</Transition.Child>
</Dialog> </Dialog>
</Transition>
</> </>
); );
} }