holy-flavor-rater/frontend/src/components/RichText.tsx

import React from "react";
import { Link } from "react-router-dom";
import { useTheme, alpha } from "@mui/material";

interface RichTextProps {
  text: string;
}

const RichText: React.FC<RichTextProps> = ({ text }) => {
  const theme = useTheme();

  if (!text) return null;

  const parts = text.split(/(@\w+)/g);
  return (
    <span>
      {parts.map((part, i) => {
        if (part.startsWith("@")) {
          const username = part.substring(1);
          return (
            <Link
              key={i}
              to={`/profile/${username}`}
              style={{
                color: theme.palette.primary.main,
                textDecoration: "none",
                fontWeight: "bold",
                backgroundColor: alpha(theme.palette.primary.main, 0.1),
                padding: "0 4px",
                borderRadius: "4px",
              }}
            >
              {part}
            </Link>
          );
        }
        return part;
      })}
    </span>
  );
};

export default RichText;