add catalog view

src/components/catalog-row/catalog-row.module.css

@@ -0,0 +1,39 @@
+.row {
+  display: flex; 
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.post {
+  width: 180px;
+  font-size: 12px;
+
+  /* fix text overflowing */
+  overflow: hidden;
+}
+
+.postHeader {
+  /* make cursors like button */
+  cursor: pointer;
+}
+
+.postStats {
+  font-weight: bold;
+}
+
+.media {
+  height: 180px;
+}
+
+/* media and no media must be the same height, or the infinite scroll bugs out */
+.mediaWrapper {
+  overflow: hidden;
+  width: 180px;
+  height: 180px;
+}
+
+/* add some padding to rows when there's no image */
+.noMedia {
+  height: 2px;
+}

src/components/catalog-row/catalog-row.tsx

@@ -0,0 +1,25 @@
+import styles from './catalog-row.module.css';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+
+const CatalogPost = ({ post }: { post: Comment }) => {
+  const { title, cid } = post || {};
+
+  return <div className={styles.post}>{title || 'this is a post without a title'}</div>;
+};
+
+interface CatalogRowProps {
+  description: any | undefined;
+  index: number;
+  rules: any | undefined;
+  row: Comment[];
+}
+
+const CatalogRow = ({ description, index, row, rules }: CatalogRowProps) => {
+  const rowPosts = index === 0 ? [...(rules?.content?.length > 0 ? [rules] : []), ...(description?.content?.length > 0 ? [description] : []), ...row] : row;
+
+  const posts = rowPosts.map((post, index) => <CatalogPost key={index} post={post} />);
+
+  return <div className={styles.row}>{posts}</div>;
+};
+
+export default CatalogRow;

src/components/catalog-row/index.ts

@@ -0,0 +1 @@
+export { default } from './catalog-row';