Merge branch 'main' of http://192.168.1.163:3000/inmake/graff-mate-client

src/components/NewSelect.tsx

@@ -4,18 +4,25 @@ import ChevronUpIcon from "./icons/ChevronUpIcon";
 import clsx from "clsx";
 import CloseIcon from "./icons/CloseIcon";
 import Button from "./Button";
+import CheckIcon from "./icons/CheckIcon";
+import { useClickAway } from "@uidotdev/usehooks";
 
 function NewSelect<T extends { name: string }>({
   data,
   isGrid,
   placeholder,
+  resetTitle,
 }: {
   data: T[];
   isGrid: boolean;
   placeholder: string;
+  resetTitle: string;
 }) {
   const [selectedValues, setSelectedValues] = useState<T[]>([]);
   const [isSelectVisible, setIsSelectVisible] = useState(false);
+  const selectRef = useClickAway<HTMLDivElement>(() => {
+    setIsSelectVisible(false);
+  });
 
   const handleSelectClick = (item: T) => {
     const isItemSelected = selectedValues.some((val) => val.name === item.name);
@@ -33,16 +40,11 @@ function NewSelect<T extends { name: string }>({
     console.log(selectedValues);
   }, [selectedValues]);
 
-  return isGrid ? (
-    <div className="w-[19.583vw] rounded-[0.833vw]">
-      <div className="grid grid-cols-3 gap[0.139vw]">
-        {data.map((item) => (
-          <div key={item.name}>{item.name}</div>
-        ))}
-      </div>
-    </div>
-  ) : (
-    <div className="relative w-[19.583vw] bg-white rounded-[0.833vw] select-none">
+  return (
+    <div
+      className="relative w-[19.583vw] bg-white rounded-[0.833vw] select-none"
+      ref={selectRef}
+    >
       <div
         className={clsx(
           "flex items-center justify-between px-[1.111vw] py-[1.285vw] hover:bg-[#F0F0F0] rounded-[0.833vw] cursor-pointer",
@@ -52,14 +54,14 @@ function NewSelect<T extends { name: string }>({
         )}
         onClick={() => setIsSelectVisible(!isSelectVisible)}
       >
-        <div className="button-m font-medium text-ellipsis line-clamp-1">
+        <div className="button-m font-medium text-ellipsis line-clamp-1 flex-1">
           {selectedValues.length > 0
             ? selectedValues.map(({ name }) => name).join(", ")
             : placeholder}
         </div>
         <span
           className={clsx(
-            "w-[1.389vw] h-[1.389vw] flex items-center justify-center ",
+            "w-[1.389vw] h-[1.389vw] flex items-center justify-center",
             isSelectVisible ? "text-[#7B60F3]" : "text-[#7D7D7D]"
           )}
         >
@@ -73,33 +75,69 @@ function NewSelect<T extends { name: string }>({
         )}
       >
         <div
-          className="flex flex-col gap-[0.278vw] px-[0.833vw] pb-[0.833vw] w-full bg-white rounded-[0.833vw] max-h-[300px] overflow-auto"
+          className="flex flex-col gap-[0.278vw] px-[0.833vw] pb-[0.833vw] w-full bg-white rounded-[0.833vw] max-h-[13.889vw] overflow-auto"
           style={{
             boxShadow: "0px 4px 40px 0px #0000000D, 0px 2px 2px 0px #0000000D",
           }}
         >
-          <div className="bg-white sticky top-0 pt-[0.833vw]">
+          <div className="bg-white sticky top-0 pt-[0.833vw] z-1">
             <Button
               variant="secondary"
-              className="!justify-start w-full text-s font-medium p-[0.833vw] text-[#7D7D7D] flex items-center gap-[0.278vw] cursor-pointer rounded-[0.278vw] hover:bg-[#F6F6F6]"
+              className="!justify-start w-full text-s font-medium p-[0.833vw] text-[#7D7D7D] flex items-center gap-[0.278vw] cursor-pointer rounded-[0.278vw] hover:bg-[#F6F6F6] bg-white"
               onClick={() => setSelectedValues([])}
             >
               <span className="size-[1.111vw] flex items-center justify-center">
                 <CloseIcon />
               </span>
-              Выбрать всё
+              {resetTitle}
             </Button>
           </div>
-          <div className="h-[1px] w-full bg-[#F6F6F6]" />
-          {data.map((item, index) => (
-            <div
-              key={index}
-              className="w-full p-[0.833vw] text-s rounded-[0.278vw] hover:bg-[#F6F6F6] cursor-pointer"
-              onClick={() => handleSelectClick(item)}
-            >
-              {item.name}
+          <div className="min-h-[1px] w-full bg-[#F6F6F6]" />
+          {isGrid ? (
+            <div className="grid grid-cols-3 gap-[0.139vw]">
+              {data.map((item) => (
+                <div
+                  key={item.name}
+                  className=" p-[0.556vw] flex flex-col gap-[0.278vw] justify-center items-center cursor-pointer rounded-[0.278vw] hover:bg-[#F6F6F6]"
+                  onClick={() => handleSelectClick(item)}
+                >
+                  <div className="relative size-[2.222vw] rounded-full bg-[#d4d4d4]">
+                    {selectedValues
+                      .map((value) => value.name)
+                      .includes(item.name) && (
+                      <span className="absolute bottom-[1.389vw] left-[1.389vw] rounded-full size-[1.111vw] bg-[#7B60F3] text-white flex items-center justify-center">
+                        <div className="size-[0.833vw]">
+                          <CheckIcon />
+                        </div>
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-s font-medium">{item.name}</p>
+                </div>
+              ))}
             </div>
-          ))}
+          ) : (
+            <>
+              {data.map((item, index) => (
+                <div
+                  key={index}
+                  className="flex gap-[0.278vw] w-full p-[0.833vw] text-s rounded-[0.278vw] hover:bg-[#F6F6F6] cursor-pointer"
+                  onClick={() => handleSelectClick(item)}
+                >
+                  <div className="size-[1.111vw]">
+                    {selectedValues
+                      .map((value) => value.name)
+                      .includes(item.name) && (
+                      <span className="text-[#7B60F3]">
+                        <CheckIcon />
+                      </span>
+                    )}
+                  </div>
+                  {item.name}
+                </div>
+              ))}
+            </>
+          )}
         </div>
       </div>
     </div>

src/pages/DashboardPage.tsx

@@ -61,22 +61,43 @@ function DashboardPage() {
           </div>
         </div>
       </div>
-      <NewSelect
-        data={[
-          { name: "test" },
-          { name: "test2" },
-          { name: "test3" },
-          { name: "test4" },
-          { name: "test5" },
-          { name: "test6" },
-          { name: "test7" },
-          { name: "test8" },
-          { name: "test9" },
-          { name: "test10" },
-        ]}
-        isGrid={false}
-        placeholder="Выберите сервер"
-      />
+      <div className="flex">
+        <NewSelect
+          data={[
+            { name: "test" },
+            { name: "test2" },
+            { name: "test3" },
+            { name: "test4" },
+            { name: "test5" },
+            { name: "test6" },
+            { name: "test7" },
+            { name: "test8" },
+            { name: "test9" },
+            { name: "test10" },
+          ]}
+          isGrid={false}
+          placeholder="Выберите сервер"
+          resetTitle="Все сервера"
+        />
+        <NewSelect
+          data={[
+            { name: "test" },
+            { name: "test2" },
+            { name: "test3" },
+            { name: "test4" },
+            { name: "test5" },
+            { name: "test6" },
+            { name: "test7" },
+            { name: "test8" },
+            { name: "test9" },
+            { name: "test10" },
+          ]}
+          isGrid
+          placeholder="Выберите сервер"
+          resetTitle="Все сервера"
+        />
+      </div>
+
       <div className="w-full">
         <div className="flex flex-col gap-[1.667vw]">
           <h1 className="title-l font-[500] ">Последние сеансы</h1>