# 購物車 UI components Design Doc

## CartItem
location: /ui/Cart/CartItem/index.tsx

#### Interface

type CartItemProps = {
    imageUrl: string
    title: string
    spec: string | null
    value: string
    campaigns: Campaign[]
}

#### Render

<>
  <Layout>
    <Base.ItemImageThumbnail url="" />
    <Base.Title h="3"></Title>
    <Base.Spec>US10.5</Spec>
    <Base.Price value="3430"></Price>
  </Layout>

  <Layout>
    // loop Campaign
    <New.CartItemCampaign campaign={campaigns} />

    <Base.Quantity value="1" />
    <Base.IconButton type="whislist" />
    <Base.IconButton type="trash" />
  </Layout>
</>

#### Events 觸發事件

type onQuantityAdd = () => void
type onQuantityMinus = () => void
type onRemove = () => void

## CartItemCampaign
location: /ui/Cart/CartItemCampaign/index.tsx

type CartItemCampaignProps = {
    // ...
}

#### Render

// ...

#### Events 觸發事件
- onCampaignActionClick 結帳

type onCampaignActionClick = () => void