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 | 72x 129x 7x 17x 16x 16x | import { cn } from "@/utils";
import { Link } from "react-router";
import { RHFTextField } from "shared-types";
interface RHFTextDisplayProps {
text: RHFTextField;
index?: number;
}
export const RHFTextDisplay = (props: RHFTextDisplayProps) => {
if (!Array.isArray(props.text)) return props.text;
return props.text.map((t) => {
if (typeof t === "string") return t;
const orderedList = t?.listType === "ordered";
switch (t?.type) {
case "br":
return (
<>
<br /> <span className={t.classname}>{t.text}</span>
</>
);
case "brWrap":
return (
<>
<br /> <span className={t.classname}>{t.text}</span> <br />
</>
);
case "paragraph":
return <p className={cn("bock pb-4", t.classname)}>{t.text}</p>;
case "bold":
return <b className={t.classname}>{t.text}</b>;
case "italic":
return <i className={t.classname}>{t.text}</i>;
case "numberedSet":
return <span className={t.classname}>{`${t.text} ${props.index + 1}`}</span>;
case "link":
return (
<Link to={t.link ?? "/"} className={cn("cursor-pointer text-blue-600 ml-0", t.classname)}>
{t.text}
</Link>
);
case "list":
return (
<>
{orderedList && (
<ol>
{t?.list?.map((l, j) => {
return (
<li key={`listItem.${j}.${l.text}`}>
<RHFTextDisplay text={[l]} />
</li>
);
})}
</ol>
)}
{!orderedList && (
<ul>
{t?.list?.map((l, j) => {
return (
<li key={`listItem.${j}.${l.text}`}>
<RHFTextDisplay text={[l]} />
</li>
);
})}
</ul>
)}
</>
);
default:
return <span className={t.classname}>{t.text}</span>;
}
});
};
|