chore: add sample UI

src/ContentScript/index.ts

@@ -1 +1,3 @@
 document.body.style.filter = 'invert(1)';
+
+export {};

src/Options/Options.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Options = () => {
+const Options: React.FC = () => {
     return <div>Hello World</div>;
 };
 

src/Popup/Popup.tsx

@@ -1,7 +1,40 @@
 import React from 'react';
+import { browser, Tabs } from 'webextension-polyfill-ts';
 
-const Popup = () => {
+function openWebPage(url: string): Promise<Tabs.Tab> {
-    return <div>Hello world</div>;
+    return browser.tabs.create({ url });
+}
+
+const Popup: React.FC = () => {
+    return (
+        <section id="popup">
+            <h2>WEB-EXTENSION-STARTER</h2>
+            <div className="links__holder">
+                <ul>
+                    <li>
+                        <button
+                            type="button"
+                            onClick={(): Promise<Tabs.Tab> => {
+                                return openWebPage('https://github.com/abhijithvijayan/web-extension-starter');
+                            }}
+                        >
+                            GitHub
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            onClick={(): Promise<Tabs.Tab> => {
+                                return openWebPage('https://www.buymeacoffee.com/abhijithvijayan');
+                            }}
+                        >
+                            Buy Me A Coffee
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </section>
+    );
 };
 
 export default Popup;

src/Popup/popup.scss

@@ -6,3 +6,34 @@ body {
   color: $black;
   background-color: $greyWhite;
 }
+
+
+#popup {
+  min-width: 350px;
+  padding: 30px 20px;
+
+  h2 {
+    font-size: 25px;
+    text-align: center;
+  }
+
+  .links__holder {
+    ul {
+      display: flex;
+      margin-top: 1em;
+      justify-content: space-around;
+
+      li {
+        button {
+          border-radius: 8%;
+          font-size: 20px;
+          font-weight: 600;
+          background-color: rgba(0, 0 ,255, 0.7);
+          color: white;
+          cursor: pointer;
+          padding: 8px 12px;
+        }
+      }
+    }
+  }
+}