feat: main

remix/app/components/Thingtime/Thingtime.tsx

@@ -222,7 +222,7 @@ export const Thingtime = (props) => {
     return props?.path?.human || ""
   }, [props?.path])
 
-  const path = React.useMemo(() => {
+  const renderedPath = React.useMemo(() => {
     if (humanPath?.includes?.("hidden")) {
       return null
     }
@@ -230,6 +230,11 @@ export const Thingtime = (props) => {
       // take only path from before the string unique
       return humanPath.split?.("unique")?.[0]
     }
+
+    return humanPath
+  }, [humanPath])
+
+  const path = React.useMemo(() => {
     return (
       <Flex
         maxWidth="100%"
@@ -237,10 +242,10 @@ export const Thingtime = (props) => {
         fontSize="12px"
         wordBreak="break-all"
       >
-        {humanPath}
+        {renderedPath}
       </Flex>
     )
-  }, [humanPath, pl, props?.pathPl])
+  }, [renderedPath, pl, props?.pathPl])
 
   const handleMouseEvent = React.useCallback(
     (e) => {

remix/app/components/Thingtime/ThingtimeDemo.tsx

@@ -39,9 +39,9 @@ export const ThingtimeDemo = (props) => {
         name: "three",
       },
     ],
-    "...unique1": "I'm unique",
-    "...unique2": "I'm unique",
-    "...unique3": "I'm unique",
+    "Identical Keys unique1": "I'm unique 1",
+    "Identical Keys unique2": "I'm unique 2",
+    "Identical Keys unique3": "I'm unique 3",
   }
 
   const [demoThing, setDemoThing] = React.useState(thing)