Remove SC and refactor the code

.babelrc

@@ -1,14 +1,4 @@
 {
   "presets": ["next/babel"],
-  "plugins": [
-    ["styled-components", { "ssr": true }],
-    "inline-react-svg",
-    [
-      "import",
-      {
-        "libraryName": "antd",
-        "style": "css"
-      }
-    ]
-  ]
+  "plugins": ["inline-react-svg"]
 }

.gitignore

@@ -20,4 +20,5 @@ package-lock.json
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+.vercel

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Yuri Yakovlev
+Copyright (c) 2020 Yuri Yakovlev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

apiHooks/useAlgolia.ts

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+
+import fetch from '../libs/fetch';
+
+const useAlgolia = (phrase: string, initialData: any = {}) => {
+  return useSWR(
+    `/api/speakers${phrase ? `?phrase=${phrase}` : ''}`,
+    fetch,
+    initialData,
+  );
+};
+
+export default useAlgolia;

apiHooks/useTwitter.ts

@@ -0,0 +1,9 @@
+import useSWR from 'swr';
+
+import fetch from '../libs/fetch';
+
+const useTwitterImage = (username: string) => {
+  return useSWR(`/api/twitter?username=${username}`, fetch);
+};
+
+export default useTwitterImage;

components/button/Button.tsx

@@ -1,51 +1,49 @@
-import { Icon } from 'antd';
-import React from 'react';
-import styled from 'styled-components';
+import { FC } from 'react';
 
 interface Props {
   href: string;
   icon: string;
 }
 
-const ButtonWrapper = styled.a`
-  width: 40px;
-  padding: 0;
-  font-size: 18px;
-  border-radius: 50%;
-  height: 40px;
-  line-height: 38px;
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  user-select: none;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  position: relative;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
-  color: rgba(0, 0, 0, 0.65);
-  background-color: #fff;
-  border-color: #d9d9d9;
+// const ButtonWrapper = styled.a`
+//   width: 40px;
+//   padding: 0;
+//   font-size: 18px;
+//   border-radius: 50%;
+//   height: 40px;
+//   line-height: 38px;
+//   display: inline-block;
+//   font-weight: 400;
+//   text-align: center;
+//   touch-action: manipulation;
+//   cursor: pointer;
+//   background-image: none;
+//   border: 1px solid transparent;
+//   white-space: nowrap;
+//   user-select: none;
+//   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+//   position: relative;
+//   box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+//   color: rgba(0, 0, 0, 0.65);
+//   background-color: #fff;
+//   border-color: #d9d9d9;
 
-  &:hover,
-  &:focus {
-    color: #40a9ff;
-    background-color: #fff;
-    border-color: #40a9ff;
-  }
+//   &:hover,
+//   &:focus {
+//     color: #40a9ff;
+//     background-color: #fff;
+//     border-color: #40a9ff;
+//   }
 
-  &:last-child {
-    margin-right: 0;
-  }
-`;
+//   &:last-child {
+//     margin-right: 0;
+//   }
+// `;
 
-const Button = ({ href, icon }: Props) => (
-  <ButtonWrapper href={href} target="_blank" rel="noopener noreferrer">
-    <Icon type={icon} />
-  </ButtonWrapper>
+const Button: FC<Props> = ({ href, icon }) => (
+  <a href={href} target="_blank" rel="noopener noreferrer">
+    {/* <Icon type={icon} /> */}
+  </a>
 );
 
 export default Button;

components/button/index.ts

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;