arch: move web folder into api & move api to top level

frontend/src/shared/components/ProjectGridItem/ProjectGridItem.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import ProjectGridItem from '.';
+
+export default {
+  component: ProjectGridItem,
+  title: 'ProjectGridItem',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#f8f8f8' },
+    ],
+  },
+};
+
+const projectsData = [
+  { taskGroups: [], teamTitle: 'Personal', projectID: 'aaaa', name: 'Citadel', color: '#aa62e3' },
+  { taskGroups: [], teamTitle: 'Personal', projectID: 'bbbb', name: 'Editorial Calender', color: '#aa62e3' },
+  { taskGroups: [], teamTitle: 'Personal', projectID: 'cccc', name: 'New Blog', color: '#aa62e3' },
+];
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+`;
+
+const ProjectsWrapper = styled.div`
+  width: 60%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Default = () => {
+  return (
+    <Container>
+      <ProjectsWrapper>
+        {projectsData.map(project => (
+          <ProjectGridItem project={project} />
+        ))}
+      </ProjectsWrapper>
+    </Container>
+  );
+};

frontend/src/shared/components/ProjectGridItem/Styles.ts

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+import { mixin } from 'shared/utils/styles';
+
+export const AddProjectLabel = styled.span`
+  padding-top: 4px;
+  font-size: 14px;
+  color: #c2c6dc;
+`;
+
+export const ProjectContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ProjectTitle = styled.span`
+  font-size: 18px;
+  font-weight: 700;
+  transition: transform 0.25s ease;
+`;
+export const TeamTitle = styled.span`
+  margin-top: 5px;
+  font-size: 14px;
+  font-weight: normal;
+  color: #c2c6dc;
+`;
+
+export const ProjectWrapper = styled.div<{ color: string }>`
+  display: flex;
+  padding: 15px 25px; border-radius: 20px;
+  ${mixin.boxShadowCard}
+  background: ${props => mixin.darken(props.color, 0.35)};
+  color: #fff;
+  cursor: pointer;
+  margin: 0 10px;
+  width: 240px;
+  height: 100px;
+  transition: transform 0.25s ease;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    transform: translateY(-5px);
+  }
+`;
+
+export const AddProjectWrapper = styled.div`
+  display: flex;
+  padding: 15px 25px;
+  border-radius: 20px;
+  ${mixin.boxShadowCard}
+  border: 1px dashed;
+  border-color: #c2c6dc;
+  color: #fff;
+  cursor: pointer;
+  margin: 0 10px;
+  width: 240px;
+  flex-direction: column;
+  height: 100px;
+  transition: transform 0.25s ease;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    transform: translateY(-5px);
+  }
+`;

frontend/src/shared/components/ProjectGridItem/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Plus } from 'shared/icons';
+import { AddProjectWrapper, AddProjectLabel, ProjectWrapper, ProjectContent, ProjectTitle, TeamTitle } from './Styles';
+
+type AddProjectItemProps = {
+  onAddProject: () => void;
+};
+export const AddProjectItem: React.FC<AddProjectItemProps> = ({ onAddProject }) => {
+  return (
+    <AddProjectWrapper
+      onClick={() => {
+        onAddProject();
+      }}
+    >
+      <Plus size={20} color="#c2c6dc" />
+      <AddProjectLabel>New Project</AddProjectLabel>
+    </AddProjectWrapper>
+  );
+};
+type Props = {
+  project: Project;
+};
+
+const ProjectsList = ({ project }: Props) => {
+  const color = project.color ?? '#c2c6dc';
+  return (
+    <ProjectWrapper color={color}>
+      <ProjectContent>
+        <ProjectTitle>{project.name}</ProjectTitle>
+        <TeamTitle>{project.teamTitle}</TeamTitle>
+      </ProjectContent>
+    </ProjectWrapper>
+  );
+};
+
+export default ProjectsList;