All files / packages/design-system-2-site/src/components HeroSplit.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
38
39
40
41
42
43
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55x
55x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { ReactNode } from 'react';
import { Breadcrumbs, type Crumb } from './Breadcrumbs';
 
/**
 * Page-heading block: a text column (breadcrumbs + title + optional subtitle)
 * with an optional half-width image on the right. Pass `image` (a CSS
 * `background-image` value) for the two-column variant; omit it for the
 * single-column `--no-image` variant. `aside` fills the right column with
 * page controls instead (ignored when `image` is set).
 */
export function HeroSplit({
  breadcrumbs = [],
  title,
  description,
  image,
  aside,
}: {
  breadcrumbs?: Crumb[];
  title?: string;
  description?: string;
  /** CSS background-image value, e.g. `url(...)`. Omit for the no-image variant. */
  image?: string;
  /** Right-column content (e.g. filters), top- and bottom-aligned with the text column. */
  aside?: ReactNode;
}) {
  const variant = image ? '' : aside ? ' hero-split--aside' : ' hero-split--no-image';
  return (
    <div className={`hero-split${variant}`}>
      <div className="hero-split__text">
        <Breadcrumbs items={breadcrumbs} />
        <div className="hero-split__title">
          {title && <h1 className="text-heading-xl">{title}</h1>}
          {description && <p className="text-subtitle">{description}</p>}
        </div>
      </div>
      {image && (
        <div className="hero-split__image" style={{ backgroundImage: image }} role="img" aria-label={title} />
      )}
      {!image && aside && <div className="hero-split__aside">{aside}</div>}
    </div>
  );
}