feat: add component to display strings truncated in the middle

Author: aaronbassett

apps/developer-hub/src/components/TruncateToMiddle/index.module.scss

@@ -0,0 +1,21 @@
+@use "@pythnetwork/component-library/theme";
+
+.truncateToMiddle {
+    &::before, &::after {
+        display: inline-block;
+        overflow: hidden;
+        white-space: pre;
+        max-width: 50%;
+    }
+
+    &::before {
+        content: attr(data-text-start);
+        text-overflow: ellipsis;
+    }
+
+    &::after {
+        content: attr(data-text-end);
+        text-overflow: clip;
+        direction: rtl;
+    }
+}

apps/developer-hub/src/components/TruncateToMiddle/index.tsx

@@ -0,0 +1,11 @@
+import styles from "./index.module.scss";
+
+export type Props = {
+    text: string
+}
+
+const TruncateToMiddle = ({text}: Props) => {
+  return <span className={styles.truncateToMiddle} data-text-start={text.slice(0, Math.floor(text.length/2))} data-text-end={text.slice(Math.floor(text.length/2) * -1)} />
+}
+
+export default TruncateToMiddle