1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73

import { className, el } from "../../dom";
import { fullscreenPanel } from "../fullscreenPanel/fullscreenPanel";

export const styles = /* css */ `
  .em-container {
    margin: 0 auto;
    max-width: calc(var(--font-size) * 30);
    margin-top: calc(var(--font-size) * 2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;

    user-select: text;
  }

  .em-title {
    margin: 0;
    font-size: calc(var(--font-size) * 1.2);
    font-weight: bold;

    color: var(--fg);
  }

  .em-body {
    margin: 0;
    width: 100%;
  }
  .em-body p {
    margin: 0;
    margin-bottom: calc(var(--font-size) * 1);
    font-size: calc(var(--font-size) * 1);

    color: var(--subtle-fg);
  }
  .em-body pre {
    align-self: stretch;
    display: block;
    width: 100%;
    font-family: var(--font-family-mono);
    font-size: calc(var(--font-size) * 0.9);
    padding: 8px;
    tab-size: 2;

    background-color: var(--code-bg);
    border-radius: var(--panel-radii);
    color: var(--code-fg);
    overflow: auto;
  }
`;

type ElementChildren = NonNullable<Parameters<typeof el>[2]>;

interface EmptyProps {
  title: ElementChildren;

  body: ElementChildren;
}

export function empty({ title, body }: EmptyProps): HTMLElement {
  return fullscreenPanel({
    body: [
      el(
        "div",
        [className("em-container")],
        [
          el("p", [className("em-title")], title),
          el("div", [className("em-body")], body),
        ],
      ),
    ],
  });
}