use FC instead of FunctionalComponent

components/core/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Avatar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Avatar: FunctionComponent<Props> = ({ className }) => {
+const Avatar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/core/Featurebar/Featurebar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Featurebar.module.css'
 
 interface Props {
@@ -8,11 +8,7 @@ interface Props {
   description: string
 }
 
-const Featurebar: FunctionComponent<Props> = ({
-  title,
-  description,
-  className,
-}) => {
+const Featurebar: FC<Props> = ({ title, description, className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/core/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Footer.module.css'
 import { Container } from '@components/ui'
 
@@ -8,7 +8,7 @@ interface Props {
   children?: any
 }
 
-const Footer: FunctionComponent<Props> = ({ className }) => {
+const Footer: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <footer className={rootClassName}>

components/core/Layout/Layout.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Layout.module.css'
 import { Navbar, Featurebar } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
@@ -11,7 +11,7 @@ interface Props {
   children?: any
 }
 
-const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
+const CoreLayout: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   const { displaySidebar } = useUI()
 
@@ -34,7 +34,7 @@ const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
   )
 }
 
-const Layout: FunctionComponent<Props> = (props) => (
+const Layout: FC<Props> = (props) => (
   <UIProvider>
     <CoreLayout {...props} />
   </UIProvider>

components/core/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Navbar.module.css'
 import { Logo, Container } from '@components/ui'
 import { Searchbar } from '@components/core'
@@ -8,7 +8,7 @@ interface Props {
   className?: string
 }
 
-const Navbar: FunctionComponent<Props> = ({ className }) => {
+const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <Container className={rootClassName}>

components/core/Searchbar/Searchbar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Searchbar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Searchbar: FunctionComponent<Props> = ({ className }) => {
+const Searchbar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/core/UserNav/UserNav.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './UserNav.module.css'
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
@@ -9,7 +9,7 @@ interface Props {
   className?: string
 }
 
-const UserNav: FunctionComponent<Props> = ({ className }) => {
+const UserNav: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   const { openSidebar } = useUI()