feat: add title and button components

package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -19,4 +21,4 @@
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
   }
-}
+}

src/components/button.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+
+export const Button = styled.button`
+  font-family: virgil;
+  padding: 10px;
+  background-color: #ffffff;
+  font-size: 20px;
+  border-radius: 4px;
+  color: black;
+  &:hover {
+    color: #ffffff;
+    background-color: black;
+  }
+`

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./typography";

src/components/typography.tsx

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const Title = styled.h1`
+font-family: virgil;
+font-weight: bolder;
+font-size: 3em;
+margin: 2px;
+`

src/fonts/index.ts

@@ -0,0 +1,9 @@
+import { css } from "@emotion/react";
+import virgil from "./Virgil.woff2";
+
+export const GlobalStyles = css`
+  @font-face {
+    font-family: "virgil";
+    src: url(${virgil}) format("woff2");
+  }
+`;

src/main.tsx

@@ -1,8 +1,14 @@
+// entry point of the react app that powers the extension pop-up
+import { Global } from '@emotion/react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { Button, Title } from './components'
+import { GlobalStyles } from './fonts'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <h1>Hello!</h1>
+    <Global styles={GlobalStyles} />
+    <Title>Hello!</Title>
+    <Button>This is a test</Button>
   </React.StrictMode>,
-)
+)