TagView

import { TagView } from "@vortex/ui-cals"
import { useState } from "react"
 
const items = [
  { value: "dashboard", label: "대시보드" },
  { value: "users", label: "사용자 관리" },
  { value: "settings", label: "설정" },
]
 
export default function App() {
  const [selected, setSelected] = useState("dashboard")
  return (
    <TagView items={items} value={selected} onValueChange={setSelected} />
  )
}

<TagView
  items={items}
  closable
  onClose={(value) => {
    setItems(items.filter((item) => item.value !== value))
  }}
/>

<TagView
  items={items}
  closable
  onBeforeClose={async (value) => {
    if (hasUnsavedChanges(value)) {
      return window.confirm("저장하지 않은 변경이 있습니다. 닫으시겠습니까?")
    }
    return true
  }}
  onClose={(value) => removeTab(value)}
/>

import { TagView, tagViewDefaultContextMenuItems } from "@vortex/ui-cals"
 
<TagView
  items={items}
  closable
  contextMenuItems={(tab, allItems) => [
    ...tagViewDefaultContextMenuItems(tab, allItems),
    { key: "__sep__", label: "", type: "separator" },
    { key: "refresh", label: "새로고침" },
    { key: "info", label: "화면 정보 보기" },
  ]}
  onContextMenuSelect={(menuKey, tabValue) => {
    if (menuKey === "refresh") refreshTab(tabValue)
    if (menuKey === "info") showTabInfo(tabValue)
  }}
/>

const items = [
  { value: "tab1", label: "활성 탭" },
  { value: "tab2", label: "비활성 탭", disabled: true },
  { value: "tab3", label: "또 다른 탭" },
]
 
<TagView items={items} defaultValue="tab1" />