29 lines
807 B
JavaScript
29 lines
807 B
JavaScript
import React from 'react';
|
|
|
|
import { HStack } from '@astryxdesign/core/HStack';
|
|
import { Heading } from '@astryxdesign/core/Heading';
|
|
|
|
// Sticky page-header bar. Offset by the real AppShell nav height (not a
|
|
// hardcoded px guess) and a modest z-index so it never wins the stacking
|
|
// fight against the nav — see memory astryx-sticky-header-zindex-bug.
|
|
const TitleCard = ({ title, secondary, sx }) => (
|
|
<div
|
|
style={{
|
|
position: 'sticky',
|
|
top: 'var(--appshell-header-height, 0px)',
|
|
zIndex: 100,
|
|
background: 'var(--color-background-body)',
|
|
width: '100%',
|
|
padding: 8,
|
|
...sx
|
|
}}
|
|
>
|
|
<HStack justify="space-between" wrap="wrap">
|
|
<Heading level={3}>{title}</Heading>
|
|
{secondary && secondary}
|
|
</HStack>
|
|
</div>
|
|
);
|
|
|
|
export default TitleCard;
|