create ui components

frontend/components/ui/Burger.tsx

@@ -33,7 +33,7 @@ const Burger = () => {
 
       {/* меню */}
       <div
-        className={`fixed left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
+        className={`fixed z-50 left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
           isOpen
             ? 'top-[80px] h-[calc(100vh-80px)] opacity-100 scale-y-100'
             : 'top-[80px] h-0 opacity-0 scale-y-0'

frontend/components/ui/Button.tsx

@@ -5,7 +5,7 @@ const Button = ({ onClick, className, text, type }: ButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className={`${className} text-base font-medium px-4 py-3 text-white bg-orange rounded-2xl cursor-pointer`}
+      className={`text-base font-medium rounded-2xl cursor-pointer ${className}`}
       type={type}
     >
       <span>{text}</span>

frontend/components/ui/TextInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { TextInputProps } from '@/app/types'
+import Tooltip from './Tooltip'
 
 const TextInput = ({
   value,
@@ -10,16 +11,17 @@ const TextInput = ({
   type = 'text',
   className = '',
   maxLength,
+  tooltip,
 }: TextInputProps) => {
   return (
     <div className={className}>
       {label && (
-        <label
-          className="block my-2 font-medium text-sm text-gray-500"
-          htmlFor={name}
-        >
-          {label}
-        </label>
+        <div className="flex items-center gap-2 my-2">
+          <label className="font-medium text-sm text-gray-500" htmlFor={name}>
+            {label}
+          </label>
+          {tooltip && <Tooltip content={tooltip} />}
+        </div>
       )}
       <input
         type={type}
@@ -28,7 +30,7 @@ const TextInput = ({
         placeholder={placeholder}
         value={value || ''}
         onChange={handleChange}
-        className="w-full px-4 py-4 border bg-gray-100 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
+        className="w-full p-4 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
         autoComplete={name}
         maxLength={maxLength}
       />

frontend/components/ui/Tooltip.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useState } from 'react'
+import { CiCircleInfo } from 'react-icons/ci'
+
+interface TooltipProps {
+  content: string | React.ReactNode
+}
+
+const Tooltip = ({ content }: TooltipProps) => {
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  return (
+    <div className="relative flex items-center overflow-visible">
+      <button
+        type="button"
+        className="text-orange hover:text-orange/80 focus:outline-none"
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        onClick={() => setShowTooltip(!showTooltip)}
+      >
+        <CiCircleInfo className="w-4 h-4" />
+      </button>
+      {showTooltip && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 bg-white rounded-xl text-center shadow-lg text-sm text-gray-700 w-max max-w-xs z-10">
+          {content}
+          <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip