All files / layers / L2R / slots Page.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
52x
 
 
412x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
602x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { ReactNode } from 'react'
import { Link } from 'react-router-dom'
import type { PageConfig } from '../../interfaces'
 
export interface PageProps {
  config: PageConfig
  children?: ReactNode
}
 
export function Page({ config, children }: PageProps) {
  return (
    <div data-testid="page-slot" className="p-6">
      <header data-testid="page-header" className="mb-6 flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold">{config.title}</h1>
          {config.breadcrumbs && config.breadcrumbs.length > 0 && (
            <nav data-testid="page-breadcrumbs" className="text-sm text-muted-foreground">
              {config.breadcrumbs.map((crumb, i) => (
                <span key={i} className="text-muted-foreground">
                  {crumb.href ? <Link to={crumb.href} className="text-primary underline-offset-4 hover:underline">{crumb.label}</Link> : crumb.label}
                  {i < config.breadcrumbs!.length - 1 && ' / '}
                </span>
              ))}
            </nav>
          )}
        </div>
        {config.actions && (
          <div data-testid="page-actions" className="flex items-center gap-2">
            {config.actions}
          </div>
        )}
      </header>
      <main data-testid="page-content" className="text-base">{children}</main>
    </div>
  )
}