Eyebrow Eyebrow.tsx

100% Statements 4/4

33.33% Branches 1/3

100% Functions 1/1

100% Lines 4/4

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 19x
 
 
 
 
 
 
 
 
19x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { PropsWithChildren, ReactElement } from "react";
 
interface EyebrowProps {
  size?: "small" | "medium" | "large";
}
 
const eyebrowStyles: Record<
  Required<EyebrowProps>["size"],
  React.CSSProperties
> = {
  small: {
    fontSize: "12px",
    marginBottom: "0px",
    fontWeight: "400",
    color: "#e5e5e5",
  },
  medium: {
    fontSize: "0.95rem",
    marginBottom: "5px",
    fontWeight: "400",
    color: "#fff",
  },
  large: {
    fontSize: "1.5rem",
    marginBottom: "12px",
    fontWeight: "700",
    color: "#fff",
  },
};
 
export default function Eyebrow({
  children,
  size = "small",
}: PropsWithChildren<EyebrowProps>): ReactElement {
  const eyebrowStyle = eyebrowStyles[size] || eyebrowStyles.large;
 
  return (
    <p
      className="eyebrow"
      style={{
        fontSize: eyebrowStyle.fontSize,
        marginBottom: eyebrowStyle.marginBottom,
        fontWeight: eyebrowStyle.fontWeight,
        color: eyebrowStyle.color,
      }}
    >
      {children}
      <style jsx>
        {`
          .eyebrow {
            margin-top: 4px;
            padding: 0.08em 0px;
          }
        `}
      </style>
    </p>
  );
}