From eb9d00b863138d55222bdc75b66b012dc6000990 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 28 Aug 2025 12:26:11 +0000
Subject: [PATCH 1/2] Initial plan


From 74a1d3b67b3395ae3e356b3c806cc3dc90bfefde Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 28 Aug 2025 12:32:53 +0000
Subject: [PATCH 2/2] Add Twitch and Kick social login buttons

Co-authored-by: michaeljscript <19684576+michaeljscript@users.noreply.github.com>
---
 .prettierrc                       |  2 +-
 .storybook/main.ts                |  4 ++--
 README.md                         | 13 ++++++++++++-
 src/buttons/DynamicIcon.tsx       |  7 +------
 src/buttons/KickLoginButton.tsx   | 20 ++++++++++++++++++++
 src/buttons/TwitchLoginButton.tsx | 20 ++++++++++++++++++++
 src/buttons/icon.tsx              |  1 -
 src/buttons/index.ts              |  2 ++
 tsconfig.json                     |  2 +-
 9 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 src/buttons/KickLoginButton.tsx
 create mode 100644 src/buttons/TwitchLoginButton.tsx

diff --git a/.prettierrc b/.prettierrc
index 8b93eae..8f02c18 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
   "tabWidth": 2,
   "printWidth": 120
-}
\ No newline at end of file
+}
diff --git a/.storybook/main.ts b/.storybook/main.ts
index c0fd0a5..6427ce1 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -18,7 +18,7 @@ const config: StorybookConfig = {
   docs: {},
 
   typescript: {
-    reactDocgen: "react-docgen-typescript"
-  }
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 export default config;
diff --git a/README.md b/README.md
index 58599b5..c32ac9c 100644
--- a/README.md
+++ b/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,
diff --git a/src/buttons/DynamicIcon.tsx b/src/buttons/DynamicIcon.tsx
index 2be225b..52e25db 100644
--- a/src/buttons/DynamicIcon.tsx
+++ b/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} />;
 };
-
diff --git a/src/buttons/KickLoginButton.tsx b/src/buttons/KickLoginButton.tsx
new file mode 100644
index 0000000..3b01cb3
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/buttons/TwitchLoginButton.tsx b/src/buttons/TwitchLoginButton.tsx
new file mode 100644
index 0000000..bc2be42
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/buttons/icon.tsx b/src/buttons/icon.tsx
index 77632b5..7ff4aed 100644
--- a/src/buttons/icon.tsx
+++ b/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;
diff --git a/src/buttons/index.ts b/src/buttons/index.ts
index 24f0889..e315ebc 100644
--- a/src/buttons/index.ts
+++ b/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";
diff --git a/tsconfig.json b/tsconfig.json
index 9a67669..c235f40 100644
--- a/tsconfig.json
+++ b/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"
   }
 }