📦 brijeshb42 / emotion-demo

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125"use client";

import * as React from "react";
import { styled } from "@/lib/styled";
import {
  onCLS,
  onFCP,
  onFID,
  onINP,
  onLCP,
  onTTFB,
  type Metric,
} from "web-vitals";

const Tr = styled.tr`
  color: inherit;
  display: table-row;
  vertical-align: middle;
  outline: 0px;
`;

const Tcell = styled.th(({ theme }) => ({
  ...theme.vars.typography.body1,
  padding: 1,
  fontFamily: "monospace",
  textAlign: "center",
  borderBottom: `1px solid ${theme.vars.palette.divider}`,
}));

const STATIC_DATA = [
  {
    name: "First Load JS",
    value: "131 kB",
  },
  {
    name: "HTML Size",
    value: "15.8 kB",
  },
  {
    name: "CSS File Size",
    value: "1.0 kB",
  },
];

export default function Perf() {
  const [metrices, setMetrices] = React.useState<Metric[]>([]);

  React.useEffect(() => {
    onCLS((metric) => {
      setMetrices((m) => m.concat(metric));
    });
    onFID((metric) => {
      setMetrices((m) => m.concat(metric));
    });
    onLCP((metric) => {
      setMetrices((m) => m.concat(metric));
    });
    onFCP((metric) => {
      setMetrices((m) => m.concat(metric));
    });
    onINP((metric) => {
      setMetrices((m) => m.concat(metric));
    });
    onTTFB((metric) => {
      setMetrices((m) => m.concat(metric));
    });
  }, []);

  return (
    <div
      css={{
        position: "fixed",
        bottom: 10,
        right: 0,
        padding: 2,
        border: "1px solid var(--palette-divider)",
        width: 250,
        minHeight: 100,
        maxHeight: 400,
        overflow: "auto",
        backgroundColor: "var(--palette-background-plain)",
      }}
    >
      <table
        css={{
          width: "100%",
          borderCollapse: "collapse",
          display: "table",
          borderSpacing: 0,
        }}
      >
        <thead>
          <Tr>
            <Tcell>
              <strong>Name</strong>
            </Tcell>
            <Tcell>
              <strong>Value</strong>
            </Tcell>
            <Tcell>
              <strong>Rating</strong>
            </Tcell>
          </Tr>
        </thead>
        <tbody>
          {STATIC_DATA.map((metric, index) => (
            <Tr key={index}>
              <Tcell as="td">{metric.name}</Tcell>
              <Tcell as="td">{metric.value}</Tcell>
              <Tcell as="td">-</Tcell>
            </Tr>
          ))}
          {metrices.map((metric, index) => (
            <Tr key={index}>
              <Tcell as="td">{metric.name}</Tcell>
              <Tcell as="td">{metric.value.toFixed(3)}</Tcell>
              <Tcell as="td">{metric.rating}</Tcell>
            </Tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}