crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-12 12:47:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

updating cart to bag

Browse Source
This commit is contained in:
Samantha Kellow 2024-04-24 17:50:00 +01:00
parent 82c30cdda8
commit 18200b4e84
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/cart/modal.tsx
View File

@ -1,7 +1,7 @@
'use client';
import { Dialog, Transition } from '@headlessui/react';
import { ShoppingCartIcon } from '@heroicons/react/24/outline';
import { ShoppingBagIcon } from '@heroicons/react/24/outline';
import Price from 'components/ui/price';
import { DEFAULT_OPTION } from 'lib/constants';
import type { Cart } from 'lib/shopify/types';
@ -66,7 +66,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
>
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
<div className="flex items-center justify-between">
<p className="text-lg font-semibold">My Cart</p>
<p className="text-lg font-semibold">Your Bag</p>
<button aria-label="Close cart" onClick={closeCart}>
<CloseCart />
@ -75,8 +75,8 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
{!cart || cart.lines.length === 0 ? (
<div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
<ShoppingCartIcon className="h-16" />
<p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
<ShoppingBagIcon className="h-16" />
<p className="mt-6 text-center text-2xl font-bold">Your bag is empty. 😔</p>
</div>
) : (
<div className="flex h-full flex-col justify-between overflow-hidden p-1">

9
components/cart/open-cart.tsx
View File

@ -1,5 +1,5 @@
import { ShoppingCartIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { ShoppingBagIcon } from 'lucide-react';
export default function OpenCart({
className,
@ -9,9 +9,10 @@ export default function OpenCart({
quantity?: number;
}) {
return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-700 text-white transition-colors dark:border-neutral-700 dark:text-white">
<ShoppingCartIcon
className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
// <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-700 text-white transition-colors dark:border-neutral-700 dark:text-white">
<div className="relative flex h-11 w-11 items-center justify-center rounded-md text-white transition-colors dark:text-white">
<ShoppingBagIcon
className={clsx('h-6 transition-all ease-in-out hover:scale-110', className)}
/>
{quantity ? (