Renaming and removing enhanced image

components/common/EnhancedImage/EnhancedImage.tsx

@@ -1,42 +0,0 @@
-import { FC } from 'react'
-import { useInView } from 'react-intersection-observer'
-import Image from 'next/image'
-
-type Props = Omit<
-  JSX.IntrinsicElements['img'],
-  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
-> & {
-  src: string
-  quality?: string
-  priority?: boolean
-  loading?: readonly ['lazy', 'eager', undefined]
-  unoptimized?: boolean
-} & (
-    | {
-        width: number | string
-        height: number | string
-        unsized?: false
-      }
-    | {
-        width?: number | string
-        height?: number | string
-        unsized: true
-      }
-  )
-
-const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
-  ...props
-}) => {
-  const [ref] = useInView({
-    triggerOnce: true,
-    rootMargin: '220px 0px',
-  })
-
-  return (
-    <div ref={ref}>
-      <Image {...props} />
-    </div>
-  )
-}
-
-export default EnhancedImage

components/common/EnhancedImage/index.ts

@@ -1 +0,0 @@
-export { default } from './EnhancedImage'

components/common/Footer/Footer.tsx

@@ -6,7 +6,7 @@ import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get
 import getSlug from '@lib/get-slug'
 import { Github } from '@components/icons'
 import { Logo, Container } from '@components/ui'
-import { I18nWidget } from '@components/core'
+import { I18nWidget } from '@components/common'
 import s from './Footer.module.css'
 
 interface Props {

components/common/Layout/Layout.tsx

@@ -5,7 +5,7 @@ import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get
 import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { CartSidebarView } from '@components/cart'
 import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
-import { Navbar, Featurebar, Footer } from '@components/core'
+import { Navbar, Featurebar, Footer } from '@components/common'
 import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
 import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
@@ -43,8 +43,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
       const scrolled = scrollTop > offset
 
       setHasScrolled(scrolled)
-    }, 1)
-  , [])
+    }, 1),
+    []
+  )
 
   useEffect(() => {
     document.addEventListener('scroll', handleScroll)

components/common/Navbar/Navbar.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import { Logo } from '@components/ui'
-import { Searchbar, UserNav } from '@components/core'
+import { Searchbar, UserNav } from '@components/common'
 interface Props {
   className?: string
 }

components/common/UserNav/UserNav.tsx

@@ -5,7 +5,7 @@ import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
 import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
 import { Menu } from '@headlessui/react'
 import { Heart, Bag } from '@components/icons'
-import { Avatar } from '@components/core'
+import { Avatar } from '@components/common'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'

components/common/index.ts

@@ -9,4 +9,3 @@ export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
 export { default as HTMLContent } from './HTMLContent'
 export { default as I18nWidget } from './I18nWidget'
-export { default as EnhancedImage } from './EnhancedImage'