@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
64 lines • 1.97 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
/**
* PageContainer component for common page-level patterns.
*
* Provides a consistent container for page content with:
* - Optional max-width constraint
* - Horizontal centering option
* - Configurable padding and gap
* - Flex column layout with gap between children
*
* @example
* ```tsx
* <PageContainer maxWidth="800px" centered padding="48px" gap="24px">
* <PageHeader
* icon={<Icon icon={icons.users} />}
* title="Users"
* description="Manage user accounts and their roles."
* />
* <Paper>
* Content here...
* </Paper>
* </PageContainer>
* ```
*
* @example
* ```tsx
* // Full width container
* <PageContainer gap="16px">
* <Typography variant="h4">Dashboard</Typography>
* <GridOfCards />
* </PageContainer>
* ```
*/
export const PageContainer = Shade({
customElementName: 'shade-page-container',
elementBase: HTMLDivElement,
elementBaseName: 'div',
css: {
display: 'flex',
fontFamily: cssVariableTheme.typography.fontFamily,
flexDirection: 'column',
boxSizing: 'border-box',
color: cssVariableTheme.text.primary,
position: 'relative',
},
render: ({ props, children, useHostProps }) => {
const { maxWidth = '100%', centered = false, padding = cssVariableTheme.spacing.md, gap = cssVariableTheme.spacing.md, fullHeight = true, } = props;
const hostStyle = {
maxWidth,
padding,
gap,
height: fullHeight ? '100%' : 'auto',
};
if (centered) {
hostStyle.marginLeft = 'auto';
hostStyle.marginRight = 'auto';
}
useHostProps({ style: hostStyle });
return createComponent(createComponent, null, children);
},
});
export * from './page-header.js';
//# sourceMappingURL=index.js.map