Merge remote-tracking branch 'origin/main' into Add-a-Landing-Page-#10

Author: nirmalkc

components/index.js

@@ -8,4 +8,5 @@ export {default as CopyShapeSource} from "./core/CopyShapeSource";
 // utils
 export { default as Header } from "./utils/Header";
 export { default as ShapeList } from './utils/ShapeList';
-export { default as Radios } from './utils/Radios';
+export { default as Radios } from './utils/Radios';
+export { default as NoShapeFound } from './utils/NoShapeFound';

components/utils/Header.js

@@ -170,7 +170,7 @@ const Header = ({
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          <CloseIcon title="Clear Search Query" color='#ffffff' size='24px' onClick={() => setSearchTerm('')}/>
+          {searchTerm && <CloseIcon title="Clear Search Query" color='#ffffff' size='24px' onClick={() => setSearchTerm('')}/>}
         </NavbarSearchInput>
         <DropdownButton variant="outline-secondary" size="sm" id="dropdown-basic-button" title={`Sort by ${sort}`} className="border-0">
           <Dropdown.Item 

components/utils/NoShapeFound.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const NoShapeFound = () => {
+
+    return(
+        <h1>No Shape Found!</h1>
+    )
+};
+
+export default NoShapeFound;

components/utils/ShapeList.js

@@ -28,7 +28,7 @@ import { BiExport } from "react-icons/bi";
 import { BsFillHeartFill, BsHeart} from "react-icons/bs";
 
 // Export Shape
-import { ExportShape, CopyShapeSource } from '..';
+import { ExportShape, CopyShapeSource, NoShapeFound } from '..';
 
 // misc unitless
 import { getShapeFileName, getShapeId } from '../../utils/misc';
@@ -347,6 +347,8 @@ const ShapeList = (
     }
   };
 
+  
+
   return (
     <ShapeCardsContainer>
       <Container>
@@ -362,7 +364,8 @@ const ShapeList = (
           shape= { shapeToSourceCopy } />
         }
 
-        {filteredShape.map((shape, index) => (
+        {
+          filteredShape.length === 0 ? <NoShapeFound /> : filteredShape.map((shape, index) => (
           <React.Fragment key={index}>
             <ShapeCard>
               <ShapeCardBody>