Highlight Text

import { Highlight } from "@/ui/highlight";

const text = "Pass the main string as children to Highlight component and string part that should be highlighted to highlight prop.";

export function HighlightDemo() {
  return (
    <div>
      <Highlight highlight="highlight" text={text} className="text-justify" />
      <Highlight highlight="highlight" className="text-justify">
        If the main string does not contain the highlighted part, it is left alone. The highlighted part is only the string of characters that have a matching
        sequence, whitespace is not included.
      </Highlight>
      <Highlight highlight="highlight" className="text-justify" styles={styles}>
        You can change styles of highlighted part if you do not like default styles.
      </Highlight>
    </div>
  );
}

const styles = {
  highlight: {
    backgroundImage: "linear-gradient(45deg, #fcc419, #0cb2cb, #5c7cfa)",
    fontWeight: "700",
    backgroundClip: "text",
    WebkitTextFillColor: "transparent"
  } as React.CSSProperties
};