denozord
dd94f9f887
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m55s
44 lines
1.6 KiB
React
44 lines
1.6 KiB
React
import React from 'react'
|
|
|
|
/**
|
|
* Единый заголовок страницы в стиле Tabler UI.
|
|
* Используется на всех страницах для одинакового UX.
|
|
* Кнопки (actions) отображаются под названием страницы.
|
|
* @param {string} title - Заголовок страницы
|
|
* @param {React.ReactNode} [icon] - Иконка слева от заголовка (например, <IconServer />)
|
|
* @param {string} [pretitle] - Небольшая надпись над заголовком (page-pretitle)
|
|
* @param {React.ReactNode} [meta] - Подзаголовок или мета-информация под заголовком
|
|
* @param {React.ReactNode} [actions] - Кнопки/действия под названием страницы (btn-list, btn-group)
|
|
*/
|
|
function PageHeader({ title, icon, pretitle, actions, meta }) {
|
|
return (
|
|
<div className="page-header d-print-none mb-4">
|
|
<div className="row align-items-center">
|
|
<div className="col">
|
|
{pretitle && (
|
|
<div className="page-pretitle">{pretitle}</div>
|
|
)}
|
|
<h1 className="page-title d-flex align-items-center">
|
|
{icon && <span className="me-2 d-flex align-items-center">{icon}</span>}
|
|
{title}
|
|
</h1>
|
|
{meta && (
|
|
<div className="text-muted small mt-1">{meta}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{actions && (
|
|
<div className="row mt-2">
|
|
<div className="col d-print-none">
|
|
{actions}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PageHeader
|
|
|
|
|