feat: add NewInput component and EditTable modal to enhance form functionality in DesktopCard

src/components/DesktopCard.tsx

@@ -8,7 +8,7 @@ import FlashIcon from "./icons/FlashIcon";
 import CogIcon from "./icons/CogIcon";
 import ChevronLeftIcon from "./icons/ChevronLeftIcon";
 import PlusIcon from "./icons/PlusIcon";
-
+import EditTable from "./modals/EditTable";
 interface IDesktopCardProps {
   server: IServer;
 }
@@ -51,6 +51,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
           variant='secondary'
           size='medium'
           className='absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center'
+          onClick={() => setModal(<EditTable />)}
         >
           <span className='text-[#7D7D7D] w-[0.972vw] h-[0.972vw]'>
             <CogIcon />

src/components/NewInput.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+
+interface NewInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  placeholder?: string;
+  isError?: boolean;
+  errorMessage?: string;
+}
+
+function NewInput({
+  placeholder,
+  isError,
+  errorMessage,
+  ...props
+}: NewInputProps) {
+  return (
+    <div className='relative'>
+      <div className='relative'>
+        <input
+          {...props}
+          placeholder=''
+          className={clsx(
+            isError
+              ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
+              : "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
+            "peer bg-[#F6F6F6] rounded-xl px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent  transition-all inline-block w-full h-[3.889vw] text-s"
+          )}
+        />
+        {placeholder && (
+          <span
+            className='absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 
+              peer-focus:caption-xs peer-focus:font-medium peer-focus:top-[0.556vw] peer-focus:translate-y-0
+              peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:font-medium peer-[:not(:placeholder-shown)]:top-[0.278vw] peer-[:not(:placeholder-shown)]:translate-y-0'
+          >
+            {placeholder}
+          </span>
+        )}
+        {isError && (
+          <p className='caption-s font-medium text-[#FF4517] mt-[0.556vw]'>
+            {errorMessage}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default NewInput;

src/components/modals/EditTable.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import NewInput from "../NewInput";
+
+function EditTable() {
+  const [name, setName] = useState("");
+  return (
+    <div className='bg-[#F0F0F0] rounded-4xl w-[25vw] flex flex-col justify-center items-center'>
+      <h3 className='title-s font-medium'>Редатирование стола</h3>
+      <div className='bg-[url("/images/Table.png")] bg-no-repeat bg-contain bg-center w-full h-[6.944vw]'></div>
+      <div className='bg-[#FFFFFF] w-full rounded-4xl p-[1.389vw]'>
+        <NewInput
+          placeholder='Название стола*'
+          className='w-full h-[3.889vw]'
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          isError={name.length > 20}
+          errorMessage='Что-то пошло не так'
+        />
+      </div>
+    </div>
+  );
+}
+
+export default EditTable;