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';

src/components/subplebbit-description/subplebbit-description.tsx

@@ -1,4 +1,5 @@
 import Post from '../post';
+
 interface DescriptionPostProps {
   subplebbitAddress: string | undefined;
   createdAt: number;
@@ -7,7 +8,7 @@ interface DescriptionPostProps {
   title: string;
 }
 
-export const SubplebbitDescription = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
+const SubplebbitDescription = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
   const post = {
     isDescription: true,
     subplebbitAddress,

src/components/subplebbit-rules/subplebbit-rules.tsx

@@ -6,7 +6,7 @@ interface RulesPostProps {
   rules: string[];
 }
 
-export const SubplebbitRules = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
+const SubplebbitRules = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
   const content = rules.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
   const post = {
     isRules: true,