feat: add DrawingItem component

src/components/container.tsx

@@ -1,6 +1,12 @@
 import styled from "@emotion/styled";
 
-export const Group = styled.div`
+type GroupProps = {
+    justifyContent?: "center" | "space-between"
+    maxHeight?: number;
+}
+
+export const Group = styled.div<GroupProps>`
     display: flex; 
-    justify-content: center;
+    justify-content: ${props => (props.justifyContent ?? "center")};
+    max-height: ${props => props.maxHeight ? `${props.maxHeight}px` : undefined};
 `

src/components/index.ts

@@ -2,3 +2,4 @@ export * from "./button";
 export * from "./title-bar";
 export * from "./container";
 export * from "./input";
+export * from "./text";

src/components/text.tsx

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+
+type TextProps = {
+    size: "xl" | "l" | "s";
+    margin?: number
+}
+
+export const Text = styled.p<TextProps>`
+    font-size: ${(props) => {
+        switch (props.size) {
+            case "xl": return "20px";
+            case "l": return "10px";
+            case "s": return "18px";
+        }
+    }};
+    margin: ${props => props.margin ? `${props.margin}px` : 0};
+` 

src/main.tsx

@@ -1,10 +1,29 @@
 // entry point of the react app that powers the extension pop-up
-import { Global } from '@emotion/react'
+import { css, Global } from '@emotion/react'
+import styled from '@emotion/styled'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Button, Group, Input, TitleBar } from './components'
+import { Button, Group, Input, TitleBar, Text } from './components'
 import { GlobalStyles } from './style'
 
+const DrawingItem = ({ name, date }: { name: string, date: string }) => {
+  const ItemContainer = styled.div`
+    border: 1px solid black;
+    padding: 0px 10px;
+  `;
+  return <ItemContainer>
+    <Text margin={10} size='s'>{name}</Text>
+    <Group justifyContent="space-between">
+      <Group maxHeight={30}>
+        <Button>Open</Button>
+        <Button>Update</Button>
+        <Button>Bin it</Button>
+      </Group>
+      <Text size='s' margin={5}>{date}</Text>
+    </Group>
+  </ItemContainer>
+}
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Global styles={GlobalStyles} />
@@ -17,30 +36,14 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <h2 style={{ fontSize: "23px", marginBottom: "5px" }}>My drawings</h2>
     </Group>
     <div style={{ maxHeight: "245px", minHeight: "245px", overflow: "scroll", border: "2px solid black", borderRadius: "4px" }}>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
-      <Group>
-        <h3 style={{ fontSize: "23px" }}>Drawing 1</h3>
-      </Group>
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
+      <DrawingItem name="My awesome drawing" date='01/01/2023' />
     </div>
 
   </React.StrictMode>,