@knowmax/genericlist-fluentuiv9/dist/components/list/HeadPanel.js

Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { observer } from "mobx-react-lite";
import { makeStyles, mergeClasses } from '@griffel/react';
import { Title3 } from '@fluentui/react-text';
import { tokens } from "@fluentui/tokens";
import { CreateItem } from ".";
const useClasses = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'row',
        gap: tokens.spacingHorizontalL,
        alignItems: 'end'
    },
    far: {
        marginLeft: 'auto'
    }
});
/** Use to put a fancy head panel above list. For example containing list title, custom contents and create button. */
export const HeadPanel = observer((props) => {
    const classes = useClasses();
    return (_jsxs("div", { className: mergeClasses(classes.root, props.className), children: [props.title &&
                _jsx(Title3, { children: props.title }), props.children, props.showCreateItem && props.list &&
                _jsx("div", { className: classes.far, children: _jsx(CreateItem, { list: props.list, ...props.createItemProps, children: props.createItemText }) })] }));
});