Implemented search bar for giphy

client/src/App.js

@@ -11,7 +11,8 @@ function App() {
   return (
     <div className="">
       <Layout>
-        {/* Insert your compoents inside this layout entity */}
+        {/* Insert your components inside this layout entity */}
+        <Giphy />
         <BrowserRouter>
           <Switch>
             <Route exact path="/" component={ToolsView} />

client/src/components/Apps/Giphy/Giphy.js

@@ -1,7 +1,12 @@
 import React from "react";
+import GiphyHeader from "./GiphyHeader/GiphyHeader";
 
 const Giphy = () => {
-  return <div>This is the giphy page</div>;
+  return (
+    <div>
+      <GiphyHeader />
+    </div>
+  );
 };
 
 export default Giphy;

client/src/components/Apps/Giphy/GiphyHeader/GiphyHeader.css

@@ -0,0 +1,22 @@
+.giphy-headerr {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.giphy-headerr .settingsgiphy,
+.giphy-headerr .dpgiphy {
+  margin-left: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.giphy-headerr img.settingsgiphy {
+  width: 20px;
+  height: 20px;
+  margin-top: 0.8rem;
+}
+
+.giphy-headerr img.dpgiphy {
+  width: 35px;
+  height: 35px;
+}

client/src/components/Apps/Giphy/GiphyHeader/GiphyHeader.js

@@ -0,0 +1,17 @@
+import React from "react";
+import SearchBar from "../searchcomponent/searchbar.component";
+import Settings from "../../../../assets/giphy/settingsgif.svg";
+import DisplayPic from "../../../../assets/giphy/displaypic.png";
+import "./GiphyHeader.css";
+
+const GiphyHeader = () => {
+  return (
+    <div className="giphy-headerr">
+      <SearchBar text="Search Zuri" />
+      <img src={Settings} alt="" className="settingsgiphy" />
+      <img src={DisplayPic} alt="" className="dpgiphy" />
+    </div>
+  );
+};
+
+export default GiphyHeader;

client/src/components/Apps/Giphy/searchcomponent/searchbar.component.js

@@ -0,0 +1,15 @@
+import React from "react";
+import SearchIcon from "../../../../assets/giphy/searchhh.svg";
+import "./searchbar.css";
+// Styles
+
+const SearchBar = (props) => {
+  return (
+    <div className="appsearchbarr">
+      <input type="text " placeholder={props.text} />
+      <img src={SearchIcon} alt="" />
+    </div>
+  );
+};
+
+export default SearchBar;

client/src/components/Apps/Giphy/searchcomponent/searchbar.css

@@ -0,0 +1,49 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.appsearchbarr {
+  display: flex;
+  position: relative;
+  margin-top: 1rem;
+  width: 85%;
+}
+
+.appsearchbarr input {
+  position: relative;
+  width: 100%;
+  margin-left: 2rem;
+  padding-left: 1rem;
+  background: rgba(255, 255, 255, 0.4);
+  border: 0.8px solid rgba(153, 153, 153, 0.2);
+  box-sizing: border-box;
+  border-radius: 5px;
+  height: 35px;
+  outline: none;
+  font-size: 0.9rem;
+}
+
+.appsearchbarr input::placeholder {
+  font-size: 0.7rem;
+  position: absolute;
+  top: 0.55rem;
+}
+.appsearchbarr img {
+  position: absolute;
+  right: 0.6rem;
+  top: 0.35rem;
+}
+
+@media (max-width: 920px) {
+  .appsearchbarr {
+    width: 80%;
+  }
+}
+
+@media (max-width: 500px) {
+  .appsearchbarr {
+    width: 50%;
+  }
+}