# Chakra theme

# Css theme
+

以上是我以兩種不同的寫法實作的 Button，以這個例子而言我只有字定義我的 color，假設客製化的東西比較多，我們每次需要建立的 css 行數會成正比的增長，且需要不一樣樣式的 component 都必須在建立不一樣的 css file 並且複製一些相同的程式碼，且在未來維護時會有一定的成本

在 Chakra 中我可以復用所有的 component 元件以繼承的方式在自定義我需要的樣式，維護成本較低且開發快速，容易找到對應的 style

data:{
    "order_info": {
        "id": 4537271,
        "order_id": "DCS-TW-4537271",
        "delivery_type": "out",
        "order_type": "manual_order",
        "country_code": "TW",
        "sales_channel": "pp",
        "order_created_time": "2099-12-12 00:00:00",
        "delivery_date": "2023-12-22",
        "applicant_user_id": 1368,
        "related_order_id": [
            "1234"
        ],
        "warehouse_to": "A01",
        "warehouse_to_id": null,
        "warehouse_from": null,
        "warehouse_from_id": null,
        "delivery_reason": "這是來自喵喵國度的訂單，如果你發現了，你會被貓貓眷顧(=ↀωↀ=)",
        "user_erp_id": "",
        "department": "",
        "total": 8067,
        "subtotal": 8400,
        "discount_total": 333
    },
    "receipt_info": {
        "first_name": "Amazon",
        "last_name": "TobyZhan",
        "erp_customer_id": "EC001",
        "billing_address_phone": "0912345678",
        "billing_address_email": "ILoveBackend",
        "shipping_address_postcode": "666",
        "shipping_address_state": "台灣",
        "shipping_address_city": "台北",
        "address1": "喵喵路123號",
        "shipping_method": "pickup_711",
        "payment_method": "cash_on_delivery",
        "logistic_note": "這是來自喵喵國度的訂單，如果你發現了，你會被貓貓眷顧(=ↀωↀ=)",
        "address": "666台灣台北喵喵路123號"
    },
    "order_item_info": [
        {
            "id": 26002847,
            "project_code": "DCS",
            "order_item_type": "product",
            "order_id": 4537271,
            "product_id": -1,
            "variation_id": -1,
            "real_sku": "A0001",
            "sku": "乾貓G鮭大",
            "name": "",
            "unit_price": 100,
            "quantity": 30,
            "subtotal": 3000,
            "subtotal_tax": -1,
            "total": 2881,
            "total_tax": -1,
            "created_at": "2023-12-20T10:06:12Z",
            "updated_at": "2023-12-20T10:06:12Z",
            "deleted_at": "",
            "seq_no": 1
        },
        {
            "id": 26002848,
            "project_code": "DCS",
            "order_item_type": "product",
            "order_id": 4537271,
            "product_id": -1,
            "variation_id": -1,
            "real_sku": "A0002",
            "sku": "藍牛送",
            "name": "",
            "unit_price": 300,
            "quantity": 10,
            "subtotal": 3000,
            "subtotal_tax": -1,
            "total": 2881,
            "total_tax": -1,
            "created_at": "2023-12-20T10:06:12Z",
            "updated_at": "2023-12-20T10:06:12Z",
            "deleted_at": "",
            "seq_no": 2
        },
        {
            "id": 26002849,
            "project_code": "DCS",
            "order_item_type": "product",
            "order_id": 4537271,
            "product_id": -1,
            "variation_id": -1,
            "real_sku": "AA120",
            "sku": "迷迭條二四",
            "name": "",
            "unit_price": 1200,
            "quantity": 1,
            "subtotal": 1200,
            "subtotal_tax": -1,
            "total": 1152,
            "total_tax": -1,
            "created_at": "2023-12-20T10:06:12Z",
            "updated_at": "2023-12-20T10:06:12Z",
            "deleted_at": "",
            "seq_no": 3
        },
        {
            "id": 26002850,
            "project_code": "DCS",
            "order_item_type": "product",
            "order_id": 4537271,
            "product_id": -1,
            "variation_id": -1,
            "real_sku": "AA120",
            "sku": "迷迭條二四",
            "name": "",
            "unit_price": 1200,
            "quantity": 1,
            "subtotal": 1200,
            "subtotal_tax": -1,
            "total": 1153,
            "total_tax": -1,
            "created_at": "2023-12-20T10:06:12Z",
            "updated_at": "2023-12-20T10:06:12Z",
            "deleted_at": "",
            "seq_no": 4
        },
        {
            "id": 26002851,
            "project_code": "DCS",
            "order_item_type": "product",
            "order_id": 4537271,
            "product_id": -1,
            "variation_id": -1,
            "real_sku": "",
            "sku": "礦條組三六",
            "name": "",
            "unit_price": 0,
            "quantity": 10,
            "subtotal": 0,
            "subtotal_tax": -1,
            "total": 0,
            "total_tax": -1,
            "created_at": "2023-12-20T10:06:12Z",
            "updated_at": "2023-12-20T10:06:12Z",
            "deleted_at": "",
            "seq_no": 4
        },
        {
            "id": 26002852,
            "project_code": "DCS",
            "order_item_type": "coupon",
            "order_id": 4537271,
            "product_id": -1,
            "variation_id": -1,
            "real_sku": "",
            "sku": "",
            "name": "",
            "unit_price": -333,
            "quantity": 1,
            "subtotal": -333,
            "subtotal_tax": -1,
            "total": 0,
            "total_tax": -1,
            "created_at": "2023-12-20T10:06:12Z",
            "updated_at": "2023-12-20T10:06:12Z",
            "deleted_at": "",
            "seq_no": null
        }
    ]
}

//useToast
import { useToast as useBaseToast } from '@chakra-ui/react'

const toastProps = {
  position: 'top-right',
  duration: 3000,
  isClosable: true,
} as const

export function useToast () {
  const toast = useBaseToast()
  const showSuccessToast = (title: string) => {
    toast({
      title,
      status: 'success',
      ...toastProps,
    })
  }

  const showErrorToast = (title: string) => {
    toast({
      title,
      status: 'error',
      ...toastProps,
    })
  }

  return { showSuccessToast, showErrorToast }
}