# Component/PanelTabs/PanelTabGroup

> Props: component-paneltabs-paneltabgroup.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('paneltab1-1');
    const handleChange = (activeTab?: string) => {
      setActiveTab(activeTab ?? '');
    };
    return <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        {tabs.map(({
        title,
        important,
        items
      }) => <PanelTabGroup key={title} title={title} important={important}>
            {items.map(props => <PanelTab key={props.id} {...props} />)}
          </PanelTabGroup>)}
      </PanelTabs>;
  }
}
```

### Scroll

```tsx
{
  args: {
    title: '상품/배송준비 현황'
  },
  render: args => {
    const [activeTab, setActiveTab] = useState('paneltab2-0-1');
    const handleChange = (activeTab?: string) => {
      setActiveTab(activeTab ?? '');
    };
    const tabs = [{
      title: '상품/배송준비 현황',
      important: false
    }, {
      title: '꼭 확인해주세요',
      important: true
    }];
    return <div style={{
      padding: '20px',
      border: '1px solid black',
      width: 600,
      marginBottom: 12
    }}>
        <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange} divider>
          {tabs.map(({
          title,
          important
        }, j) => <PanelTabGroup key={title} title={title} important={important}>
              {Array.from({
            length: 3
          }, (_, i) => {
            const number = i + 1;
            return <PanelTab id={`paneltab2-${j}-${number}`} key={`paneltab2-${j}-${number}`} title='주문확인' number={number} suffix='건' caption='최근 3달 999건' />;
          })}
            </PanelTabGroup>)}
        </PanelTabs>
      </div>;
  }
}
```