feat: enhance styled input component

src/shared/ui/styled-input/styled-input.module.css

@@ -6,7 +6,7 @@
     content: '';
     position: absolute;
     top: 1px;
-    right: 40px;
+    right: 1px;
     bottom: 1px;
     width: 60px;
     background: linear-gradient(to right, transparent, rgba(22, 27, 35, 0.95));
@@ -23,7 +23,8 @@
     color: var(--mantine-color-gray-3);
     padding-block: 12px;
     padding-inline: 16px;
-    padding-right: 48px;
+    padding-right: 6px;
+    padding-left: 32px;
     height: auto;
     min-height: unset;
     line-height: 1.5;
@@ -42,3 +43,25 @@
     border-color: rgba(34, 211, 238, 0.4);
     outline: none;
 }
+
+.icon {
+    opacity: 0.6;
+    cursor: pointer;
+    animation: iconEnter 150ms ease;
+    transition: opacity 150ms ease;
+}
+
+.icon:hover {
+    opacity: 1;
+}
+
+@keyframes iconEnter {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 0.6;
+        transform: scale(1);
+    }
+}

src/shared/ui/styled-input/styled-input.tsx

@@ -1,4 +1,5 @@
-import { CloseButton, Input } from '@mantine/core'
+import { IconWriting, IconX } from '@tabler/icons-react'
+import { Input } from '@mantine/core'
 
 import styles from './styled-input.module.css'
 
@@ -19,6 +20,8 @@ export function StyledInput({
     label,
     size = 'sm'
 }: StyledInputProps) {
+    const hasValue = Boolean(value)
+
     return (
         <Input.Wrapper description={description} label={label} size={size}>
             <Input
@@ -26,19 +29,21 @@ export function StyledInput({
                     input: styles.input,
                     wrapper: styles.wrapper
                 }}
-                onChange={(e) => onChange(e.target.value)}
-                placeholder={placeholder}
-                rightSection={
-                    value && (
-                        <CloseButton
-                            aria-label="Clear input"
+                leftSection={
+                    hasValue ? (
+                        <IconX
+                            className={styles.icon}
+                            color="white"
                             onClick={() => onChange('')}
-                            size="sm"
-                            variant="transparent"
+                            size={20}
                         />
+                    ) : (
+                        <IconWriting className={styles.icon} size={20} />
                     )
                 }
-                rightSectionPointerEvents="all"
+                leftSectionPointerEvents="all"
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={placeholder}
                 value={value}
             />
         </Input.Wrapper>