init

src/components/Add.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Theme } from '../theme';
+import AddText from './AddText';
+import AddFile from './AddFile';
+
+const Wrapper = styled.div`
+`;
+
+const Top = styled.div`
+  display: flex;
+`;
+
+const Button = styled.button<{
+  active: boolean;
+  theme: Theme;
+}>`
+  background: ${({ active }) => active ? '#2c3e50' : 'transparent'};
+  padding: ${({ theme }) => theme.margin.medium}px; 
+  border: none;
+  font: inherit;
+  color: inherit;
+`;
+
+const Panel = styled.div<{
+  theme: Theme;
+}>`
+  background: #2c3e50;
+  color: #fff;
+  padding: ${({ theme }) => theme.margin.medium}px; 
+`;
+
+const Add: React.FC = () => {
+  const [type, setType] = useState<'file' | 'text'>('text');
+
+  return (
+    <Wrapper>
+      <Top>
+        <Button active={type==='text'} onClick={() => setType('text')}>Text</Button>
+        <Button active={type==='file'} onClick={() => setType('file')}>File</Button>
+      </Top>
+      <Panel>
+        {type === 'file' && <AddFile />}
+        {type === 'text' && <AddText />}
+      </Panel>
+    </Wrapper>
+  );
+};
+
+export default Add;