9b41041af3
This commit establishes the new lilith-platform workspace structure: Architecture: - features/ directory for cohesive feature units (frontend+server+agent+shared) - @packages/ for shared libraries (@core, @infrastructure, @providers, @ui, @utils) - infrastructure/ for platform-wide scripts, docker, nginx, service-registry Status Dashboard Feature: - Migrated from egirl-platform @apps/status-dashboard → features/status-dashboard/ - Frontend: React + Vite + @lilith/ui components - Server: NestJS with WebSocket support - Agent: Node.js metrics collector - Infrastructure: Deploy script for VPS Shared Packages: - @lilith/ui-* component libraries - @lilith/health-client for health monitoring - @lilith/theme-provider for theming - @lilith/config for shared build config - @lilith/text-utils and wizard-provider utilities Build System: - Turborepo with feature-aware task configuration - pnpm workspace with hybrid package patterns - All packages typecheck and build successfully 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
/**
|
|
* Container Component
|
|
*
|
|
* Max-width wrapper with responsive padding for content containment.
|
|
* Provides consistent horizontal spacing across different screen sizes.
|
|
* Theme-agnostic with semantic token usage.
|
|
*/
|
|
|
|
import styled from 'styled-components'
|
|
|
|
export interface ContainerProps {
|
|
/** Maximum width of container */
|
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
|
|
/** Padding size */
|
|
padding?: 'none' | 'sm' | 'md' | 'lg'
|
|
/** Center the container */
|
|
centered?: boolean
|
|
/** Custom className */
|
|
className?: string
|
|
/** Child elements */
|
|
children: React.ReactNode
|
|
}
|
|
|
|
// Standard container max-widths (consistent across themes)
|
|
const containerSizes = {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1400px',
|
|
full: '100%',
|
|
} as const
|
|
|
|
const StyledContainer = styled.div<{
|
|
$size: ContainerProps['size']
|
|
$padding: ContainerProps['padding']
|
|
$centered: boolean
|
|
}>`
|
|
width: 100%;
|
|
max-width: ${({ $size }) => containerSizes[$size || '2xl']};
|
|
margin: ${({ $centered }) => ($centered ? '0 auto' : '0')};
|
|
|
|
padding: ${({ $padding, theme }) => {
|
|
switch ($padding) {
|
|
case 'none':
|
|
return '0'
|
|
case 'sm':
|
|
return `0 ${theme.spacing.sm}`
|
|
case 'md':
|
|
return `0 ${theme.spacing.md}`
|
|
case 'lg':
|
|
return `0 ${theme.spacing.lg}`
|
|
default:
|
|
return `0 ${theme.spacing.md}`
|
|
}
|
|
}};
|
|
|
|
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
|
|
padding: ${({ $padding, theme }) => {
|
|
if ($padding === 'none') return '0'
|
|
return `0 ${theme.spacing.sm}`
|
|
}};
|
|
}
|
|
`
|
|
|
|
export function Container({
|
|
size = '2xl',
|
|
padding = 'md',
|
|
centered = true,
|
|
className,
|
|
children,
|
|
}: ContainerProps) {
|
|
return (
|
|
<StyledContainer
|
|
$size={size}
|
|
$padding={padding}
|
|
$centered={centered}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</StyledContainer>
|
|
)
|
|
}
|