Minor transition improvements to search input component

components/search-input/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FunctionComponent, SetStateAction } from "react";
+import { Dispatch, FunctionComponent, SetStateAction, useState } from "react";
 
 import styled from "styled-components";
 import color from "../../styles/color";
@@ -13,9 +13,11 @@ interface Props {
 export const SearchInput: FunctionComponent<Props> = (props) => {
   const { searchValue, setSearchValue } = props;
 
+  const [isFocused, setIsFocused] = useState(false);
+
   return (
     <SearchContainer>
-      <SearchIconContainer>
+      <SearchIconContainer focused={isFocused}>
         <SearchIcon />
       </SearchIconContainer>
 
@@ -26,6 +28,12 @@ export const SearchInput: FunctionComponent<Props> = (props) => {
         onChange={(event) => {
           setSearchValue(event.target.value);
         }}
+        onFocus={() => {
+          setIsFocused(true);
+        }}
+        onBlur={() => {
+          setIsFocused(false);
+        }}
       />
     </SearchContainer>
   );
@@ -44,11 +52,19 @@ const SearchContainer = styled.div`
   background-color: ${color.grey["700"]};
 `;
 
-const SearchIconContainer = styled.div`
+const SearchIconContainer = styled.div<{
+  focused: boolean;
+}>`
   position: relative;
 
-  width: 1.3rem;
+  width: ${({ focused }) => (focused ? 0 : "1.3rem")};
   height: 1.3rem;
+
+  transition: width 0.2s ease-out;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const SearchText = styled.input`
@@ -75,5 +91,10 @@ const SearchText = styled.input`
     outline: none;
 
     width: 10rem;
+
+    ::placeholder,
+    ::-webkit-input-placeholder {
+      color: ${color.grey["600"]};
+    }
   }
 `;