4
0
forked from crowetic/commerce
This commit is contained in:
Belen Curcio 2020-10-24 19:00:57 -03:00
parent 3398d2811a
commit 1ba0967500
5 changed files with 23 additions and 16 deletions

View File

@ -10,8 +10,9 @@
.productImage { .productImage {
position: absolute; position: absolute;
top: 0;
left: -10px;
top: 15px;
transform: scale(1.9); transform: scale(1.9);
width: 100%;
height: 100%;
left: 30% !important;
top: 30% !important;
} }

View File

@ -55,18 +55,19 @@ const CartItem = ({
}, [item.quantity]) }, [item.quantity])
return ( return (
<li className="flex flex-row space-x-8 py-6"> <li className="flex flex-row space-x-8 py-8">
<div className="w-12 h-12 bg-violet relative overflow-hidden"> <div className="w-16 h-16 bg-violet relative overflow-hidden">
<Image <Image
className={s.productImage}
src={item.image_url} src={item.image_url}
width={60} width={150}
height={60} height={150}
// The cart item image is already optimized and very small in size // The cart item image is already optimized and very small in size
unoptimized unoptimized
/> />
</div> </div>
<div className="flex-1 flex flex-col justify-between text-base"> <div className="flex-1 flex flex-col text-base">
<span className="font-bold mb-3">{item.name}</span> <span className="font-bold mb-5">{item.name}</span>
<div className="flex items-center"> <div className="flex items-center">
<button type="button" onClick={() => increaseQuantity(-1)}> <button type="button" onClick={() => increaseQuantity(-1)}>
<Minus width={18} height={18} /> <Minus width={18} height={18} />

View File

@ -9,3 +9,7 @@
.pageHeading { .pageHeading {
@apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide; @apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
} }
.sectionHeading {
@apply pt-1 pb-4 text-base leading-7 text-base tracking-wide uppercase border-b border-accents-2;
}

View File

@ -13,7 +13,7 @@ interface Props {
children: React.ReactNode | any children: React.ReactNode | any
} }
type Variant = 'heading' | 'body' | 'pageHeading' type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
const Text: FunctionComponent<Props> = ({ const Text: FunctionComponent<Props> = ({
style, style,
@ -27,6 +27,7 @@ const Text: FunctionComponent<Props> = ({
body: 'p', body: 'p',
heading: 'h1', heading: 'h1',
pageHeading: 'h1', pageHeading: 'h1',
sectionHeading: 'h2',
} }
const Component: const Component:
@ -43,6 +44,7 @@ const Text: FunctionComponent<Props> = ({
[s.body]: variant === 'body', [s.body]: variant === 'body',
[s.heading]: variant === 'heading', [s.heading]: variant === 'heading',
[s.pageHeading]: variant === 'pageHeading', [s.pageHeading]: variant === 'pageHeading',
[s.sectionHeading]: variant === 'sectionHeading',
}, },
className className
)} )}

View File

@ -72,9 +72,8 @@ export default function Cart({}: InferGetStaticPropsType<
</div> </div>
) : ( ) : (
<div className="px-4 sm:px-6 flex-1"> <div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide"> <Text variant="pageHeading">My Cart</Text>
My Cart <Text variant="sectionHeading">Review your Order</Text>
</h2>
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2"> <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2">
{items.map((item) => ( {items.map((item) => (
<CartItem <CartItem
@ -84,7 +83,7 @@ export default function Cart({}: InferGetStaticPropsType<
/> />
))} ))}
</ul> </ul>
<hr className="mb-6" /> <hr className="my-6" />
<Text> <Text>
Before you leave, take a look at these items. We picked them just Before you leave, take a look at these items. We picked them just
for you for you
@ -98,7 +97,7 @@ export default function Cart({}: InferGetStaticPropsType<
)} )}
</div> </div>
<div className="lg:col-span-4"> <div className="lg:col-span-4">
<div className="flex-shrink-0 px-4 py-12 sm:px-6"> <div className="flex-shrink-0 px-4 py-24 sm:px-6">
<div className="border-t border-accents-2"> <div className="border-t border-accents-2">
<ul className="py-3"> <ul className="py-3">
<li className="flex justify-between py-1"> <li className="flex justify-between py-1">
@ -122,7 +121,7 @@ export default function Cart({}: InferGetStaticPropsType<
<div className="flex flex-row justify-end"> <div className="flex flex-row justify-end">
<div className="w-full lg:w-72"> <div className="w-full lg:w-72">
<Button href="/checkout" Component="a" width="100%"> <Button href="/checkout" Component="a" width="100%">
Proceed to Checkout Confirm Purchase
</Button> </Button>
</div> </div>
</div> </div>