1  /**
 2   * ACDC SettingsLayout Component
 3   * Narrow centered container with title for settings pages
 4   */
 5  
 6  import React from 'react'
 7  import { cn } from '../../lib/utils'
 8  import { Container } from './Container'
 9  
10  export interface SettingsLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
11    /** Page title */
12    title: string
13    /** Optional subtitle/description */
14    description?: string
15    /** Optional action in header (e.g., save button) */
16    headerAction?: React.ReactNode
17    /** Back navigation element */
18    backNav?: React.ReactNode
19    children: React.ReactNode
20  }
21  
22  export const SettingsLayout = React.forwardRef<HTMLDivElement, SettingsLayoutProps>(
23    (
24      {
25        title,
26        description,
27        headerAction,
28        backNav,
29        className = '',
30        children,
31        ...props
32      },
33      ref
34    ) => {
35      return (
36        <div
37          ref={ref}
38          className={cn('py-8 lg:py-12', className)}
39          {...props}
40        >
41          <Container size="narrow">
42            {/* Back navigation */}
43            {backNav && <div className="mb-6">{backNav}</div>}
44  
45            {/* Header */}
46            <div className="flex items-start justify-between mb-8">
47              <div>
48                <h1 className="text-2xl font-bold mb-2">{title}</h1>
49                {description && (
50                  <p className="text-[var(--text-secondary)]">{description}</p>
51                )}
52              </div>
53              {headerAction && (
54                <div className="flex-shrink-0">{headerAction}</div>
55              )}
56            </div>
57  
58            {/* Content */}
59            <div className="space-y-6">{children}</div>
60          </Container>
61        </div>
62      )
63    }
64  )
65  
66  SettingsLayout.displayName = 'SettingsLayout'