diff --git a/src/app.tsx b/src/app.tsx index 380699a7..a3394d95 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -22,7 +22,7 @@ const BoardLayout = () => { - + )} diff --git a/src/components/board-stats/board-stats.module.css b/src/components/board-stats/board-stats.module.css new file mode 100644 index 00000000..044205af --- /dev/null +++ b/src/components/board-stats/board-stats.module.css @@ -0,0 +1,40 @@ +.content hr { + width: 468px; + /* revert to browser styling for burichan and futaba */ + border: var(--hr-border, revert); + border-top: var(--hr-border-top, revert); + height: var(--hr-height, revert); +} + +.blotter { + width: 468px; + margin: auto; + line-height: 1; + margin-top: -1px; +} + +.blotter table { + border-spacing: 0px; + width: 100%; + margin-top: -1px; + padding-left: 3px; +} + +.blotter tr { + vertical-align: top; + font-size: 11px; +} + +.blotter tfoot { + text-align: right; +} + +.hideButton { + color: var(--button-text-color); + text-decoration: var(--button-text-decoration); +} + +.hideButton:hover { + cursor: pointer; + color: var(--button-text-color-hover); +} \ No newline at end of file diff --git a/src/components/board-stats/board-stats.tsx b/src/components/board-stats/board-stats.tsx new file mode 100644 index 00000000..936f9f66 --- /dev/null +++ b/src/components/board-stats/board-stats.tsx @@ -0,0 +1,71 @@ +import { useState } from 'react'; +import { useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; +import styles from './board-stats.module.css'; + +export interface BoardStatsProps { + address: string | undefined; + createdAt: number; +} + +const BoardStats = ({ address, createdAt }: BoardStatsProps) => { + const stats = useSubplebbitStats({ subplebbitAddress: address }); + const [showStats, setShowStats] = useState(true); + + const unixToMMDDYYYY = (timestamp: number) => { + const date = new Date(timestamp * 1000); + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + const year = date.getFullYear().toString().slice(-2); + return month + '/' + day + '/' + year; + }; + + const pluralize = (count: number, singular: string, plural: string) => (count === 1 ? singular : plural); + + return ( +
+
+ + {showStats && ( + + + + + + + + + + + + )} + + + + + +
+ In the past hour, {stats.hourActiveUserCount} {pluralize(stats.hourActiveUserCount, 'user', 'users')} made{' '} + {stats.hourPostCount} {pluralize(stats.hourPostCount, 'post', 'posts')} / in the past day,{' '} + {stats.dayActiveUserCount} {pluralize(stats.dayActiveUserCount, 'user', 'users')} made{' '} + {stats.dayPostCount} {pluralize(stats.dayPostCount, 'post', 'posts')} +
+ In the past week, {stats.weekActiveUserCount} {pluralize(stats.weekActiveUserCount, 'user', 'users')} made{' '} + {stats.weekPostCount} {pluralize(stats.weekPostCount, 'post', 'posts')} / in the past month,{' '} + {stats.monthActiveUserCount} {pluralize(stats.monthActiveUserCount, 'user', 'users')} made{' '} + {stats.monthPostCount} {pluralize(stats.monthPostCount, 'post', 'posts')} +
+ {unixToMMDDYYYY(createdAt)} board created / since then, {stats.allActiveUserCount}{' '} + {pluralize(stats.allActiveUserCount, 'user', 'users')} have made {stats.allPostCount}{' '} + {pluralize(stats.allPostCount, 'post', 'posts')} +
+ [ + setShowStats(!showStats)}> + {showStats ? 'Hide' : 'Show Stats'} + + ] +
+
+ ); +}; + +export default BoardStats; diff --git a/src/components/board-stats/index.ts b/src/components/board-stats/index.ts new file mode 100644 index 00000000..0fd4e296 --- /dev/null +++ b/src/components/board-stats/index.ts @@ -0,0 +1 @@ +export { default } from './board-stats'; diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index c5d55d41..e071d1ca 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -5,11 +5,11 @@ } .togglePostForm span { - color: var(--post-form-toggle-text-color); - text-decoration: var(--post-form-toggle-text-decoration); + color: var(--button-text-color); + text-decoration: var(--button-text-decoration); } .togglePostForm span:hover { cursor: pointer; - color: var(--post-form-toggle-text-color-hover); + color: var(--button-text-color-hover); } \ No newline at end of file diff --git a/src/themes.css b/src/themes.css index 8537617f..c336e00a 100644 --- a/src/themes.css +++ b/src/themes.css @@ -15,6 +15,8 @@ --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt; --box-border-color: #800; + --button-text-color: #00e; + --button-text-color-hover: red; --color1: #800; --color2: #fca; --color3: #fed; @@ -29,8 +31,6 @@ --internal-link-text-decoration-hover: underline; --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; - --post-form-toggle-text-color: #00e; - --post-form-toggle-text-color-hover: red; --text-color: maroon; --text-color-on-color1: #fff; --text-color-on-color2: #800; @@ -58,6 +58,8 @@ --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt; --box-border-color: #000; + --button-text-color: #34345c; + --button-text-color-hover: #d00; --color1: #98e; --color2: #98e; --color3: #eef2ff; @@ -71,8 +73,6 @@ --internal-link-text-decoration-hover: underline; --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; - --post-form-toggle-text-color: #34345c; - --post-form-toggle-text-color-hover: #d00; --text-color: #000; --text-color-on-color1: #000; --text-color-on-color2: #000; @@ -96,6 +96,9 @@ --body-font-family: times new roman, serif; --body-font-size: 12pt; --box-border-color: #800; + --button-text-color: #00e; + --button-text-color-hover: red; + --button-text-decoration: underline; --color1: #800; --color2: #fca; --color3: #fed; @@ -107,9 +110,6 @@ --internal-link-text-decoration-hover: underline; --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; - --post-form-toggle-text-color: #00e; - --post-form-toggle-text-decoration: underline; - --post-form-toggle-text-color-hover: red; --text-color: maroon; --text-color-on-color1: #fff; --text-color-on-color2: #800; @@ -135,6 +135,9 @@ --body-font-family: times new roman, serif; --body-font-size: 12pt; --box-border-color: #000; + --button-text-color: #34345c; + --button-text-decoration: underline; + --button-text-color-hover: #d00; --color1: #98e; --color2: #98e; --color3: #eef2ff; @@ -146,9 +149,6 @@ --internal-link-text-decoration-hover: underline; --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; - --post-form-toggle-text-color: #34345c; - --post-form-toggle-text-decoration: underline; - --post-form-toggle-text-color-hover: #d00; --text-color: #000; --text-color-on-color1: #000; --text-color-on-color2: #000; @@ -175,6 +175,8 @@ --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt; --box-border-color: rgb(45, 47, 51); + --button-text-color: #81a2be; + --button-text-color-hover: #5f89ac; --color1: rgb(33, 35, 38); --color2: rgb(33, 35, 38); --hr-border: none; @@ -184,8 +186,6 @@ --internal-link-text-color-hover: #5f89ac; --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; - --post-form-toggle-text-color: #81a2be; - --post-form-toggle-text-color-hover: #5f89ac; --text-color: #c5c8c6; --text-color-standard: #c5c8c6; --text-color-on-color1: #c5c8c6; @@ -209,6 +209,8 @@ --body-font-color: #333; --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt; + --button-text-color: #f60; + --button-text-color-hover: #f30; --hr-border: none; --hr-border-top: 1px solid #ddd; --hr-height: 0px; @@ -216,7 +218,5 @@ --internal-link-text-color-hover: #f30; --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; - --post-form-toggle-text-color: #f60; - --post-form-toggle-text-color-hover: #f30; --text-color: #333; } \ No newline at end of file