added notes

src/components/notes/NoteCard/index.tsx

@@ -0,0 +1,24 @@
+import React, { VFC } from 'react';
+
+import { Card } from '~/components/containers/Card';
+import { Markdown } from '~/components/containers/Markdown';
+import { Padder } from '~/components/containers/Padder';
+import { formatText, getPrettyDate } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface NoteCardProps {
+  content: string;
+  createdAt: string;
+}
+
+const NoteCard: VFC<NoteCardProps> = ({ content, createdAt }) => (
+  <Card className={styles.note}>
+    <Padder>
+      <Markdown className={styles.wrap} dangerouslySetInnerHTML={{ __html: formatText(content) }} />
+    </Padder>
+    <Padder className={styles.footer}>{getPrettyDate(createdAt)}</Padder>
+  </Card>
+);
+
+export { NoteCard };

src/components/notes/NoteCard/styles.module.scss

@@ -0,0 +1,18 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+.note {
+  min-width: 0;
+  word-break: break-word;
+  padding: 0;
+
+  & > * {
+    @include row_shadow;
+  }
+}
+
+.footer {
+  font: $font_12_regular;
+  text-align: right;
+  opacity: 0.5;
+}