Added disabled tag to disabled workflow block

app/w/components/workflow-block/workflow-block.tsx

@@ -7,6 +7,7 @@ import { ActionBar } from './components/action-bar/action-bar'
 import { ConnectionBlocks } from './components/connection-blocks/connection-blocks'
 import { useState } from 'react'
 import { useWorkflowStore } from '@/stores/workflow/workflow-store'
+import { Badge } from '@/components/ui/badge'
 
 interface WorkflowBlockProps {
   id: string
@@ -80,14 +81,24 @@ export function WorkflowBlock({
         )}
       />
 
-      <div className="flex items-center gap-3 p-3 border-b workflow-drag-handle cursor-grab [&:active]:cursor-grabbing">
-        <div
-          className="flex items-center justify-center w-7 h-7 rounded"
-          style={{ backgroundColor: isEnabled ? toolbar.bgColor : 'gray' }}
-        >
-          <toolbar.icon className="w-5 h-5 text-white" />
+      <div className="flex items-center justify-between p-3 border-b workflow-drag-handle cursor-grab [&:active]:cursor-grabbing">
+        <div className="flex items-center gap-3">
+          <div
+            className="flex items-center justify-center w-7 h-7 rounded"
+            style={{ backgroundColor: isEnabled ? toolbar.bgColor : 'gray' }}
+          >
+            <toolbar.icon className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-medium text-md">{name}</span>
         </div>
-        <span className="font-medium text-md">{name}</span>
+        {!isEnabled && (
+          <Badge
+            variant="secondary"
+            className="bg-gray-100 text-gray-500 hover:bg-gray-100"
+          >
+            Disabled
+          </Badge>
+        )}
       </div>
 
       <div className="px-4 pt-3 pb-4 space-y-4 cursor-pointer">

components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }