feat: list item in design system

ComposableWeb · Apr 9, 2020 · f8be390 · f8be390
1 parent 081cb07
commit f8be390
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/packages/design-system/src/components/ListItem.tsx b/packages/design-system/src/components/ListItem.tsx
@@ -1,6 +1,13 @@
 /** @jsx jsx */
-import { jsx, Box } from 'theme-ui';
+import { jsx, Box, Styled } from 'theme-ui';
 
-export const ListItem: React.FC = props => (
-  <Box {...props} />
-)
+import { PageData } from '../../../poolbase-app/src/app/interfaces';
+
+export const ListItem: React.FC<{ data: PageData }> = ({
+  data,
+  ...rest
+}: React.PropsWithChildren<{ data: PageData }>) => (
+  <Box {...rest}>
+    <Styled.h3>{!data.metaTitle ? data.url : data.metaTitle}</Styled.h3>
+  </Box>
+);
diff --git a/packages/design-system/src/components/index.tsx b/packages/design-system/src/components/index.tsx
@@ -1 +1 @@
-export * from './ListItem'
+export * from './ListItem';
diff --git a/packages/poolbase-app/src/app/pages/index.tsx b/packages/poolbase-app/src/app/pages/index.tsx
@@ -1,10 +1,11 @@
 /** @jsx jsx */
-import { jsx, Styled } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { NextPage } from 'next';
 import { useState, useEffect } from 'react';
 
 import withAuthUser from '../utils/pageWrappers/withAuthUser';
 import { firestore, collectionData } from '../utils/auth/initFirebase';
+import { ListItem } from '../../../../design-system/src/components/ListItem';
 
 import PageLayout from '../components/PageLayout';
 import { PropsWithAuthUserInfo } from '../interfaces';
@@ -23,7 +24,7 @@ const HomePage: NextPage<PropsWithAuthUserInfo> = () => {
     <PageLayout>
       {data.map(
         (page): JSX.Element => (
-          <Styled.h3 key={page.id}>{page.url}</Styled.h3>
+          <ListItem key={page.id} data={page} />
         )
       )}
     </PageLayout>