Spaces:
Running
Running
File size: 1,916 Bytes
4a90775 fd164b2 4a90775 fd164b2 4a90775 |
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 |
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;
|