github banner

Author: khyrulAlam

package-lock.json

@@ -16,6 +16,7 @@
     "next-themes": "^0.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-github-btn": "^1.4.0",
     "react-icons": "^5.4.0"
   },
   "devDependencies": {

package.json

@@ -4,6 +4,7 @@ import { Toaster } from "@/components/ui/toaster";
 import { useAuth } from "./context/Auth";
 import ChatComponent from "./components/chat";
 import Login from "./components/login";
+import Banner from "./components/banner";
 
 function App() {
   const { isAuthenticated, isLoading } = useAuth();
@@ -28,6 +29,7 @@ function App() {
       </Box>
       {isAuthenticated ? <ChatComponent /> : <Login />}
       <Toaster />
+      <Banner />
     </Center>
   );
 }

src/App.tsx

@@ -0,0 +1,31 @@
+import { Box, Stack } from "@chakra-ui/react";
+import GitHubButton from "react-github-btn";
+
+const Banner = () => {
+  return (
+    <Box p={4} pos="absolute" top="0" left="0">
+      <Stack align="flex-start">
+        <GitHubButton
+          href="https://github.com/khyrulAlam/react-firebase-chat"
+          data-color-scheme="no-preference: dark; light: light; dark: dark;"
+          data-size="large"
+          data-show-count="true"
+          aria-label="Star khyrulAlam/react-firebase-chat on GitHub"
+        >
+          Star
+        </GitHubButton>
+        <GitHubButton
+          href="https://github.com/khyrulAlam/react-firebase-chat/fork"
+          data-color-scheme="no-preference: dark; light: light; dark: dark;"
+          data-size="large"
+          data-show-count="true"
+          aria-label="Fork khyrulAlam/react-firebase-chat on GitHub"
+        >
+          Fork
+        </GitHubButton>
+      </Stack>
+    </Box>
+  );
+};
+
+export default Banner;