feat(x): Add x login button (#122)

* feat(x): Add x login button

* Update README.md

README.md

@@ -7,7 +7,7 @@ A simple package to display social login buttons using React.
 Buttons do not provide any social logic.
 They are only visual components listening to some events triggered by the user.
 
-![Social login buttons](https://raw.githubusercontent.com/michaeljscript/react-social-login-buttons/develop/examples/simple/screenshot6.png)
+![Social login buttons](https://raw.githubusercontent.com/michaeljscript/react-social-login-buttons/develop/examples/simple/screenshot7.png)
 
 ## Install
 
@@ -81,6 +81,12 @@ We currently support just a few login buttons. Others will be implemented later.
 <TwitterLoginButton onClick={() => alert("Hello")} />
 ```
 
+#### XLoginButton
+
+```jsx
+<XLoginButton onClick={() => alert("Hello")} />
+```
+
 #### AmazonLoginButton
 
 ```jsx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-social-login-buttons",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Simple social login buttons for React",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

src/buttons/XLoginButton.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { createButton } from "./create-button";
+
+const config = {
+  activeStyle: { background: "#282e36" },
+  icon: Icon,
+  style: { background: "#0f1419" },
+  text: "Log in with X",
+};
+
+export const XLoginButton = createButton(config);
+
+function Icon({ size, color }: { size: number | string; color: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24">
+      <path
+        fill={color}
+        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+      />
+    </svg>
+  );
+}

src/buttons/index.ts

@@ -18,3 +18,4 @@ export { ZaloLoginButton } from "./ZaloLoginButton";
 export { TikTokLoginButton } from "./TikTokLoginButton";
 export { MetamaskLoginButton } from "./MetamaskLoginButton";
 export { GitlabLoginButton } from "./GitlabLoginButton";
+export { XLoginButton } from "./XLoginButton";