form style

frontend/components/Form.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components'
+
+const StyledForm = styled.form`
+  display: grid;
+  grid-template-columns: 1fr 20px 2fr;
+
+  fieldset {
+  }
+
+  fieldset::after {
+    padding: 30px;
+    margin-bottom: 30px;
+  }
+
+  label {
+    grid-column: 1;
+  }
+
+  input  {
+    grid-column: 2/4;
+  }
+
+  input:radio {
+    grid-column: 2;
+  }
+
+  button:submit {
+    grid-column: 1/-1;
+  }
+`
+
+const DemoForm = props => (
+  <StyledForm>
+    <fieldset title="User">
+      <label htmlFor="name">Name</label>
+      <input type="text" name="name" id="name" />
+      <label htmlFor="email">Email</label>
+      <input type="email" name="email" id="email" />
+      <label htmlFor="password">Name</label>
+      <input type="password" name="password" id="password" />
+    </fieldset>
+    <fieldset>
+      <label htmlFor="search">Search</label>
+      <input type="search" name="search" id="search" />
+
+    </fieldset>
+    <button type="submit">Submit</button>
+  </StyledForm>
+)
+
+export default DemoForm
+export { StyledForm }

frontend/pages/index.js

@@ -3,11 +3,11 @@
  * https://www.prisma.io/docs/1.29/get-started/03-build-graphql-servers-with-prisma-JAVASCRIPT-e001/
  */
 
-import FileUpload from '../components/FileUpload'
+import DemoForm from '../components/Form'
 
 const Index = props => (
   <div>
-    <FileUpload />
+    <DemoForm />
   </div>
 )