# Next.iBUYPOWER Tool box
### 享受我包裝好的元件吧！

# Pill Button

可以自行決定主題、內容與點擊事件的藥丸按紐！

export interface IPillButtonProperty {
    event: {
        buttonlink?: string;
        click?: Function;
    };
    theme: ButtonThenme;
    buttonText: string;
    otherClassName?: string;
}

你可以透過 event 決定點擊後觸發的事件，
它可以是一個 function 或是 超連結，
並且透過 theme 決定按鈕的樣式，
buttonText 屬性則為此按鈕的內容，
也可以透過 otherClassName 來添加額外的樣式。

例如:rocket: :

import PillButton, { IPillButtonProperty, ButtonThenme } from '@/components/tools/pill-button/pill-button';

function productInfoTabClick() {
    // click function.
}

const productInfoPillButtonProperty = {
    event: {
        click: productInfoTabClick,
    },
    theme: ButtonThenme.transparenthoverblack,
    buttonText: 'Product Info',
    otherClassName: 'w-100 mb-4 xs:mb-0',
} as IPillButtonProperty;

return (
    <PillButton {...productInfoPillButtonProperty}></PillButton>
)

theme 樣式表

export enum ButtonThenme {
    red,
    redborder,
    blue,
    whitehoverred,
    transparenthoverblack,
}

# Drop down list

只要傳送選項與點擊事件給我，我來處理！

入參:

export interface IDropDownListProperty {
    source: string[];
    afterOptionClick: Function;
    label?: string;
    containClassName?: string;
    targetkey?: string;
}

| 參數名稱 | 效用 |
| -------- | ---- |
|source|選項們|
|afterOptionClick|選項點擊後觸發的事件|
|label|上方的文字(如果你需要)|
|containClassName|額外的容器className|
|targetkey|初始選項|

上範例:rocket: :

import DropDownList, { IDropDownListProperty } from '@/components/tools/drop-down-list';

const tabData = ['Specifications', 'Video', 'Reward & Points', 'Community', 'Support'];

function tabClick(Id: string) {
    // after option click!
}

const productDropDownListProperty: IDropDownListProperty = {
    source: tabData,
    afterOptionClick: tabClick,
    containClassName: 'block visible md:hidden max-w-[250px] m-auto mt-4',
    targetkey: tabStatus,
};

return(
    <DropDownList {...productDropDownListProperty}></DropDownList>
)

# Tabs

只要傳送選項與點擊事件給我，我來處理！

入參:

export interface ITabs {
    tabs: string[];
    afterTabClick: Function;
    targetkey?: string;
    containClassName?: string;
}

| 參數名稱 | 效用 |
| -------- | ---- |
|tabs|選項們|
|afterTabClick|選項點擊後觸發的事件|
|targetkey|初始選項|
|containClassName|額外的容器className|

上範例:rocket: :

import Tabs from '@/components/tools/tabs';

function tabClick(Id: string) {
    setTabStatus(Id);
}

const tabData = ['Specifications', 'Video', 'Reward & Points', 'Community', 'Support'];

return(
    <Tabs tabs={tabData} afterTabClick={tabClick} targetkey={'Specifications'} containClassName="hidden md:block md:visible"></Tabs>
)

# SlickContain

每次要用 slick 都要自己在複製一份樣式出來嗎?
把這些麻煩事交給我！

| 參數名稱 | 效用 |
| -------- | ---- |
|defaultSlidesToShow|一行show幾個|
|breakpointAndSlidesToShow|寬度多少以上一行show幾個|
|containClassName|額外的容器className|
|child|孩子們|

上範例:rocket: :

import SlickContain from '@/components/tools/slickcontain';
return (
    <SlickContain
        defaultSlidesToShow={2.5}
        breakpointAndSlidesToShow={[
            {
                breakpoint: 1100,
                slidesToShow: 2,
            },
            {
                breakpoint: 900,
                slidesToShow: 1.5,
            },
            {
                breakpoint: 600,
                slidesToShow: 1,
            },
        ]}
        containClass="h-[300px]"
    >
        {specLevels.map((cell: ISpecLevel, index: number) => {
            return <Speclevel key={index} cell={cell}></Speclevel>;
        })}
    </SlickContain>
);

# SocialMediaIcons

每次都要自己新增一整組 Media Icon 嗎?
我幫你設定了三組不同顏色的 Icon 並且幫他們都加上了連結！

列舉們:

export enum IconColor {
    black,
    white,
    blue,
}

上範例:rocket::

import SocialMediaIcons, { IconColor } from '@/components/tools/social-media-icons/social-media-icons';

return (
    <SocialMediaIcons iconColor={IconColor.white} containClassName={'grid grid-cols-7 grid-rows-1 gap-4 w-auto '}></SocialMediaIcons>
)

# Pagination
覺得分頁功能難以實現嗎？拜託停止複製貼上！
最近在專案中看到這組分頁功能被複製貼上三份在不同的地方，
我感到很厭煩，二話不說直接做成工具！
| 參數名稱 | 效用 |
| ----------- | ---------------------------------- |
| source | 需要分割的陣列(可為物件陣列) |
| pageChange | page變更後觸發的事件 |
| showPerPage | 一頁幾個(預設25)(選擇性) |
| children | 若有傳入則上下皆有分頁選項(選擇性) |

當使用者按下page的時候我將回傳切割完畢的物件陣列，
讓你自由的決定該怎麼處理這份物件陣列！

上範例:rocket::

import Pagination from '@/components/tools/pagination';
import { useState } from 'react';

const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [showedData, setShowedData] = useState([] as any[]);
const pageChange = (response: any[]) => {
    setShowedData(response);
};

return (
    <div>
        <Pagination source={source} pageChange={pageChange} showPerPage={3}>
            <div className="py-4 text-center">{showedData}</div>
        </Pagination>
    </div>
);

### Enjoy!