dx4 v2

src/trash/editorTable.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   DndContext,
   closestCenter,
@@ -155,6 +155,7 @@ function SortableRow({
   onDuplicate,
   setFocusEdit,
   setHoverEdit,
+  pickmeMode,
 }) {
   const {
     attributes,
@@ -175,7 +176,9 @@ function SortableRow({
     <div
       ref={setNodeRef}
       style={style}
-      className="bg-zinc-900 bg-grain rounded-lg mb-2"
+      className={`${
+        pickmeMode ? "bg-pink-500/35" : "bg-zinc-900"
+      } bg-grain rounded-lg mb-2`}
     >
       <div className="flex flex-col gap-2">
         <div className="flex">
@@ -188,7 +191,11 @@ function SortableRow({
               wrap="hard"
               rows={1}
               onChange={(e) => onUpdate(item.id, col.key, e.target.value)}
-              className={`px-1 py-3 text-center bg-transparent text-white border-r border-zinc-700 last:border-r-0 last:rounded-tr-lg focus:outline-none focus:bg-gray-700/50 placeholder-gray-500 transition-colors hover:bg-gray-700/20 first:rounded-tl-lg max-h-min resize-none block min-w-0 grow ${col.width}`}
+              className={`px-1 py-3 text-center bg-transparent text-white border-r  ${
+                pickmeMode ? "border-pink-400/50" : "border-zinc-700"
+              }  last:border-r-0 last:rounded-tr-lg focus:outline-none focus:bg-gray-700/50 placeholder-gray-500 transition-colors hover:bg-gray-700/20 first:rounded-tl-lg max-h-min resize-none block min-w-0 grow ${
+                col.width
+              }`}
               placeholder={col.placeholder}
               onFocus={() => setFocusEdit(col.key)}
               onBlur={() => setFocusEdit(null)}
@@ -244,6 +251,7 @@ export function TableEditor({
   adminId,
   date,
   dengiCash,
+  pickmeMode = false,
 }) {
   const [items, setItems] = useState(initialData);
   const [undoItems, setUndoItems] = useState([]);
@@ -553,7 +561,9 @@ export function TableEditor({
 
                   <span
                     key={col.key + i + "divider"}
-                    className="w-4 h-[1px] bg-zinc-600 -rotate-45 last:hidden"
+                    className={`w-4 h-[1px] ${
+                      pickmeMode ? "bg-pink-600" : "bg-zinc-600"
+                    } -rotate-45 last:hidden`}
                   />
                 </>
               ))}
@@ -585,6 +595,7 @@ export function TableEditor({
                             onDuplicate={handleDuplicate}
                             setFocusEdit={setFocusEdit}
                             setHoverEdit={setHoverEdit}
+                            pickmeMode={pickmeMode}
                           />
                         </motion.div>
                       ))}
@@ -600,7 +611,9 @@ export function TableEditor({
                             opacity: 1,
                             scale: 1,
                           }}
-                          className="border-2 border-dashed border-gray-700 rounded-lg p-12 text-center text-gray-500"
+                          className={`border-2 border-dashed ${
+                            pickmeMode ? "border-pink-700" : "border-gray-700"
+                          } rounded-lg p-12 text-center text-gray-500`}
                         >
                           пусто
                         </motion.div>