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 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 | 548x 47598x 47598x 41005x 47598x 47598x 47598x 47598x 47598x 47598x 47598x 548x | import React from "react";
import { Typography, TypographyProps } from "@mui/material";
import parse from "html-react-parser";
import { convertMarkdown, ALLOWED_TAGS, ALLOWED_ATTR } from "@utils/index";
import DOMPurify from "dompurify";
export type FontWeight =
| "light"
| "regular"
| "medium"
| "semibold"
| "bold"
| "book";
export interface ITextProps extends TypographyProps {
/**
* Font weight of the text
*/
textRef?: React.RefObject<any>;
fontWeight?: FontWeight | number;
href?: string;
gradient?: string;
useParse?: boolean;
}
export const Text: React.FC<ITextProps> = ({
fontWeight,
variant,
children,
href,
gradient,
textRef,
useParse,
...rest
}) => {
//defaults to regular weight if no fontWeight passed
const fontWeightPassed = !!fontWeight;
if (!fontWeight) {
fontWeight = "regular";
}
// if button or link variant and no fontWeight passed, defaults to medium
const makeMedium =
!fontWeightPassed && (variant === "button" || variant === "buttonSmall");
Iif (makeMedium) {
fontWeight = "medium";
}
const weight =
typeof fontWeight === "number" ? fontWeight : fontWeightsMap[fontWeight];
const linkProps =
variant === "link"
? {
component: "a",
href: href,
}
: {};
const textGradient = gradient
? {
background: gradient,
backgroundClip: "text",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
}
: {};
const content =
children instanceof Date
? children.toLocaleString()
: useParse && typeof children === "string"
? parse(
DOMPurify.sanitize(convertMarkdown(children), {
USE_PROFILES: { html: true },
ALLOWED_TAGS,
ALLOWED_ATTR,
}),
)
: children;
return (
<Typography
ref={textRef}
{...linkProps}
fontWeight={weight}
variant={variant}
{...rest}
sx={{
...textGradient,
...rest.sx,
}}
>
{content}
</Typography>
);
};
const fontWeightsMap = {
light: 300,
book: 350,
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
};
|