components.tsx 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. // @ts-nocheck
  2. import React from "react"
  3. import { Font, Text as JEText, type TextProps } from "@jsx-email/all"
  4. import { baseText } from "./styles"
  5. export function Text(props: TextProps) {
  6. return <JEText {...props} style={{ ...baseText, ...props.style }} />
  7. }
  8. export function Title({ children }: TitleProps) {
  9. return React.createElement("title", null, children)
  10. }
  11. export function A({ children, ...props }: AProps) {
  12. return React.createElement("a", props, children)
  13. }
  14. export function Span({ children, ...props }: SpanProps) {
  15. return React.createElement("span", props, children)
  16. }
  17. export function Wbr({ children, ...props }: WbrProps) {
  18. return React.createElement("wbr", props, children)
  19. }
  20. export function Fonts({ assetsUrl }: { assetsUrl: string }) {
  21. return (
  22. <>
  23. <Font
  24. fontFamily="JetBrains Mono"
  25. fallbackFontFamily="monospace"
  26. webFont={{
  27. url: `${assetsUrl}/JetBrainsMono-Regular.woff2`,
  28. format: "woff2",
  29. }}
  30. fontWeight="400"
  31. fontStyle="normal"
  32. />
  33. <Font
  34. fontFamily="JetBrains Mono"
  35. fallbackFontFamily="monospace"
  36. webFont={{
  37. url: `${assetsUrl}/JetBrainsMono-Medium.woff2`,
  38. format: "woff2",
  39. }}
  40. fontWeight="500"
  41. fontStyle="normal"
  42. />
  43. <Font
  44. fontFamily="Rubik"
  45. fallbackFontFamily={["Helvetica", "Arial", "sans-serif"]}
  46. webFont={{
  47. url: `${assetsUrl}/rubik-latin.woff2`,
  48. format: "woff2",
  49. }}
  50. fontWeight="400 500 600 700"
  51. fontStyle="normal"
  52. />
  53. </>
  54. )
  55. }
  56. export function SplitString({ text, split }: { text: string; split: number }) {
  57. const segments: JSX.Element[] = []
  58. for (let i = 0; i < text.length; i += split) {
  59. segments.push(<>{text.slice(i, i + split)}</>)
  60. if (i + split < text.length) {
  61. segments.push(<Wbr key={`${i}wbr`} />)
  62. }
  63. }
  64. return <>{segments}</>
  65. }