stylize version component

hhd-dev · Mar 13, 2024 · 26c2c4a · 26c2c4a
1 parent a3c4ec2
commit 26c2c4a
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/src/components/elements/SettingComponent.tsx b/src/components/elements/SettingComponent.tsx
@@ -11,6 +11,7 @@ import {
   MenuItemOption,
   MenuList,
   MenuOptionGroup,
+  Text,
   Tooltip,
   useColorMode,
 } from "@chakra-ui/react";
@@ -163,9 +164,24 @@ const DisplayComponent: FC<SettingProps> = ({ settings: set, path }) => {
   const { title, tags } = set;
   const { state } = useSettingState<number>(path);
   const error = tags?.includes("error");
+  const version = tags?.includes("hhd-version-display");
 
   if (!state) return <></>;
 
+  if (version) {
+    return (
+      <Code padding="1rem" margin="0.5rem 0.7rem" borderRadius="6px">
+        <Flex
+          justifyContent="space-between"
+          {...(error && { colorScheme: "red" })}
+        >
+          <Text as="b">{title}:</Text>
+          <Text>{state}</Text>
+        </Flex>
+      </Code>
+    );
+  }
+
   return (
     <Code
       padding="1rem"
@@ -174,11 +190,7 @@ const DisplayComponent: FC<SettingProps> = ({ settings: set, path }) => {
       textAlign="center"
       {...(error && { colorScheme: "red" })}
     >
-      <Heading
-        size="md"
-        textAlign="center"
-        paddingBottom="0.5rem"
-      >
+      <Heading size="md" textAlign="center" paddingBottom="0.5rem">
         {title}
       </Heading>
       {state}