implement sponsorBtn component

Author: apsinghdev

client/src/assets/sponsor.png

@@ -1,13 +1,15 @@
 import MenuItem from "./MenuItem";
 import Socials from "./Socials";
+import SponsorBtn from "./SponsorBtn";
 
 function Menu(){
     return (
-      <div className="w-52 h-56 rounded-xl bg-gradient-to-r from-slate-900 to-slate-700 absolute left-52 top-8 rounded-lg shadow-xl">
+      <div className="w-52 h-71 rounded-xl bg-gradient-to-r from-slate-900 to-slate-700 absolute left-52 top-8 rounded-lg shadow-xl">
         <MenuItem feat="Start Collaboration"></MenuItem>
         <MenuItem feat="Start Chat"></MenuItem>
         <MenuItem feat="Save as pdf"></MenuItem>
         <MenuItem feat="Save as png"></MenuItem>
+        <SponsorBtn></SponsorBtn>
         <Socials></Socials>
       </div>
     );

client/src/components/Menu.jsx

@@ -6,7 +6,7 @@ function Socials(){
       window.open(link, "_blank");
   }
   return (
-    <div className="flex items-center justify-center mt-3">
+    <div className="flex items-center justify-center my-3">
       <h1 className="text-white mr-2 cursor-pointer font-sans" onClick={clickHandler}>
         Built By{" "}
         <span className="font-mono text-emerald-300 hover:lowercase">

client/src/components/Socials.jsx

@@ -0,0 +1,17 @@
+import sponsorImg from "../assets/sponsor.png";
+const link = "https://github.com/sponsors/apsinghdev?o=esb";
+
+function clickHandler(){
+    window.open(link, '_blank');
+}
+
+function SponsorBtn(){
+    return (
+      <div className="flex items-center justify-center mt-3 cursor-pointer border-b border-dotted pb-2">
+        <img src={sponsorImg} className="h-5 w-5 rounded"></img>
+        <h1 className="text-white pl-1 cursor-pointer font-sans" onClick={clickHandler}>Sponsor</h1>
+      </div>
+    );
+}
+
+export default SponsorBtn;