Description

Create a reusable container component for consistent page layout following GhostPaste's design specifications.

Requirements

Max-width Constraints

• Default: 1280px (from spec)
• Narrow variant: 768px (for text-heavy content like About page)
• Wide variant: 1536px (for future features)
• Full variant: 100% width (no constraint)

Responsive Padding Scale

/* Mobile first approach */
padding-left: 1rem;   /* 16px on mobile */
padding-right: 1rem;

/* Tablet (768px+) */
@media (min-width: 768px) {
  padding-left: 2rem;   /* 32px */
  padding-right: 2rem;
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  padding-left: 3rem;   /* 48px */
  padding-right: 3rem;
}

Container Variants

type ContainerVariants = {
  default: "max-w-screen-xl",    // 1280px
  narrow: "max-w-3xl",            // 768px  
  wide: "max-w-screen-2xl",       // 1536px
  full: "max-w-full"              // 100%
}

Prose Content Support

• Optional prose prop for text content
• When true, applies typography styles:
  • Optimized line-height for readability
  • Appropriate font sizes for headings
  • Spacing between paragraphs
  • Max-width for optimal reading length

Implementation Example

interface ContainerProps {
  children: React.ReactNode;
  variant?: "default" | "narrow" | "wide" | "full";
  prose?: boolean;
  className?: string;
}

export function Container({ 
  children, 
  variant = "default", 
  prose = false,
  className 
}: ContainerProps) {
  return (
    <div 
      className={cn(
        "mx-auto px-4 md:px-8 lg:px-12",
        variantStyles[variant],
        prose && "prose prose-slate dark:prose-invert",
        className
      )}
    >
      {children}
    </div>
  );
}

Usage Examples

// Default container for main content
<Container>
  <CreateGistForm />
</Container>

// Narrow container for text content
<Container variant="narrow" prose>
  <h1>About GhostPaste</h1>
  <p>Zero-knowledge encrypted code sharing...</p>
</Container>

// Full width for special layouts
<Container variant="full">
  <HeroSection />
</Container>

Acceptance Criteria

• Default max-width of 1280px applied
• All variants (narrow, wide, full) work correctly
• Responsive padding scales properly on all breakpoints
• Prose styling applies when prop is true
• Component accepts additional className prop
• Centered horizontally with auto margins
• Works with both light and dark themes
• No horizontal scroll on any screen size

Technical Notes

• Use Tailwind CSS classes for all styling
• Leverage cn() utility for class name composition
• Test on actual devices, not just browser DevTools
• Ensure container doesn't break sticky header behavior
• Consider CSS container queries for future enhancements

Related

• Used by all page components
• Works with Header (feat: create header component with navigation #53) and Footer (feat: create footer component #70)
• Essential for responsive design across the app