'init'

app/components/InputCustomPlaceholder/InputCustomPlaceholder.tsx

@@ -0,0 +1,78 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { Flex, Input, Text } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { forwardRef, useState } from "react";
+
+interface InputCustomPlaceholderProps {
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: () => void;
+}
+
+const InputCustomPlaceholder = forwardRef<HTMLDivElement, InputCustomPlaceholderProps>((props: InputCustomPlaceholderProps, ref) => {
+    const colors = useRosettaColors();
+    const [isFocused, setIsFocused] = useState(false);
+    const [value, setValue] = useState("");
+
+    const handleFocus = () => setIsFocused(true);
+
+    const handleBlur = () => {
+        setIsFocused(false);
+        setValue("");
+        if (props.onBlur) props.onBlur();
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.currentTarget.value);
+        if (props.onChange) props.onChange(e);
+    }
+
+    return (
+        <div ref={ref} style={{ width: '100%', position: 'relative' }}>
+            <div
+                style={{
+                    position: 'absolute',
+                    inset: 0,
+                    pointerEvents: 'none',
+                }}
+            >
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: '50%',
+                        transform: isFocused ? 'translateY(-50%) translateX(0)' : 'translateY(-50%) translateX(-50%)',
+                        left: isFocused ? 8 : '50%',
+                        transition: 'left 180ms ease, transform 180ms ease, opacity 180ms ease',
+                        width: 'auto',
+                        opacity: isFocused ? 0.85 : 1,
+                    }}
+                >
+                    <Input.Placeholder>
+                        <Flex align={'center'} gap={5}>
+                            <IconSearch stroke={1.3} size={16} />
+                            <Text style={{
+                                transition: 'opacity 180ms ease',
+                                opacity: isFocused ? 0 : 1,
+                                userSelect: 'none'
+                            }} size="xs" c="dimmed">
+                                Search
+                            </Text>
+                        </Flex>
+                    </Input.Placeholder>
+                </div>
+            </div>
+            <Input
+                size="xs"
+                variant="unstyled"
+                w={'100%'}
+                pl={'xl'}
+                style={{ caretColor: colors.chevrons.active }}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                value={value}
+            />
+        </div>
+    );
+});
+
+export default InputCustomPlaceholder;