feat: add title bar

src/components/button.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 
 export const Button = styled.button`
   font-family: virgil;
-  padding: 10px;
+  padding: 3px;
   background-color: #ffffff;
   font-size: 20px;
   border-radius: 4px;

src/components/index.ts

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

src/components/title-bar.tsx

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { floppy, sword } from "../icons";
+
+export const Title = styled.h1`
+font-family: virgil;
+font-weight: bolder;
+font-size: 2.em;
+margin: 2px;
+text-align: center;
+`
+
+export const TitleBar = () => {
+    return <div style={{ display: "flex", justifyContent: "center", paddingBottom: "15px", paddingTop: "5px" }}>
+        <img style={{ width: "25px", marginRight: "10px" }} src={sword} />
+        <Title>Excalistore</Title>
+        <img style={{ width: "35px", marginLeft: "10px" }} src={floppy} />
+    </div>
+}

src/icons/index.ts

@@ -0,0 +1,3 @@
+import floppy from "./floppy.svg";
+import sword from "./sword.svg";
+export { floppy, sword };

src/main.tsx

@@ -2,13 +2,13 @@
 import { Global } from '@emotion/react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Button, Title } from './components'
-import { GlobalStyles } from './fonts'
+import { Button, TitleBar } from './components'
+import { GlobalStyles } from './style'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Global styles={GlobalStyles} />
-    <Title>Hello!</Title>
+    <TitleBar />
     <Button>This is a test</Button>
   </React.StrictMode>,
 )

src/fonts/index.ts → src/style/index.ts

@@ -1,9 +1,20 @@
 import { css } from "@emotion/react";
+// global styles
 import virgil from "./Virgil.woff2";
 
 export const GlobalStyles = css`
   @font-face {
     font-family: "virgil";
     src: url(${virgil}) format("woff2");
   }
+  html {
+    min-width: 600px;
+    max-width: 600px;
+    
+    min-height: 450px;
+    max-height: 450px;
+    
+    border-radius: 1em;
+    font-family: virgil;
+  }
 `;