@datalayer/core/lib/components/display/DatalayerBox.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { Link, Text } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { ArrowRightIcon } from '@primer/octicons-react';
import { useNavigate } from '../../hooks';
export const DatalayerBox = (props) => {
    const { title, linkLabel, linkRoute, children } = props;
    const navigate = useNavigate();
    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingRight: 4,
                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '6px solid #28b899', paddingLeft: 2 }, children: title }), linkRoute && linkLabel && (_jsxs(Link, { href: "javascript: return false;", onClick: e => navigate(linkRoute), children: [linkLabel, _jsx(ArrowRightIcon, {})] }))] }), _jsx(Box, { sx: {
                    borderColor: 'border.default',
                    borderStyle: 'solid',
                    borderWidth: '1',
                    borderRadius: '2',
                    padding: 4,
                    marginTop: 2,
                }, children: children })] }));
};
export default DatalayerBox;