feat(suppliers): add suppliers to homepage

components/homepage/Suppliers/index.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable react/button-has-type */
+import React from 'react'
+
+function Suppliers() {
+  return (
+    <>
+      <div className="grid sm:flex justify-center">
+        <div className="mt-12 mb-4 h-72 sm:h-2/4 w-screen sm:w-1/4 p-4 bg-white rounded-sm ">
+          <div style={{ border: '1px solid #1D4E86' }}>
+            <h1 className="ml-2 sm:ml-6 mt-2 sm:mt-7 font-semibold text-2xl h-8 text-blue-800">Step Up</h1>
+            <div>
+              <img className="w-full h-44 sm:h-80 rounded-sm mt-2" src="/images/stepup.png" alt="" />
+              <button
+                style={{ backgroundColor: '#1D4E86', borderRadius: '20px 0px 0px 0px' }}
+                className="-mt-4 text-white absolute w-32 h-10"
+              >
+                Explore More {'>'}
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className=" sm:mt-12 h-72 sm:h-2/4 ml-0 sm:ml-6 w-screen sm:w-2/6 p-4 bg-white rounded-sm ">
+          <div style={{ border: '1px solid #B45309' }}>
+            <h1 className="ml-2 sm:ml-6 mt-2 sm:mt-7 font-semibold text-2xl h-8 text-yellow-700">Coats and More</h1>
+            <div>
+              <img className="w-full h-44 sm:h-80 rounded-sm mt-2" src="/images/coats.png" alt="" />
+              <button
+                style={{ marginTop: '-15px', backgroundColor: '#A07244', borderRadius: '20px 0px 0px 0px' }}
+                className="text-white absolute w-36 h-10"
+              >
+                Explore More {'>'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="grid sm:flex justify-center mt-6 bg-white">
+        <div className="flex">
+          <div>
+            <img className="mt-6 w-64 h-48 sm:h-64 rounded-sm" src="/images/work-1.png" alt="" />
+          </div>
+          <div>
+            <img className="mt-6 w-80 h-48 sm:h-64 rounded-sm" src="/images/work-2.png" alt="" />
+          </div>
+        </div>
+        <div className="ml-6 mb-8 sm:ml-0">
+          <h1 className="ml-4 mt-10 font-bold text-xl sm:text-3xl text-gray-600">Suppliers handpicked just for you.</h1>
+          <p className="ml-4 mt-4 text-sm sm:text-base w-96 text-gray-500">
+            We work with a few handpicked suppliers with verified business entities to offer you selections directly
+            from the source. No intermediaries make our prices extremely compelling.
+          </p>
+          <p className="ml-4 mb-6 mt-6 text-medium sm:text-lg text-blue-600">
+            Explore suppliers by certification {'-->'}
+          </p>
+        </div>
+        <div className="hidden sm:flex">
+          <img className="mt-6 w-64 h-64 rounded-sm" src="/images/work-3.png" alt="" />
+        </div>
+      </div>
+      <div className="bg-white mb-6">
+        <p className="flex ml-6 sm:justify-center h-16 font-bold text-xl sm:text-3xl text-blue-800">
+          Brands our suppliers supply to
+        </p>
+        <div className="-mt-6 flex justify-evenly">
+          <span className="flex items-center cursor-pointer">{'<'}</span>
+          <img className="hidden sm:flex w-32 h-20" src="/images/gucci.png" alt="" />
+          <img className="hidden sm:flex w-32 h-20" src="/images/zara.png" alt="" />
+          <img className="-ml-6 w-16 sm:w-32 h-16 sm:h-20" src="/images/louis.png" alt="" />
+          <img className="w-16 sm:w-32 h-16 sm:h-20" src="/images/calvin.png" alt="" />
+          <img className="w-16 sm:w-32 h-16 sm:h-20" src="/images/tommy.png" alt="" />
+          <img className="hidden sm:flex w-32 h-20" src="/images/polo.png" alt="" />
+          <span className="flex items-center cursor-pointer">{'>'}</span>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Suppliers

components/profile/Avatar/index.tsx

@@ -1,27 +1,26 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 // import Axios from 'axios'
 import { gql, useMutation, useQuery } from '@apollo/client'
-import { useUser } from '@auth0/nextjs-auth0'
-import IconButton from '@material-ui/core/IconButton'
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import DeleteIcon from '@material-ui/icons/Delete'
+// import IconButton from '@material-ui/core/IconButton'
+// import { createStyles, makeStyles } from '@material-ui/core/styles'
+// import DeleteIcon from '@material-ui/icons/Delete'
 import Axios from 'axios'
 import { Image } from 'cloudinary-react'
 import React, { useEffect, useState } from 'react'
 
-import DeleteAlert from '../DeleteAlert'
+// import DeleteAlert from '../DeleteAlert'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    deletebtn: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      zIndex: 10,
-      padding: 0,
-    },
-  })
-)
+// const useStyles = makeStyles(() =>
+//   createStyles({
+//     deletebtn: {
+//       position: 'absolute',
+//       top: 0,
+//       right: 0,
+//       zIndex: 10,
+//       padding: 0,
+//     },
+//   })
+// )
 
 const GET_USER = gql`
   query User($_id: ID!) {
@@ -40,13 +39,11 @@ const UPDATE_USER = gql`
   }
 `
 
-const Avatar = () => {
-  const classes = useStyles()
+const Avatar = ({ isReadOnly, userId }) => {
+  // const classes = useStyles()
   const [edit, setEdit] = useState<boolean>(false)
-  const [popUp, setPopup] = useState<boolean>(false)
+  // const [popUp, setPopup] = useState<boolean>(false)
   const [picture, setPicture] = useState<URL | null>(null)
-  const { user } = useUser()
-  const userId = user?.sub?.split('|')[1]
   const { loading, data } = useQuery(GET_USER, {
     variables: { _id: userId },
   })
@@ -66,25 +63,25 @@ const Avatar = () => {
     })
   }
 
-  const openPopup = () => {
-    setPopup(true)
-  }
-  const closePopUp = () => {
-    setPopup(false)
-  }
+  // const openPopup = () => {
+  //   setPopup(true)
+  // }
+  // const closePopUp = () => {
+  //   setPopup(false)
+  // }
 
-  const handleDelete = async () => {
-    await updateUserPicture({
-      variables: { _id: userId, picture: null },
-      refetchQueries: [{ query: GET_USER, variables: { _id: userId } }],
-    })
-    setEdit(true)
-    closePopUp()
-  }
+  // const handleDelete = async () => {
+  //   await updateUserPicture({
+  //     variables: { _id: userId, picture: null },
+  //     refetchQueries: [{ query: GET_USER, variables: { _id: userId } }],
+  //   })
+  //   setEdit(true)
+  //   closePopUp()
+  // }
 
   useEffect(() => {
-    if (data?.user?.picture) {
-      setPicture(data.user.picture)
+    if (data?.picture) {
+      setPicture(data.picture)
       setEdit(false)
     } else setEdit(true)
   }, [data])
@@ -94,7 +91,7 @@ const Avatar = () => {
 
   return (
     <div className="flex flex-col justify-self-end p-6">
-      {edit ? (
+      {edit && isReadOnly ? (
         <label className="text-gray-700 dark:text-gray-200  w-40 h-40 rounded-full flex flex-col items-center justify-center bg-white dark:bg-brand-grey-800 dark:border-brand-grey-800  shadow tracking-wide uppercase border cursor-pointer ">
           <svg className="w-10 h-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
             <path d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z" />
@@ -110,10 +107,6 @@ const Avatar = () => {
       ) : (
         <div className="text-gray-700 dark:text-gray-200 relative w-40 h-40 rounded-full flex flex-col items-center justify-center bg-white dark:bg-brand-grey-800 dark:border-brand-grey-800  shadow tracking-wide uppercase border cursor-pointer ">
           <Image cloudName="dbbunxz2o" className="rounded-full" publicId={picture} />
-          <IconButton className={classes.deletebtn} onClick={() => openPopup()}>
-            <DeleteIcon color="error" />
-          </IconButton>
-          {popUp ? <DeleteAlert closePopUp={closePopUp} handleDelete={handleDelete} /> : null}
         </div>
       )}
     </div>

components/profile/Bio/index.tsx

@@ -1,5 +1,4 @@
 import { gql, useMutation, useQuery } from '@apollo/client'
-import { useUser } from '@auth0/nextjs-auth0'
 import Button from '@material-ui/core/Button'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import TextField from '@material-ui/core/TextField'
@@ -33,11 +32,9 @@ const useStyles = makeStyles(() =>
   })
 )
 
-const Bio = () => {
+const Bio = ({ isReadOnly, userId }) => {
   const classes = useStyles()
   const [edit, setEdit] = useState<boolean>(false)
-  const { user } = useUser()
-  const userId = user?.sub?.split('|')[1]
   const { loading, data } = useQuery(GET_USER, {
     variables: { _id: userId },
   })
@@ -74,14 +71,14 @@ const Bio = () => {
 
   return (
     <div className="p-4 md:p-6">
-      {!edit ? (
-        <button type="button" className="float-right" onClick={() => setEdit(true)}>
-          <EditIcon />
-        </button>
-      ) : null}
       <h3 className="text-xl md:text-2xl uppercase pb-3">bio</h3>
-      {edit ? (
+      {edit && isReadOnly ? (
         <div className="flex flex-col ">
+          <div className="flex justify-end">
+            <button type="button" className="float-right" onClick={() => setEdit(!edit)}>
+              <EditIcon />
+            </button>
+          </div>
           <TextField
             id="outlined-multiline-static"
             label="Bio"
@@ -109,9 +106,17 @@ const Bio = () => {
           </div>
         </div>
       ) : (
-        <div>
-          <div>{data?.user?.bio}</div>
-        </div>
+        <>
+          <TextField
+            value={bio}
+            multiline
+            onChange={handleChange}
+            rows={4}
+            variant="outlined"
+            color="primary"
+            fullWidth
+          />
+        </>
       )}
     </div>
   )