@tanstack/router-devtools 0.0.1-beta.99 → 1.0.0

package/src/theme.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 
 export const defaultTheme = {
-  background: '#0b1521',
-  backgroundAlt: '#132337',
+  background: '#222222',
+  backgroundAlt: '#292929',
   foreground: 'white',
-  gray: '#3f4e60',
-  grayAlt: '#222e3e',
+  gray: '#444',
+  grayAlt: '#444',
   inputBackgroundColor: '#fff',
   inputTextColor: '#000',
-  success: '#00ab52',
+  success: '#80cb00',
   danger: '#ff0085',
-  active: '#006bff',
+  active: '#0099ff',
   warning: '#ffb200',
 } as const
 

package/src/utils.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AnyRouteMatch, RouteMatch } from '@tanstack/router'
+import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'
 
 import { Theme, useTheme } from './theme'
 import useMediaQuery from './useMediaQuery'
@@ -26,15 +26,25 @@ type StyledComponent<T> = T extends 'button'
   : never
 
 export function getStatusColor(match: AnyRouteMatch, theme: Theme) {
-  return match.state.status === 'pending'
+  return match.status === 'pending' || match.isFetching
     ? theme.active
-    : match.state.status === 'error'
+    : match.status === 'error'
     ? theme.danger
-    : match.state.status === 'success'
+    : match.status === 'success'
     ? theme.success
     : theme.gray
 }
 
+export function getRouteStatusColor(
+  matches: AnyRouteMatch[],
+  route: AnyRoute | AnyRootRoute,
+  theme: Theme,
+) {
+  const found = matches.find((d) => d.routeId === route.id)
+  if (!found) return theme.gray
+  return getStatusColor(found, theme)
+}
+
 type Styles =
   | React.CSSProperties
   | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)