PageHeaderCard.tsx 2.12 KB
Newer Older
1
import React, { ReactElement } from 'react'
René Rösner's avatar
René Rösner committed
2
3
import { IconBooks } from '@tabler/icons'

David Schwarzmann's avatar
David Schwarzmann committed
4
5
type HeaderOptions = {
  title: string
6
  description: string
David Schwarzmann's avatar
David Schwarzmann committed
7
8
9
10
11
12
13
  img?: {
    src: string
    alt?: string
  }
  children?: ReactElement[]
}

14
export default ({ title, description, img, children }: HeaderOptions) => {
15
16
17
18
19
20
    return (
        <section
            className="bg-white mt-10 lg:mt-32 w-full mx-auto relative z-10 lg:pb-32"
            aria-labelledby="heading"
        >
            <h2 className="sr-only" id="heading">
David Schwarzmann's avatar
David Schwarzmann committed
21
                {title}
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
            </h2>
            <div className="flex flex-col bg-white rounded-b-lg shadow-xl">
                <div className="flex-1 relative pt-24 px-6 pb-8 md:px-8">
                    <div className="h-32 absolute top-0 p-4 inline-block transform -translate-y-1/2">
                        <header className={'flex justify-between space-x-6'}>
                            {img && img.src
                                ? (
                                    <img
                                        className={'w-24 h-24'}
                                        src={img.src}
                                        alt={img.alt}
                                    />
                                )
                                : (
                                    <IconBooks
                                        className={'w-24 h-24'}
                                    />
                                )}
                            <h1 className="p-5 text-3xl lg:text-5xl font-extrabold tracking-tight text-gray-900 overflow-hidden">
                                {title}
                            </h1>
                        </header>
                    </div>
                    <div
                        className="cms-blog-text text-xl text-gray-800 mt-14"
                        dangerouslySetInnerHTML={{ __html: description }}
                    />
                </div>
                <div className="p-6 bg-gray-50 rounded-b-lg md:px-8 flex flex-row items-center gap-16">
                    {children}
                </div>
            </div>
        </section>
    )
David Schwarzmann's avatar
David Schwarzmann committed
56
}