Admin Header

어드민 화면 상단에서 현재 화면의 기준 정보를 보여줘요. 제목·부제목·필터를 일관된 레이아웃으로 묶어 맥락 파악과 주요 작업 접근을 돕습니다. 순수 레이아웃이라 RSC 호환.

전체 예시

설정

디바이스 관리

등록된 디바이스를 확인하고 관리해요.

tsx

import {
  AdminHeader, AdminHeaderTitle, AdminHeaderSubtitle, AdminHeaderFilter,
  Button, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
} from '@openiot/ui'

<AdminHeader>
  <AdminHeaderTitle>설정</AdminHeaderTitle>
  <AdminHeaderSubtitle
    title="디바이스 관리"
    description="등록된 디바이스를 확인하고 관리해요."
    action={<Button size="sm">디바이스 추가</Button>}
  />
  <AdminHeaderFilter>
    <Input leftIcon={<Icon icon={Search} size={18} />} placeholder="검색" />
    <div className="ml-auto flex gap-2"><Button>검색</Button></div>
  </AdminHeaderFilter>
</AdminHeader>

Sub Title

부제목 + 설명에 우측 액션(없음·버튼 1·버튼 2·Dropdown)을 조합해요.

서브 타이틀

서브 타이틀 메뉴에 대한 설명

서브 타이틀

서브 타이틀 메뉴에 대한 설명

서브 타이틀

서브 타이틀 메뉴에 대한 설명

서브 타이틀

서브 타이틀 메뉴에 대한 설명

Filter

검색·드롭다운·버튼을 한 줄에 배치해요. 우측 정렬은 그룹에 ml-auto 를 줘요. (Date Picker 는 캘린더 컴포넌트 추가 후 연동 예정)