Ui/layout

components/Content.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+
+import { EditorMode } from '@/constants';
+import fakeData from '@/fakeData';
+
+import ContentBottomBar from './ContentBottomBar';
+
+const Wrapper = styled.div`
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-left: solid 1px;
+  background: white;
+`;
+
+const Title = styled.div`
+  padding: 0.5em 1em;
+  border-bottom: solid 3px;
+  font-weight: bold;
+  font-size: 1.2em;
+  background: ${p => p.theme.colors.lightMain};
+`;
+
+const Content: React.FC = () => {
+  const data = fakeData[0];
+  return (
+    <Wrapper>
+      <Title>{data.name}</Title>
+      <div style={{ flex: 1, padding: '.5em' }}>
+        <ReactMarkdown>{data.content}</ReactMarkdown>
+      </div>
+      <ContentBottomBar mode={EditorMode.Edit}/>
+    </Wrapper>
+  );
+};
+
+export default Content;

components/ContentBottomBar.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { BiEditAlt, BiSave, BiTrash, BiX } from 'react-icons/bi';
+import styled from 'styled-components';
+
+import { EditorMode } from '@/constants';
+
+import ContentIcon from './ContentIcon';
+
+const Wrapper = styled.div<{ mode: EditorMode }>`
+  display: flex;
+  justify-content: ${p =>p.mode === EditorMode.View ? 'flex-end' : 'space-between'};
+  border-top: solid 3px;
+  padding: 0.5em 1em;
+`;
+
+const SaveIcon = styled(ContentIcon)`
+  margin-left: auto;
+  margin-right: 2em;
+`;
+
+type Props = {
+  mode: EditorMode;
+};
+
+const ContentBottomBar: React.FC<Props> = ({ mode }) => {
+  return (
+    <Wrapper mode={mode}>
+      {mode === EditorMode.View ? (
+        <ContentIcon icon={<BiEditAlt size="30px" />} name="Edit" />
+      ) : (
+        <>
+          <ContentIcon icon={<BiX size="30px" />} name="Cancel" />
+          <SaveIcon icon={<BiSave size="30px" />} name="Save" />
+          <ContentIcon icon={<BiTrash size="30px" />} name="Delete" />
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+export default ContentBottomBar;

components/ContentIcon.tsx

@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  icon: ReactElement;
+  name: string;
+  className?: string;
+};
+
+const Wrapper = styled.div`
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: .8rem;
+
+  &:hover {
+    color: ${p => p.theme.colors.main};
+  }
+`;
+
+const ContentIcon: React.FC<Props> = ({ icon, name, className }) => {
+  return (
+    <Wrapper className={className}>
+      {icon}
+      <span>{name}</span>
+    </Wrapper>
+  );
+};
+
+export default ContentIcon;

components/NotesList.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ItemWrapper = styled.div`
+  display: flex;
+  margin: .5rem 1rem;
+  padding: .5rem 1rem;
+  background: white;
+  height: 50px;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+    background-color: ${p => p.theme.colors.lightMain}
+  }
+
+  &:first-child {
+    margin-top: 1rem;
+  }
+
+  &:last-child {
+    margin-bottom: 1rem;
+  }
+`;
+
+type Props = {
+  notes: any[];
+}
+
+const NotesList: React.FC<Props> = ({ notes }) => {
+  return (
+    <div style={{ flex: 1, overflow: 'scroll' }}>
+      {notes.map(d => (
+        <ItemWrapper key={d.id} ><p>{d.name}</p></ItemWrapper>
+      ))}
+    </div>
+  );
+};
+
+export default NotesList;

components/TopBar.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BiPlusMedical } from 'react-icons/bi';
+import styled from 'styled-components';
+
+import { TOPBAR_HEIGHT } from '@/constants';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: ${TOPBAR_HEIGHT};
+  border-bottom: solid 2px;
+  padding: 0 2em;
+`;
+
+const Button = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40%;
+  max-width: 250px;
+  padding: 0.5em 1em;
+  color: white;
+  font-size: 1.2rem;
+  background: ${p => p.theme.colors.main};
+  cursor: pointer;
+`;
+
+const TopBar: React.FC = () => {
+  return (
+    <Wrapper>
+      <Button>
+        <BiPlusMedical size="20px" style={{ marginRight: '10px' }}/>
+        New note
+      </Button>
+    </Wrapper>
+  );
+};
+
+export default TopBar;

constants.ts

@@ -0,0 +1,6 @@
+export const TOPBAR_HEIGHT = '66px';
+
+export enum EditorMode {
+  Edit = 'EDIT',
+  View = 'VIEW',
+}

fakeData.ts

@@ -0,0 +1,12 @@
+const obj = {
+  name: 'test',
+  content: '# Hello, *world*! \n num: ',
+  createdAt: new Date().getTime(),
+};
+
+export default Array.from({ length: 100 }).map((_, idx) => ({
+  id: String(idx + 1),
+  name: obj.name + (idx + 1),
+  content: obj.content + (idx + 1),
+  createdAt: obj.content + (idx + 1),
+}));

layouts/App.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import TopBar from '@/components/TopBar';
+import { TOPBAR_HEIGHT } from '@/constants';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const MainContainer = styled.main`
+  display: flex;
+  height: calc(100% -  ${TOPBAR_HEIGHT});
+  background: ${p => p.theme.colors.bg};
+`;
+
+const AppLayout: React.FC = ({ children }) => {
+  return (
+    <Container>
+      <TopBar />
+      <MainContainer>{children}</MainContainer>
+    </Container>
+  );
+};
+
+export default AppLayout;

package.json

@@ -15,7 +15,10 @@
     "next": "9.5.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "styled-components": "^5.2.0"
+    "react-icons": "^3.11.0",
+    "react-markdown": "^4.3.1",
+    "styled-components": "^5.2.0",
+    "styled-normalize": "^8.0.7"
   },
   "devDependencies": {
     "@types/node": "^14.11.8",

pages/index.tsx

@@ -1,20 +1,17 @@
-import Link from 'next/link';
 import React from 'react';
-import styled from 'styled-components';
 
-const StyledLink = styled.a`
-  color: ${p => p.theme.colors.main};
-  text-decoration: underline;
-`;
+import Content from '@/components/Content';
+import NotesList from '@/components/NotesList';
+import fakeData from '@/fakeData';
+import AppLayout from '@/layouts/App';
 
 const App = () => {
+
   return (
-    <div>
-      123
-      <Link href="/test">
-        <StyledLink>go test</StyledLink>
-      </Link>
-    </div>
+    <AppLayout>
+      <NotesList notes={fakeData} />
+      <Content />
+    </AppLayout>
   );
 };
 

styles/global.ts

@@ -1,18 +1,41 @@
 import { createGlobalStyle } from 'styled-components';
-/*
-System font-stack
-https://css-tricks.com/snippets/css/system-font-stack/
-*/
+import { normalize } from 'styled-normalize';
 
 export default createGlobalStyle`
+  ${normalize}
+
+  * {
+    box-sizing: border-box;
+  }
+
   html,
   body,
   #__next {
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
+    color: #333333;
   }
+
+  /*
+  System font-stack
+  https://css-tricks.com/snippets/css/system-font-stack/
+  */
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
       Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
       'Segoe UI Symbol';
   }
+
+  input, button {
+    outline: none;
+    border: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  a {
+    color: inherit;
+  }
 `;

styles/theme.ts

@@ -1,12 +1,51 @@
 import { DefaultTheme } from 'styled-components'
 
-const theme: DefaultTheme = {
+export const colors = {
+  primary: {
+    100: '#ffeccb',
+    200: '#fab664',
+    500: '#eb6702',
+    600: '#ca4e01',
+  },
+  secondary: {
+    100: '#cbf7ff',
+    200: '#53d2e8',
+    500: '#37b8cf',
+    600: '#309eb2',
+  },
+  danger: {
+    100: '#ffe4d7',
+    200: '#ff9872',
+    500: '#fc3738',
+    600: '#e11d3e',
+  },
+  success: {
+    100: '#e5fddc',
+    200: '#9ff194',
+    500: '#4cd154',
+    600: '#36b44b',
+  },
+  warning: {
+    100: '#fef7cd',
+    200: '#feeb9c',
+    500: '#ffd033',
+    600: '#f4b507',
+  },
+  gray: {
+    100: '#EDF2F7',
+    200: '#E2E8F0',
+    500: '#718096',
+    600: '#4A5568',
+  }
+}
+
+export const theme: DefaultTheme = {
   borderRadius: '5px',
 
   colors: {
-    main: 'cyan',
-    secondary: 'magenta',
+    main: colors.primary[500],
+    lightMain: colors.primary[100],
+    secondary: colors.secondary[500],
+    bg: colors.gray[100],
   },
-}
-
-export { theme }
+}