Add new mitigation page

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/components/EditableField.tsx

@@ -0,0 +1,66 @@
+import { HelpCircle } from "lucide-react";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { Input } from "./ui/input";
+import { cn } from "@/lib/utils";
+
+export function EditableField({
+  label,
+  value,
+  onChange,
+  type = "text",
+  helpText,
+  required,
+  multiline = false,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: string;
+  helpText?: string;
+  required?: boolean;
+  multiline?: boolean;
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Label htmlFor={label} className="text-sm font-medium">
+          {label}
+          {required && <span className="text-red-500">*</span>}
+        </Label>
+        {helpText && (
+          <div className="relative flex items-center">
+            <HelpCircle className="h-4 w-4 text-muted-foreground" />
+            <span className="sr-only">{helpText}</span>
+          </div>
+        )}
+      </div>
+      {multiline ? (
+        <Textarea
+          id={label}
+          value={value}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            onChange(e.target.value)
+          }
+          className={cn(
+            "w-full resize-none",
+            required && !value && "border-red-500"
+          )}
+          placeholder={`Enter ${label.toLowerCase()}`}
+          rows={4}
+        />
+      ) : (
+        <Input
+          id={label}
+          type={type}
+          value={value}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            onChange(e.target.value)
+          }
+          className={cn("w-full", required && !value && "border-red-500")}
+          placeholder={`Enter ${label.toLowerCase()}`}
+        />
+      )}
+    </div>
+  );
+}

apps/console/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -31,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -50,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  },
+  }
 );
 Button.displayName = "Button";