4
0
forked from crowetic/commerce

Styling and icon fixes for cart sidebar

This commit is contained in:
paco 2020-10-08 18:00:05 -06:00
parent ccf6074573
commit f9660b4bc2
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
9 changed files with 85 additions and 16 deletions

View File

@ -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,

View File

@ -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"

View File

@ -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>

View 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
View 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
View 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

View File

@ -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'

View File

@ -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}

View File

@ -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>