interface: initial skeleton of post feed, breaking out into different components

pkg/interface/src/views/landscape/components/GroupsPane.tsx

@@ -190,7 +190,7 @@ export function GroupsPane(props: GroupsPaneProps) {
         }}
       />
       <Route
-        path={[relativePath('/'), relativePath('/feed')]}
+        path={[relativePath('/'), relativePath('/feed+')]}
         render={(routeProps) => {
           const shouldHideSidebar =
             routeProps.location.pathname.includes('/feed');

pkg/interface/src/views/landscape/components/Home/GroupFeed.js

@@ -1,32 +1,24 @@
 import React from 'react';
-import { Box, Col, Row, Text } from '@tlon/indigo-react';
-import { Link } from 'react-router-dom';
+import { Box, Row, Text } from '@tlon/indigo-react'
+import { GroupFeedHeader } from './GroupFeedHeader';
+import { PostInput } from './PostInput';
+import { PostFeed } from './PostFeed';
 
 
-export function GroupFeedHeader(props) {
-  const { baseUrl } = props;
-
-  return (
-    <Row 
-      width="100%"
-      height="48px"
-      pl="2"
-      pr="2"
-      alignItems="center"
-      borderBottom={1}
-      borderColor="washedGray">
-      <Link to={baseUrl}><Text>{'<- Back'}</Text></Link>
-    </Row>
-  );
-}
-
 export function GroupFeed(props) {
-  const { baseUrl } = props;
+  const { baseUrl, api, history } = props;
 
   return (
-    <Box width="100%" height="100%">
-      <GroupFeedHeader baseUrl={baseUrl} />
-      <Row width="100%">
+    <Box
+      width="100%"
+      height="100%"
+      display="flex"
+      flexDirection="column"
+      alignItems="center">
+      <GroupFeedHeader baseUrl={baseUrl} history={history} />
+      <Row width="100%" maxWidth="616px" pt="4" pl="" pr="2" flexGrow="1">
+        <PostInput api={api} />
+        <PostFeed />
       </Row> 
     </Box>
   );

pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Row, Text } from '@tlon/indigo-react';
+import { Link } from 'react-router-dom';
+
+
+export function GroupFeedHeader(props) {
+  const { baseUrl, history } = props;
+
+  return (
+    <Row 
+      flexShrink="1"
+      width="100%"
+      height="48px"
+      pl="2"
+      pr="2"
+      alignItems="center"
+      borderBottom={1}
+      borderColor="washedGray">
+      { baseUrl !== history.location.pathname ? (
+          <Link to={baseUrl}><Text>{'<- Back'}</Text></Link>
+        ) : null
+      }
+    </Row>
+  );
+}
+
+

pkg/interface/src/views/landscape/components/Home/PostFeed.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Box } from '@tlon/indigo-react';
+
+
+export function PostFeed(props) {
+  return <Box></Box>;
+}
+

pkg/interface/src/views/landscape/components/Home/PostInput.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '@tlon/indigo-react';
+
+
+export function PostInput(props) {
+  return (
+    <Box mb="3" width="100%" height="96px" border={1} borderColor="washedGray">
+    </Box>
+  );
+}
+
+