client/src/components/PageTitle/PageTitle.jsx

import React from "react";
import { Box, Typography } from "@mui/material";
import crown from "../../assets/crown.svg";

const PageTitle = () => {
  const text = "Leaderboards on the Hub";
  const words = text.split(" ");

  // Find the position of the first 'd'
  const firstDIndex = text.toLowerCase().indexOf("d");

  let letterCount = 0;

  return (
    <Typography
      fontWeight="900"
      variant="h3"
      component="h1"
      color="text.primary"
      sx={{
        display: "flex",
        justifyContent: "center",
        flexWrap: "wrap",
      }}
    >
      {words.map((word, wordIndex) => (
        <span
          key={wordIndex}
          style={{ position: "relative", whiteSpace: "nowrap" }}
        >
          {word.split("").map((letter, letterIndex) => {
            const isFirstD = letterCount === firstDIndex;
            letterCount++;
            return (
              <span
                key={letterIndex}
                style={{
                  display: "inline",
                  position: "relative",
                }}
              >
                {isFirstD && (
                  <Box
                    component="img"
                    src={crown}
                    alt=""
                    sx={{
                      position: "absolute",
                      top: "0px",
                      left: "21px",
                      transform: "translateX(-50%)",
                      width: "13px",
                      filter: (theme) =>
                        theme.palette.mode === "dark"
                          ? "invert(1) brightness(2)"
                          : "none",
                    }}
                  />
                )}
                {letter}
              </span>
            );
          })}
          {wordIndex < words.length - 1 && "\u00A0"}
        </span>
      ))}
    </Typography>
  );
};

export default PageTitle;