main.tsx 687 B

123456789101112131415161718192021222324252627
  1. import { cn } from '@/lib/utils'
  2. type MainProps = React.HTMLAttributes<HTMLElement> & {
  3. fixed?: boolean
  4. fluid?: boolean
  5. ref?: React.Ref<HTMLElement>
  6. }
  7. export function Main({ fixed, className, fluid, ...props }: MainProps) {
  8. return (
  9. <main
  10. data-layout={fixed ? 'fixed' : 'auto'}
  11. className={cn(
  12. '@container/main px-4 py-6',
  13. // If layout is fixed, make the main container flex and grow
  14. fixed && 'flex grow flex-col overflow-hidden',
  15. // If layout is not fluid, set the max-width
  16. !fluid &&
  17. '@7xl/content:mx-auto @7xl/content:w-full @7xl/content:max-w-7xl',
  18. className
  19. )}
  20. {...props}
  21. />
  22. )
  23. }