diff --git a/src/components/BoardStats.jsx b/src/components/BoardStats.jsx new file mode 100644 index 00000000..5f1adc98 --- /dev/null +++ b/src/components/BoardStats.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import { useSubplebbitStats } from "@plebbit/plebbit-react-hooks/dist"; +import { BoardStatsContainer } from "./styled/BoardStats.styled"; +import { Break } from "./styled/views/Board.styled"; +import useGeneralStore from '../hooks/stores/useGeneralStore'; + + +const BoardStats = ({ subplebbitAddress }) => { + const { selectedStyle } = useGeneralStore(state => state); + const stats = useSubplebbitStats({subplebbitAddress}); + + return ( + + + + + + + + + + + + + + + + + + + + +
In the past hour: {stats.hourActiveUserCount} users, {stats.hourPostCount} posts.  Past day: {stats.dayActiveUserCount} users, {stats.dayPostCount} posts.
Past week: {stats.weekActiveUserCount} users, {stats.weekPostCount} posts.  Past month: {stats.monthActiveUserCount} users, {stats.monthPostCount} posts.
Since inception: {stats.allActiveUserCount} users browsed; {stats.allPostCount} posts made.
+
+ ); +}; + +export default BoardStats; \ No newline at end of file diff --git a/src/components/styled/BoardStats.styled.jsx b/src/components/styled/BoardStats.styled.jsx new file mode 100644 index 00000000..c1e2aecc --- /dev/null +++ b/src/components/styled/BoardStats.styled.jsx @@ -0,0 +1,23 @@ +import styled from "styled-components"; + +export const BoardStatsContainer = styled.div` + @media (max-width: 480px) { + display: none; + } + + @media (min-width: 480px) { + width: 468px; + margin: auto; + + table { + border-spacing: 0px; + text-align: center; + width: 100%; + } + + tr { + vertical-align: top; + font-size: 11px; + } + } +`; \ No newline at end of file diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index ca48ba7f..9150ca91 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -13,11 +13,12 @@ import { Footer } from '../styled/views/Thread.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import EditModal from '../modals/EditModal'; -import EditLabel from '../EditLabel'; -import ImageBanner from '../ImageBanner'; import AdminListModal from '../modals/AdminListModal'; import ModerationModal from '../modals/ModerationModal'; import BoardSettings from '../BoardSettings'; +import BoardStats from '../BoardStats'; +import EditLabel from '../EditLabel'; +import ImageBanner from '../ImageBanner'; import OfflineIndicator from '../OfflineIndicator'; import PendingLabel from '../PendingLabel'; import Post from '../Post'; @@ -836,56 +837,57 @@ const Board = () => { - -
- [ - Start a New Thread - ] -
-
- - Start a New Thread - -
-
- - - - Name - - {account && account?.author && account?.author.displayName ? ( - - ) : ( - - )} - - - - Subject - - - - - - - Comment - -