forked from crowetic/commerce
Styling and icon fixes for cart sidebar
This commit is contained in:
parent
ccf6074573
commit
f9660b4bc2
@ -1,6 +1,6 @@
|
|||||||
.quantity {
|
.quantity {
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
@apply w-6 border-gray-300 border mx-3 rounded text-center text-sm;
|
@apply w-8 border-gray-300 border mx-3 rounded text-center text-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quantity::-webkit-outer-spin-button,
|
.quantity::-webkit-outer-spin-button,
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Trash } from '@components/icon'
|
import { Trash, Plus, Minus } from '@components/icon'
|
||||||
import { useCommerce } from '@lib/bigcommerce'
|
import { useCommerce } from '@lib/bigcommerce'
|
||||||
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'
|
||||||
@ -57,27 +57,29 @@ const CartItem = ({
|
|||||||
}, [item.quantity])
|
}, [item.quantity])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="flex flex-row space-x-6">
|
<li className="flex flex-row space-x-6 py-6">
|
||||||
<div className="h-12 w-12 bg-violet"></div>
|
<div className="h-12 w-12 bg-violet"></div>
|
||||||
<div className="flex-1 flex flex-col">
|
<div className="flex-1 flex flex-col justify-between">
|
||||||
<span>{item.name}</span>
|
<span>{item.name}</span>
|
||||||
<div className="py-2">
|
<div className="flex items-center">
|
||||||
<button type="button" onClick={() => increaseQuantity(-1)}>
|
<button type="button" onClick={() => increaseQuantity(-1)}>
|
||||||
-
|
<Minus width={18} height={18} />
|
||||||
</button>
|
</button>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
|
max={99}
|
||||||
|
min={0}
|
||||||
className={styles.quantity}
|
className={styles.quantity}
|
||||||
value={quantity}
|
value={quantity}
|
||||||
onChange={handleQuantity}
|
onChange={handleQuantity}
|
||||||
onBlur={handleBlur}
|
onBlur={handleBlur}
|
||||||
/>
|
/>
|
||||||
<button type="button" onClick={() => increaseQuantity(1)}>
|
<button type="button" onClick={() => increaseQuantity(1)}>
|
||||||
+
|
<Plus width={18} height={18} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-y-2">
|
<div className="flex flex-col justify-between space-y-2">
|
||||||
<span>{price}</span>
|
<span>{price}</span>
|
||||||
<button
|
<button
|
||||||
className="flex justify-end"
|
className="flex justify-end"
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import { UserNav } from '@components/core'
|
import { UserNav } from '@components/core'
|
||||||
import { Button } from '@components/ui'
|
import { Button } from '@components/ui'
|
||||||
import { Trash, Cross } from '@components/icon'
|
import { ArrowLeft } from '@components/icon'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { useCart } from '@lib/bigcommerce/cart'
|
import { useCart } from '@lib/bigcommerce/cart'
|
||||||
import CartItem from '../CartItem'
|
import CartItem from '../CartItem'
|
||||||
@ -17,7 +17,7 @@ const CartSidebarView: FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<header className="px-4 py-6 sm:px-6 border-b border-gray-200">
|
<header className="px-4 pt-6 pb-4 sm:px-6">
|
||||||
<div className="flex items-start justify-between space-x-3">
|
<div className="flex items-start justify-between space-x-3">
|
||||||
<div className="h-7 flex items-center">
|
<div className="h-7 flex items-center">
|
||||||
<button
|
<button
|
||||||
@ -25,7 +25,7 @@ const CartSidebarView: FC = () => {
|
|||||||
aria-label="Close panel"
|
aria-label="Close panel"
|
||||||
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
|
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
|
||||||
>
|
>
|
||||||
<Cross className="h-6 w-6" />
|
<ArrowLeft className="h-6 w-6" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
@ -49,8 +49,8 @@ const CartSidebarView: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="px-4 sm:px-6 py-4 flex-1">
|
<div className="px-4 sm:px-6 flex-1">
|
||||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
|
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<CartItem
|
<CartItem
|
||||||
key={item.id}
|
key={item.id}
|
||||||
@ -61,7 +61,7 @@ const CartSidebarView: FC = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
|
<div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
|
||||||
<Button href="/checkout" Component={Link}>
|
<Button href="/checkout" Component={Link} width="100%">
|
||||||
Proceed to Checkout
|
Proceed to Checkout
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
22
components/icon/ArrowLeft.tsx
Normal file
22
components/icon/ArrowLeft.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
const ArrowLeft = ({ ...props }) => {
|
||||||
|
return (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
|
||||||
|
<path
|
||||||
|
d="M19 12H5"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12 19L5 12L12 5"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ArrowLeft
|
15
components/icon/Minus.tsx
Normal file
15
components/icon/Minus.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const Minus = ({ ...props }) => {
|
||||||
|
return (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
|
||||||
|
<path
|
||||||
|
d="M5 12H19"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Minus
|
22
components/icon/Plus.tsx
Normal file
22
components/icon/Plus.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
const Plus = ({ ...props }) => {
|
||||||
|
return (
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
|
||||||
|
<path
|
||||||
|
d="M12 5V19"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M5 12H19"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Plus
|
@ -2,3 +2,6 @@ export { default as Bag } from './Bag'
|
|||||||
export { default as Heart } from './Heart'
|
export { default as Heart } from './Heart'
|
||||||
export { default as Trash } from './Trash'
|
export { default as Trash } from './Trash'
|
||||||
export { default as Cross } from './Cross'
|
export { default as Cross } from './Cross'
|
||||||
|
export { default as ArrowLeft } from './ArrowLeft'
|
||||||
|
export { default as Plus } from './Plus'
|
||||||
|
export { default as Minus } from './Minus'
|
||||||
|
@ -16,6 +16,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|||||||
active?: boolean
|
active?: boolean
|
||||||
type?: 'submit' | 'reset' | 'button'
|
type?: 'submit' | 'reset' | 'button'
|
||||||
Component?: string | JSXElementConstructor<any>
|
Component?: string | JSXElementConstructor<any>
|
||||||
|
width?: string | number
|
||||||
}
|
}
|
||||||
|
|
||||||
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||||
@ -27,6 +28,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
active,
|
active,
|
||||||
onClick,
|
onClick,
|
||||||
disabled,
|
disabled,
|
||||||
|
width,
|
||||||
Component = 'button',
|
Component = 'button',
|
||||||
...rest
|
...rest
|
||||||
} = props
|
} = props
|
||||||
@ -59,6 +61,9 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
ref={mergeRefs([ref, buttonRef])}
|
ref={mergeRefs([ref, buttonRef])}
|
||||||
{...rest}
|
{...rest}
|
||||||
{...buttonProps}
|
{...buttonProps}
|
||||||
|
style={{
|
||||||
|
width,
|
||||||
|
}}
|
||||||
data-active={isPressed ? '' : undefined}
|
data-active={isPressed ? '' : undefined}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
@ -72,8 +72,8 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
|
|||||||
leaveFrom="translate-x-0"
|
leaveFrom="translate-x-0"
|
||||||
leaveTo="translate-x-full"
|
leaveTo="translate-x-full"
|
||||||
>
|
>
|
||||||
<div className="h-full w-screen max-w-2xl">
|
<div className="h-full w-screen max-w-md">
|
||||||
<div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
|
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user