new devtools ui

Author: prc5

components/ProjectCard.tsx

@@ -0,0 +1,21 @@
+interface ProjectCardProps {
+  project: {
+    // ... existing project props ...
+    isOnline?: boolean; // Add this new prop
+  };
+}
+
+export function ProjectCard({ project }: ProjectCardProps) {
+  return (
+    <div className={`relative rounded-lg border p-4 ${!project.isOnline ? "opacity-60" : ""}`}>
+      {project.isOnline && (
+        <div className="absolute top-2 right-2">
+          <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
+            Online
+          </span>
+        </div>
+      )}
+      // ... existing card content ...
+    </div>
+  );
+}

examples/adjusted-react-app/project.json

@@ -5,6 +5,22 @@
   "projectType": "application",
   "tags": [],
   "targets": {
+    "app-build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/examples/adjusted-react-app"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
     "run": {
       "executor": "@nx/vite:dev-server",
       "defaultConfiguration": "development",

examples/react-app/project.json

@@ -5,6 +5,22 @@
   "projectType": "application",
   "tags": [],
   "targets": {
+    "app-build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/examples/adjusted-react-app"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
     "run": {
       "executor": "@nx/vite:dev-server",
       "defaultConfiguration": "development",

packages/devtools/package.json

@@ -55,6 +55,7 @@
     "@hyper-fetch/devtools-plugin": "*",
     "@hyper-fetch/react": "*",
     "@hyper-fetch/sockets": "*",
+    "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.1.3",
@@ -64,7 +65,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",

packages/devtools/src/frontend/components/alert/alert.tsx

@@ -1,26 +1,9 @@
-import { tokens } from "frontend/theme/tokens";
-import { createStyles } from "frontend/theme/use-styles.hook";
-
-const styles = createStyles(({ isLight, css }) => {
-  return {
-    base: css`
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-      gap: 5px;
-      border-bottom: 1px solid ${isLight ? tokens.colors.light[400] : tokens.colors.dark[400]};
-      background: ${isLight ? tokens.colors.light[100] : tokens.colors.dark[700]};
-      padding: 4px;
-    `,
-  };
-});
-
 export const Bar = ({ children, className, ...props }: React.HTMLProps<HTMLDivElement>) => {
-  const css = styles.useStyles();
-
   return (
-    <div {...props} className={css.clsx(css.base, className)}>
+    <div
+      {...props}
+      className={`flex flex-wrap items-center justify-between gap-[5px] border-b p-1 dark:border-dark-400 border-light-400 dark:bg-dark-700 bg-light-100 ${className || ""}`}
+    >
       {children}
     </div>
   );