feat: log in github btn

docs/builders/get-started/darwinia-crab.md → docs/builders/get-started/darwinia-crab.mdx

@@ -14,6 +14,7 @@ Crab has two endpoints available for users to connect to: one for HTTPS and one
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import ClaimAirdrop from '../../../src/component/ClaimAirdrop';
 
 <Tabs
   defaultValue="wss"
@@ -46,3 +47,5 @@ wss://crab-rpc.darwinia.network
 ## Get Tokens
 
 To promote Crab Network to developers, meanwhile to make it easier for developers to start building on Crab, we launched a developer airdrop program. The developer airdrop program will distribute 200,000 CRAB, any Github account registered before December 30, 2021 will have the qualification to claim the airdrop.
+
+<ClaimAirdrop />

src/component/ClaimAirdrop/index.tsx

@@ -0,0 +1,23 @@
+import React, { useRef, useState } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+
+type Props = {
+  className?: string;
+}
+
+const ClaimAirdrop: React.FC<Props> = ({ className }) => {
+  const handleClickLoginWithGithub = (e: Event) => {
+    e.preventDefault();
+  }
+
+  return (
+    <div className={clsx(className)}>
+      <button className={clsx(styles.btnLoginWithGihub)} onClick={handleClickLoginWithGithub}>
+        <span>Log in with Github</span>
+      </button>
+    </div>
+  );
+};
+
+export default React.memo<Props>(ClaimAirdrop);

src/component/ClaimAirdrop/styles.module.scss

@@ -0,0 +1,33 @@
+%-btn-base {
+  transition: all 0.3s;
+  opacity: 1;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+.btnLoginWithGihub {
+  @extend %-btn-base;
+  padding: 8px 12px;
+  background: transparent;
+  border-radius: 10px;
+  border: 2px solid rgba(228, 26, 112, 0.9);
+
+  &:hover {
+    box-shadow: 0 0 4px rgba(228, 26, 112, 0.9);
+  }
+
+  &:active {
+    box-shadow: 0 0 8px rgba(228, 26, 112, 0.9);
+  }
+
+  >span {
+    font-weight: bold;
+    color: rgba(228, 26, 112, 0.9);
+  }
+}