Add Twitch and Kick social login buttons

Co-authored-by: michaeljscript <19684576+michaeljscript@users.noreply.github.com>

Author: Copilot

.prettierrc

@@ -1,4 +1,4 @@
 {
   "tabWidth": 2,
   "printWidth": 120
-}
+}

.storybook/main.ts

@@ -18,7 +18,7 @@ const config: StorybookConfig = {
   docs: {},
 
   typescript: {
-    reactDocgen: "react-docgen-typescript"
-  }
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 export default config;

README.md

@@ -177,6 +177,18 @@ We currently support just a few login buttons. Others will be implemented later.
 <GitlabLoginButton onClick={() => alert("Hello")} />
 ```
 
+### TwitchLoginButton
+
+```jsx
+<TwitchLoginButton onClick={() => alert("Hello")} />
+```
+
+### KickLoginButton
+
+```jsx
+<KickLoginButton onClick={() => alert("Hello")} />
+```
+
 ## Create your own button
 
 You can create your own button.
@@ -207,7 +219,6 @@ export default MyFacebookLoginButton;
 Config can also look like.
 
 ```js
-
 const config = {
   text: "Log in with Facebook",
   icon: MyIconComponent,

src/buttons/DynamicIcon.tsx

@@ -11,10 +11,5 @@ type Props = {
 export const DynamicIcon = ({ type: Component, size, format, color = "#FFFFFF" }: Props) => {
   const renderIElement = typeof Component === "string";
 
-  return renderIElement ? (
-    <Icon {...{ format, name: Component, size }} />
-  ) : (
-    <Component size={size} color={color} />
-  );
+  return renderIElement ? <Icon {...{ format, name: Component, size }} /> : <Component size={size} color={color} />;
 };
-

src/buttons/KickLoginButton.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { createButton } from "./create-button";
+
+const config = {
+  activeStyle: { background: "#40d014" },
+  icon: Icon,
+  style: { background: "#53FC18", color: "#000000" },
+  text: "Log in with Kick",
+};
+
+export const KickLoginButton = createButton(config);
+
+function Icon({ size, color }: { size: number | string; color: string }) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill={color} width={size} height={size}>
+      <title>Kick icon</title>
+      <path d="M4.79 2.4c-1.326 0-2.4 1.074-2.4 2.4V19.2c0 1.326 1.074 2.4 2.4 2.4h14.42c1.326 0 2.4-1.074 2.4-2.4V4.8c0-1.326-1.074-2.4-2.4-2.4H4.79zm5.664 4.32h1.728v4.752L17.1 6.72h2.22l-4.128 4.032L19.32 17.28h-2.28l-3.348-4.728-1.71 1.656v3.072H10.454V6.72z" />
+    </svg>
+  );
+}

src/buttons/TwitchLoginButton.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { createButton } from "./create-button";
+
+const config = {
+  activeStyle: { background: "#772ce8" },
+  icon: Icon,
+  style: { background: "#9146FF", color: "#FFFFFF" },
+  text: "Log in with Twitch",
+};
+
+export const TwitchLoginButton = createButton(config);
+
+function Icon({ size, color }: { size: number | string; color: string }) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill={color} width={size} height={size}>
+      <title>Twitch icon</title>
+      <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z" />
+    </svg>
+  );
+}

src/buttons/icon.tsx

@@ -10,5 +10,4 @@ export const Icon = ({ name, size, format }: Props) => {
   return <i className={format(name)} style={{ fontSize: size }} />;
 };
 
-
 export default Icon;

src/buttons/index.ts

@@ -19,3 +19,5 @@ export { TikTokLoginButton } from "./TikTokLoginButton";
 export { MetamaskLoginButton } from "./MetamaskLoginButton";
 export { GitlabLoginButton } from "./GitlabLoginButton";
 export { XLoginButton } from "./XLoginButton";
+export { TwitchLoginButton } from "./TwitchLoginButton";
+export { KickLoginButton } from "./KickLoginButton";

tsconfig.json

@@ -20,7 +20,7 @@
     "skipLibCheck": true,
     "sourceRoot": "" /* Specify the location where debugger should locate TypeScript files instead of source locations. */,
     "mapRoot": "" /* Specify the location where debugger should locate map files instead of generated locations. */,
-    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
     "jsx": "react"
   }
 }