add board buttons row for mobile and desktop, global styling for button

src/components/board-buttons/board-buttons.module.css

@@ -0,0 +1,20 @@
+.mobileBoardButtons {
+  text-align: center;
+  margin-top: 9px;
+}
+
+.mobileBoardButtons button {
+  margin: 0 2px;
+}
+
+@media (max-width: 640px) {
+  .desktopBoardButtons {
+    display: none;
+  }
+}
+
+@media (min-width: 640px) {
+  .mobileBoardButtons {
+    display: none;
+  }
+}

src/components/board-buttons/board-buttons.tsx

@@ -0,0 +1,42 @@
+import { useSubscribe } from '@plebbit/plebbit-react-hooks';
+import styles from './board-buttons.module.css';
+
+interface BoardButtonsProps {
+  address: string;
+}
+
+const OptionsButton = () => {
+  return <button className='button'>options</button>;
+};
+
+const CatalogButton = () => {
+  return <button className='button'>catalog</button>;
+};
+
+const SubscribeButton = ({ address }: BoardButtonsProps) => {
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: address });
+
+  return (
+    <button className='button' onClick={subscribed ? unsubscribe : subscribe}>
+      {subscribed ? 'Unsubscribe' : 'Subscribe'}
+    </button>
+  );
+};
+
+export const MobileBoardButtons = ({ address }: BoardButtonsProps) => {
+  return (
+    <div className={styles.mobileBoardButtons}>
+      <OptionsButton />
+      <CatalogButton />
+      <SubscribeButton address={address} />
+    </div>
+  );
+};
+
+export const DesktopBoardButtons = ({ address }: BoardButtonsProps) => {
+  return (
+    <div className={styles.desktopBoardButtons}>
+      <SubscribeButton address={address} />
+    </div>
+  );
+};

src/components/board-buttons/index.ts

@@ -0,0 +1 @@
+export { MobileBoardButtons, DesktopBoardButtons } from './board-buttons';