From f51af47b5181deefc8a909242a7248f7c325bd7a Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 28 Nov 2023 17:12:38 -0500
Subject: [PATCH] fix(striker-ui): add edge prop to inline mono text

---
 striker-ui/components/Text/BodyText.tsx       |  2 +
 striker-ui/components/Text/InlineMonoText.tsx | 37 ++++++++++++-------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/striker-ui/components/Text/BodyText.tsx b/striker-ui/components/Text/BodyText.tsx
index 434727ed..4379f1bd 100644
--- a/striker-ui/components/Text/BodyText.tsx
+++ b/striker-ui/components/Text/BodyText.tsx
@@ -7,6 +7,7 @@ import {
 import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 
 type BodyTextOptionalProps = {
+  edge?: 'start' | 'end' | null;
   inheritColour?: boolean;
   inline?: boolean;
   inverted?: boolean;
@@ -20,6 +21,7 @@ type BodyTextProps = MUITypographyProps & BodyTextOptionalProps;
 const BODY_TEXT_CLASS_PREFIX = 'BodyText';
 
 const BODY_TEXT_DEFAULT_PROPS: Required<BodyTextOptionalProps> = {
+  edge: null,
   inheritColour: false,
   inline: false,
   inverted: false,
diff --git a/striker-ui/components/Text/InlineMonoText.tsx b/striker-ui/components/Text/InlineMonoText.tsx
index 85823d5c..da5161d3 100644
--- a/striker-ui/components/Text/InlineMonoText.tsx
+++ b/striker-ui/components/Text/InlineMonoText.tsx
@@ -1,21 +1,30 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 
 import { BodyTextProps } from './BodyText';
 import SmallText from './SmallText';
 
-const InlineMonoText: FC<BodyTextProps> = ({ sx, ...bodyTextRestProps }) => (
-  <SmallText
-    {...{
-      ...bodyTextRestProps,
-      monospaced: true,
-      sx: {
-        display: 'inline',
-        padding: '.1rem .3rem',
+const InlineMonoText: FC<BodyTextProps> = ({
+  edge,
+  sx,
+  ...bodyTextRestProps
+}) => {
+  const paddingLeft = useMemo(() => (edge === 'start' ? 0 : undefined), [edge]);
 
-        ...sx,
-      },
-    }}
-  />
-);
+  const paddingRight = useMemo(() => (edge === 'end' ? 0 : undefined), [edge]);
+
+  const combinedSx: BodyTextProps['sx'] = useMemo(
+    () => ({
+      display: 'inline',
+      padding: '.1rem .3rem',
+      paddingLeft,
+      paddingRight,
+
+      ...sx,
+    }),
+    [paddingLeft, paddingRight, sx],
+  );
+
+  return <SmallText monospaced sx={combinedSx} {...bodyTextRestProps} />;
+};
 
 export default InlineMonoText;