jsonwebtoken.github.io/src/features/common/components/ebook/ebook.component.tsx at 3ea39b0a41edb199265f4c14836b5c7414f5bae8 · jsonwebtoken/jsonwebtoken.github.io · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React from "react";
import styles from "./ebook.module.scss";
import Link from "next/link";
import { BoxComponent } from "@/features/common/components/box/box.component";
import { clsx } from "clsx";
import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
import NextArrow from "@/features/common/assets/arrow-right.svg";

type EbookComponentProps = {
  languageCode: string;
  dictionary: Auth0DictionaryModel["ebook"];
};

export const EbookComponent: React.FC<EbookComponentProps> = ({
  languageCode,
  dictionary,
}) => {
  return (
    <BoxComponent
      containerClassName={styles.container}
      wrapperClassName={styles.wrapper}
      contentClassName={styles.content}
    >
      <pre className={styles.ebookBanner__code}>
        <span>
          {`{\n       "sub"`}
          <span className={styles.ebookBanner__code_dot}>: </span>
          <span
            className={styles.ebookBanner__code_string}
          >{`"1234567890"`}</span>
          <span className={styles.ebookBanner__code_dot}>,</span>
        </span>
        <span>
          {" "}
          {`      "name"`}
          <span className={styles.ebookBanner__code_dot}>: </span>
          <span
            className={styles.ebookBanner__code_string}
          >{`"John Doe"`}</span>
          <span className={styles.ebookBanner__code_dot}>,</span>
        </span>
        <span>
          {" "}
          {`      "admin"`}
          <span className={styles.ebookBanner__code_dot}>: </span>
          <span className={styles.ebookBanner__code_boolean}>true</span>
          <span className={styles.ebookBanner__code_dot}>,</span>
        </span>
        <span>
          {" "}
          {`      "iat"`}
          <span className={styles.ebookBanner__code_dot}>: </span>
          <span className={styles.ebookBanner__code_number}>1516239022</span>
        </span>
        {`}`}
      </pre>
      <div className={styles.ebookBanner__copy}>
        <span
          className={clsx(
            getLocalizedSecondaryFont(languageCode),
            styles.ebookBanner__title
          )}
        >
          {dictionary.title}
        </span>
        <span className={styles.ebookBanner__description}>
          {dictionary.description}
        </span>
        <Link
          className={styles.ebookBanner__link}
          href={dictionary.ctaButton.url}
          target="_blank"
          rel="noreferrer noopener"
        >
          {dictionary.ctaButton.label}
          <div className={styles.ebookBanner__linkIcon}>
            <NextArrow />
          </div>
        </Link>
      </div>
    </BoxComponent>
  );
};