Reorganize frontend and install Craco to alias modules (#190)

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { TbPlus } from 'react-icons/tb';
+import styled from '@emotion/styled';
+
+const TopBarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 38px;
+  align-items: center;
+  background: ${(props) => props.theme.noisyBackground};
+  padding: 8px;
+  font-size: 14px;
+  color: ${(props) => props.theme.text80};
+`;
+
+const TitleContainer = styled.div`
+  font-family: 'Inter';
+  margin-left: 4px;
+  font-size: 14px;
+  display: flex;
+  width: 100%;
+`;
+
+const AddButtonContainer = styled.div`
+  display: flex;
+  justify-self: flex-end;
+  flex-shrink: 0;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: ${(props) => props.theme.text80};
+  cursor: pointer;
+  user-select: none;
+  margin-right: ${(props) => props.theme.spacing(1)};
+`;
+
+type OwnProps = {
+  title: string;
+  icon: ReactNode;
+  onAddButtonClick?: () => void;
+};
+
+export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
+  return (
+    <>
+      <TopBarContainer>
+        {icon}
+        <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
+        {onAddButtonClick && (
+          <AddButtonContainer
+            data-testid="add-button"
+            onClick={onAddButtonClick}
+          >
+            <TbPlus size={16} />
+          </AddButtonContainer>
+        )}
+      </TopBarContainer>
+    </>
+  );
+}