changes

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx

@@ -1,10 +1,7 @@
-import { Filter, LayoutGrid, Plus, Search, Table2 } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button, Input } from "@edr/ui-common";
+import { LayoutGrid, Plus, Search, Table2 } from "lucide-react";
+import { Button, TextInput, Group, SegmentedControl } from "@mantine/core";
 
 import type { RuleEngineViewMode } from "./useRuleEngineViewMode";
-import { ruleEngineToolbar } from "./ruleEngineStyles";
 
 export interface RuleEngineToolbarProps {
   search: string;
@@ -25,70 +22,69 @@ const RuleEngineToolbar = ({
   viewMode,
   onViewModeChange,
 }: RuleEngineToolbarProps) => (
-  <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-    <div className="relative min-w-0 flex-1 lg:max-w-md">
-      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
-        type="search"
-        value={search}
-        onChange={(e) => onSearchChange(e.target.value)}
-        placeholder={searchPlaceholder}
-        className={ruleEngineToolbar.search}
+  <Group gap="md" justify="space-between" align="center" wrap="nowrap">
+    <TextInput
+      placeholder={searchPlaceholder}
+      value={search}
+      onChange={(e) => onSearchChange(e.currentTarget.value)}
+      leftSection={<Search size={18} />}
+      size="md"
+      radius="lg"
+      style={{ flex: 1, minWidth: 0 }}
+      styles={{
+        input: {
+          borderColor: "var(--mantine-color-gray-3)",
+        },
+      }}
+    />
+
+    <Group gap="md" align="center" justify="flex-end" wrap="nowrap">
+      <SegmentedControl
+        value={viewMode}
+        onChange={(value) => onViewModeChange(value as RuleEngineViewMode)}
+        size="sm"
+        radius="lg"
+        data={[
+          {
+            value: "table",
+            label: (
+              <Group gap={6} justify="center" wrap="nowrap">
+                <Table2 size={16} />
+                <span>Table</span>
+              </Group>
+            ),
+          },
+          {
+            value: "cards",
+            label: (
+              <Group gap={6} justify="center" wrap="nowrap">
+                <LayoutGrid size={16} />
+                <span>Cards</span>
+              </Group>
+            ),
+          },
+        ]}
+        styles={{
+          root: {
+            background: "var(--mantine-color-gray-1)",
+          },
+        }}
       />
-    </div>
 
-    <div className="flex shrink-0 flex-wrap items-center gap-2">
-      <div
-        className={ruleEngineToolbar.viewToggleGroup}
-        role="group"
-        aria-label="View mode"
-      >
-        <button
-          type="button"
-          onClick={() => onViewModeChange("table")}
-          className={cn(
-            ruleEngineToolbar.viewToggleBtn,
-            viewMode === "table"
-              ? ruleEngineToolbar.viewToggleActive
-              : ruleEngineToolbar.viewToggleIdle,
-          )}
-          aria-pressed={viewMode === "table"}
-        >
-          <Table2 className="h-4 w-4" />
-          Table
-        </button>
-        <button
-          type="button"
-          onClick={() => onViewModeChange("cards")}
-          className={cn(
-            ruleEngineToolbar.viewToggleBtn,
-            viewMode === "cards"
-              ? ruleEngineToolbar.viewToggleActive
-              : ruleEngineToolbar.viewToggleIdle,
-          )}
-          aria-pressed={viewMode === "cards"}
-        >
-          <LayoutGrid className="h-4 w-4" />
-          Cards
-        </button>
-      </div>
-
-      <Button
-        type="button"
-        variant="outline"
-        className={cn(ruleEngineToolbar.actionBtn, "gap-2 px-3")}
-      >
-        <Filter className="h-4 w-4" />
-        Filter
-      </Button>
       {onAdd ? (
-        <Button type="button" className={ruleEngineToolbar.primaryBtn} onClick={onAdd}>
-          <Plus className="h-4 w-4" />
+        <Button
+          onClick={onAdd}
+          leftSection={<Plus size={18} />}
+          size="sm"
+          radius="lg"
+          color="blue"
+          style={{ whiteSpace: "nowrap" }}
+        >
           {addLabel}
         </Button>
       ) : null}
-    </div>
-  </div>
+    </Group>
+  </Group>
 );
 
 export default RuleEngineToolbar;