cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Stiling

Browse Source
This commit is contained in:
Belen Curcio 2020-10-24 19:14:34 -03:00
parent 1ba0967500
commit cd72d3a1ef
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/cart/CartItem/CartItem.tsx
View File

@ -1,10 +1,11 @@
import { ChangeEvent, useEffect, useState } from 'react' import s from './CartItem.module.css'
import Image from 'next/image' import Image from 'next/image'
import Link from 'next/link'
import { ChangeEvent, useEffect, useState } from 'react'
import { Trash, Plus, Minus } from '@components/icon' import { Trash, Plus, Minus } from '@components/icon'
import usePrice from '@lib/bigcommerce/use-price' import usePrice from '@lib/bigcommerce/use-price'
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
import s from './CartItem.module.css'
const CartItem = ({ const CartItem = ({
item, item,
@ -53,7 +54,7 @@ const CartItem = ({
setQuantity(item.quantity) setQuantity(item.quantity)
} }
}, [item.quantity]) }, [item.quantity])
console.log(item)
return ( return (
<li className="flex flex-row space-x-8 py-8"> <li className="flex flex-row space-x-8 py-8">
<div className="w-16 h-16 bg-violet relative overflow-hidden"> <div className="w-16 h-16 bg-violet relative overflow-hidden">
@ -67,7 +68,13 @@ const CartItem = ({
/> />
</div> </div>
<div className="flex-1 flex flex-col text-base"> <div className="flex-1 flex flex-col text-base">
<span className="font-bold mb-5">{item.name}</span> {/** TODO: Replace this. No `path` found at Cart */}
<Link href={`/product/${item.url.split('/')[3]}`}>
<span className="font-bold mb-5 text-lg cursor-pointer">
{item.name}
</span>
</Link>
<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} />

7
pages/cart.tsx
View File

@ -36,6 +36,9 @@ export default function Cart({}: InferGetStaticPropsType<
const error = null const error = null
const success = null const success = null
console.log(items)
return ( return (
<div className="grid lg:grid-cols-12"> <div className="grid lg:grid-cols-12">
<div className="lg:col-span-8"> <div className="lg:col-span-8">
@ -88,9 +91,9 @@ export default function Cart({}: InferGetStaticPropsType<
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
</Text> </Text>
<div className="flex py-6 space-x-2"> <div className="flex py-6 space-x-6">
{[1, 2, 3, 4, 5, 6].map((x) => ( {[1, 2, 3, 4, 5, 6].map((x) => (
<div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50" /> <div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75" />
))} ))}
</div> </div>
</div> </div>