Format exponent to use superscript

afterdusk · May 5, 2021 · 6a38878 · 6a38878
1 parent 4f19707
commit 6a38878
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/preview.png b/preview.png
diff --git a/src/converter/BitPanel.tsx b/src/converter/BitPanel.tsx
@@ -12,6 +12,11 @@ const Wrapper = styled.div`
   overflow-x: auto;
 `;
 
+const Superscript = styled.sup`
+  line-height: 0;
+  vertical-align: super;
+`;
+
 interface BitPanelProps {
   name: string;
   sign: boolean[];
@@ -27,6 +32,12 @@ interface BitPanelProps {
 }
 
 const BitPanel: FC<BitPanelProps> = (props: BitPanelProps): ReactElement => {
+  const formattedExponentValue = (
+    <>
+      2<Superscript>{props.exponentValue}</Superscript>
+    </>
+  );
+
   return (
     <Wrapper>
       <BitSegment
@@ -40,7 +51,7 @@ const BitPanel: FC<BitPanelProps> = (props: BitPanelProps): ReactElement => {
       />
       <BitSegment
         name="Exponent"
-        value={"2^" + props.exponentValue}
+        value={formattedExponentValue}
         decimal={parseInt(stringifyBits(props.exponent), 2).toFixed()}
         bits={props.exponent}
         updateBits={(bits: boolean[]) =>

diff --git a/src/converter/BitSegment.tsx b/src/converter/BitSegment.tsx
@@ -38,7 +38,7 @@ const BitCheckbox = styled.input``;
 
 interface SegmentProps {
   name: string;
-  value: string;
+  value: string | ReactElement;
   decimal: string;
   bits: boolean[];
   updateBits: (bits: boolean[]) => void;