diff --git a/uli-website/src/components/molecules/AppShell.jsx b/uli-website/src/components/molecules/AppShell.jsx index c6df9e73..45359817 100644 --- a/uli-website/src/components/molecules/AppShell.jsx +++ b/uli-website/src/components/molecules/AppShell.jsx @@ -16,7 +16,9 @@ export default function AppShell({ children }) { return ( -
+
Uli @@ -32,7 +34,7 @@ export default function AppShell({ children }) { - {children} + {children} {/* Privacy Policy diff --git a/uli-website/src/pages/check-text.jsx b/uli-website/src/pages/check-text.jsx new file mode 100644 index 00000000..a437de77 --- /dev/null +++ b/uli-website/src/pages/check-text.jsx @@ -0,0 +1,244 @@ +import React from "react"; +import { Box, Text, Button, TextArea, Heading } from "grommet"; +import AppShell from "../components/molecules/AppShell"; +import { useState } from "react"; +import styled from "styled-components"; +import slurMetadata from "../slurs/slurs-metadata.json"; + +const CustomTextArea = styled(TextArea)` + &:focus { + box-shadow: 0 0 0 4px #ffde2155; + } +`; + +export default function Story() { + const [hoveredSlur, setHoveredSlur] = useState(null); + const [input, setInput] = useState(null); + const [displayText, setDisplayText] = useState(""); + + const slurs = slurMetadata; + + const getHighlightedText = (text, words) => { + if (!text) return ""; + + const regex = new RegExp( + `\\b(${words.map((w) => w.label).join("|")})\\b`, + "gi" + ); + + return text.split(regex).map((part, index) => { + const wordData = words.find( + (w) => w.label.toLowerCase() === part.toLowerCase() + ); + + return wordData ? ( + { + setHoveredSlur({ + metadata: wordData, + position: { x: "-9999px", y: "-9999px" }, + }); + + const rect = e.currentTarget.getBoundingClientRect(); + // Settimeout to wait for the re-render. + setTimeout(() => { + let tooltipContainer = + document.getElementById("metadata-tooltip"); + + let position = { + x: rect.left + window.scrollX, + y: rect.bottom + 10 + window.scrollY, + }; + + const screenHeight = window.innerHeight; + const screenWidth = window.innerWidth; + + const tooltipHeight = tooltipContainer.offsetHeight; + + const spaceBelow = screenHeight - rect.bottom; + + if (spaceBelow < tooltipHeight + 10) { + position.y = rect.top - tooltipHeight - 10 + window.scrollY; + } + + if (position.x + 290 > screenWidth) { + position.x = screenWidth - 320 + window.scrollX; + } + + setHoveredSlur({ metadata: wordData, position }); + }, 0); + }} + onMouseLeave={() => setHoveredSlur(null)} + > + {part} + + ) : ( + part + ); + }); + }; + + function onCheck() { + setDisplayText(getHighlightedText(input, slurs)); + } + + return ( + + + Check Text for Slur Metadata + + setInput(e.target.value)} + placeholder="Enter text here to check... " + style={{ + width: "full", + minHeight: "12em", + fontWeight: "400", + padding: "0.5em", + }} + /> + +