crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-16 01:11:21 +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';
import { Dialog } from '@headlessui/react';
import { Dialog, Transition } from '@headlessui/react';
import Image from 'next/image';
import Link from 'next/link';
@ -11,7 +11,7 @@ import Price from 'components/price';
import { DEFAULT_OPTION } from 'lib/constants';
import type { Cart } from 'lib/shopify/types';
import { createUrl } from 'lib/utils';
import { useEffect, useRef, useState } from 'react';
import { Fragment, useEffect, useRef, useState } from 'react';
import { useCookies } from 'react-cookie';
import DeleteItemButton from './delete-item-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">
<CartIcon quantity={cart.totalQuantity} />
</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" />
</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">
<div className="flex items-center justify-between">
<p className="text-lg font-bold">My Cart</p>
@ -113,7 +133,9 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
/>
</div>
<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 ? (
<p className="text-sm" data-testid="cart-product-variant">
{item.merchandise.title}
@ -177,7 +199,9 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
</div>
)}
</Dialog.Panel>
</Transition.Child>
</Dialog>
</Transition>
</>
);
}