fix: fixed the layout in product page

pages/404.tsx

@@ -1,5 +1,28 @@
 import { NextPage } from 'next'
+import { NextSeo } from 'next-seo'
+import Container from 'src/components/atoms/Container/Container'
+import TripGuide from 'src/components/organisms/TripGuide/TripGuide'
+import Link from 'src/components/atoms/Link/Link'
 
-const ErrorPage: NextPage = () => <div>404</div>
+const NotFoundPage: NextPage = () => (
+  <div>
+    <NextSeo
+      title='NotFound page - Ikea clone | Karthick Ragavendran'
+      description='Create account with your email or google account.'
+    />
+    <div className='min-h-screen mt-12'>
+      <Container className='flex flex-col justify-center h-full'>
+        <div className='max-w-sm'>
+          <div className='text-lg font-semibold'>404 | Page not found.</div>
+          <div className='mt-8 mb-16 text-gray-600'>
+            Meanwhile, follow the <span className='text-red'>site map</span>{' '}
+            below for amazing things you can do in this site right now.
+          </div>
+        </div>
+        <TripGuide />
+      </Container>
+    </div>
+  </div>
+)
 
-export default ErrorPage
+export default NotFoundPage

src/components/atoms/Container/Container.tsx

@@ -6,7 +6,7 @@ export interface IContainerProps {
 }
 
 const Container = ({ children, className }: IContainerProps) => (
-  <div className={`container px-3 mx-auto ${className}`}>{children}</div>
+  <div className={`container px-1 mx-auto ${className}`}>{children}</div>
 )
 
 export default Container

src/components/atoms/Image2/Image.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Image from './Image'
+
+export default {
+  title: 'atoms/Image',
+  component: Image,
+} as ComponentMeta<typeof Image>
+
+const Template: ComponentStory<typeof Image> = (args) => (
+  <Image alt='' {...args} />
+)
+
+export const Fixed = Template.bind({})
+Fixed.args = {
+  src: 'https://via.placeholder.com/200',
+  className: 'border border-black',
+  height: 100,
+  width: 250,
+  alt: '',
+  layout: 'fixed',
+}
+
+export const Intrinsic = Template.bind({})
+Intrinsic.args = {
+  src: 'https://via.placeholder.com/200',
+  className: 'border border-black',
+  height: 100,
+  width: 250,
+  alt: '',
+  layout: 'intrinsic',
+}
+
+export const Fill = Template.bind({})
+Fill.args = {
+  src: 'https://via.placeholder.com/200',
+  className: 'border border-black',
+  height: 100,
+  width: 250,
+  alt: '',
+  layout: 'fill',
+}
+
+export const Responsive = Template.bind({})
+Responsive.args = {
+  src: 'https://via.placeholder.com/200',
+  className: 'border border-black',
+  height: 100,
+  width: 250,
+  alt: '',
+  layout: 'responsive',
+}

src/components/atoms/Image2/Image.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+import Image from './Image'
+
+describe('Image Component', () => {
+  it('Image renders', () => {
+    mount(
+      <Image
+        src='https://via.placeholder.com/150'
+        blurDataURL='https://via.placeholder.com/10'
+        layout='fill'
+        alt=''
+      />
+    )
+  })
+})

src/components/atoms/Image2/Image.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import NextImage, { ImageProps } from 'next/image'
+
+const Image = ({
+  className,
+  src,
+  width = 240,
+  height = 240,
+  layout = 'responsive',
+  alt = '',
+  quality = 75,
+  ...props
+}: ImageProps) => {
+  const imgWidth = layout === 'fill' ? undefined : width
+  const imgHeight = layout === 'fill' ? undefined : height
+  const imgSrc =
+    src ||
+    'https://res.cloudinary.com/thankyou/image/upload/v1649599416/IKEA/nopicture_fi31cv.jpg'
+
+  return (
+    <NextImage
+      className={`object-cover ${className}`}
+      src={imgSrc}
+      width={imgWidth}
+      height={imgHeight}
+      layout={layout}
+      alt={alt}
+      quality={quality}
+      placeholder='blur'
+      blurDataURL='/images/blur.png'
+      {...props}
+    />
+  )
+}
+
+export default Image

src/components/atoms/Image2/index.ts

@@ -0,0 +1,3 @@
+import Image from './Image'
+
+export default Image

src/components/molecules/Autocomplete/Autocomplete.tsx

@@ -16,7 +16,6 @@ const AutocompleteComponent = <
 ) => (
   <Autocomplete
     autoSelect
-    placeholder='Type something...'
     classes={{
       noOptions: 'bg-white/50 backdrop-filter backdrop-blur',
       listbox: 'p-0 bg-white/50 backdrop-filter backdrop-blur max-h-64',

src/components/organisms/Navbar/Navbar.tsx

@@ -20,6 +20,7 @@ import {
   selectUid,
   selectUserRoles,
 } from 'src/store/user/userSlice'
+import Container from 'src/components/atoms/Container/Container'
 
 export interface INavbarProps {}
 
@@ -182,7 +183,7 @@ const Navbar = () => {
           uid={uid}
           displayName={userDisplayName}
         />
-        <div className='container flex items-center justify-center w-full h-6 mx-auto'>
+        <Container className='flex items-center justify-center w-full h-6'>
           <div className='hidden w-full py-2 lg:flex'>
             <PopoverGroup className='z-40 flex items-center space-x-4'>
               <MenuItem title='Buy' />
@@ -235,7 +236,7 @@ const Navbar = () => {
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <Brand />
           </Link>
-        </div>
+        </Container>
       </div>
     </nav>
   )

src/components/organisms/ProductPageCarousel/ProductPageCarousel.tsx

@@ -57,17 +57,15 @@ const data = [
 const ProductPageCarousel = () => {
   const [selected, setSelected] = useState(0)
   return (
-    <div>
-      <div className='h-64 md:h-96'>
-        <Image
-          key={data[selected].id}
-          src={data[selected].src}
-          alt=''
-          className='h-full border border-white rounded-lg shadow-md'
-        />
-      </div>
+    <div className='min-h-[30rem] flex flex-col'>
+      <Image
+        key={data[selected].id}
+        src={data[selected].src}
+        alt=''
+        className='flex-grow h-full border border-white rounded-lg bg-primary/10 '
+      />
 
-      <HScroll className='relative flex gap-2 h-28'>
+      <HScroll className='relative flex h-28'>
         <HScroll.Body>
           {data.map((item, index) => (
             <HScroll.Child key={item.id}>

src/components/organisms/SearchHomesFilter/filterUtils.tsx

@@ -263,6 +263,7 @@ export const LocationSearch = ({
       getOptionLabel={(x) => x.displayName}
       onInputChange={(_, v) => dispatch(setSearchText(v))}
       loading={cityList.fetching}
+      placeholder='Type something...'
       isOptionEqualToValue={(a, b) => a.displayName === b.displayName}
       onChange={(_, v) => {
         if (v) {

src/components/organisms/TripGuide/TripGuide.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import userReducer, {
+  initialState as userInitialState,
+} from 'src/store/user/userSlice'
+import { Provider } from 'react-redux'
+import { combineReducers, createStore } from '@reduxjs/toolkit'
+import produce from 'immer'
+import TripGuide from './TripGuide'
+
+const reducers = { user: userReducer }
+
+const stateWithUid = produce(userInitialState, (userDraft) => {
+  // @ts-ignore
+  userDraft.data.user?.uid = '123'
+})
+
+const store = createStore(combineReducers(reducers), {
+  user: userInitialState,
+})
+const storeWithUid = createStore(combineReducers(reducers), {
+  user: stateWithUid,
+})
+
+export default {
+  title: 'organisms/TripGuide',
+  component: TripGuide,
+} as ComponentMeta<typeof TripGuide>
+
+const Template: ComponentStory<typeof TripGuide> = () => <TripGuide />
+
+export const UnAuthenticated = Template.bind({})
+UnAuthenticated.args = {}
+UnAuthenticated.decorators = [
+  (story) => <Provider store={store}>{story()}</Provider>,
+]
+export const Authenticated = Template.bind({})
+Authenticated.args = {}
+Authenticated.decorators = [
+  (story) => <Provider store={storeWithUid}>{story()}</Provider>,
+]

src/components/organisms/TripGuide/TripGuide.test.tsx

@@ -0,0 +1,8 @@
+import { mount } from '@cypress/react'
+import TripGuide from './TripGuide'
+
+describe('TripGuide Component', () => {
+  it('TripGuide renders', () => {
+    mount(<TripGuide />)
+  })
+})