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

front/src/modules/ui/layout/navbar/NavItem.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+  to: string;
+  active?: boolean;
+  icon: ReactNode;
+};
+
+type StyledItemProps = {
+  active?: boolean;
+};
+
+const StyledItem = styled.button<StyledItemProps>`
+  display: flex;
+  align-items: center;
+  border: none;
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  cursor: pointer;
+  user-select: none;
+  background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
+  padding-top: ${(props) => props.theme.spacing(1)};
+  padding-bottom: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(1)};
+  font-family: 'Inter';
+  color: ${(props) =>
+    props.active ? props.theme.text100 : props.theme.text60};
+  border-radius: 4px;
+  :hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: ${(props) => props.theme.text100};
+  }
+  margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
+`;
+
+const StyledItemLabel = styled.div`
+  display: flex;
+  margin-left: ${(props) => props.theme.spacing(2)};
+`;
+
+function NavItem({ label, icon, to, active }: OwnProps) {
+  const navigate = useNavigate();
+
+  return (
+    <StyledItem
+      onClick={() => {
+        navigate(to);
+      }}
+      active={active}
+      aria-selected={active}
+    >
+      {icon}
+      <StyledItemLabel>{label}</StyledItemLabel>
+    </StyledItem>
+  );
+}
+
+export default NavItem;