blog HeroComponentBanner.tsx

0% Statements 0/69
0% Branches 0/1
0% Functions 0/1
0% Lines 0/69
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { Suspense } from 'react'
import { css } from '../../../styled-system/css'
import { HERO_COMPONENTS } from '@/lib/blog/heroComponentRegistry'

interface HeroComponentBannerProps {
  componentId: string
}

export function HeroComponentBanner({ componentId }: HeroComponentBannerProps) {
  const entry = HERO_COMPONENTS[componentId]
  if (!entry) {
    return (
      <div
        data-element="hero-component-error"
        className={css({
          position: 'relative',
          width: '100%',
          aspectRatio: { base: '16 / 9', md: '2.4 / 1' },
          overflow: 'hidden',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          bg: 'bg.muted',
          color: 'text.muted',
          fontSize: '0.875rem',
        })}
      >
        Unknown component: {componentId}
      </div>
    )
  }

  const Component = entry.component

  return (
    <div
      data-element="hero-component-banner"
      className={css({
        position: 'relative',
        width: '100%',
        aspectRatio: { base: '16 / 9', md: '2.4 / 1' },
        overflow: 'hidden',
      })}
    >
      <Suspense
        fallback={
          <div
            className={css({
              width: '100%',
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              bg: 'bg.muted',
              color: 'text.muted',
              fontSize: '0.875rem',
            })}
          >
            Loading...
          </div>
        }
      >
        <Component />
      </Suspense>
    </div>
  )
}