diff --git a/src/app.tsx b/src/app.tsx index f8f22b94..380699a7 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,14 +1,35 @@ import { useEffect } from 'react'; -import { Outlet, Route, Routes, useLocation } from 'react-router-dom'; +import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom'; import { isHomeView } from './lib/utils/view-utils'; +import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import styles from './app.module.css'; import useTheme from './hooks/use-theme'; import Home from './views/home'; import Subplebbit from './views/subplebbit'; import BoardNav from './components/board-nav'; import BoardBanner from './components/board-banner'; +import BoardStats from './components/board-stats'; import PostForm from './components/post-form'; +const BoardLayout = () => { + const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); + const subplebbit = useSubplebbit({ subplebbitAddress }); + + return ( + <> + {subplebbitAddress && ( + <> + + + + + + )} + + + ); +}; + const App = () => { const [theme] = useTheme(); const location = useLocation(); @@ -26,21 +47,11 @@ const App = () => { // // ); - const boardLayout = ( - <> - - - - {/* */} - - - ); - return (
} /> - + }> } /> diff --git a/src/components/board-banner/board-banner.module.css b/src/components/board-banner/board-banner.module.css index e27943ca..cf1ef2ab 100644 --- a/src/components/board-banner/board-banner.module.css +++ b/src/components/board-banner/board-banner.module.css @@ -21,8 +21,8 @@ .boardAddress { padding-top: 5px; - font-size: var(--board-subtitle-font-size); - color: var(--board-subtitle-text-color); + font-size: var(--board-address-font-size); + color: var(--board-address-text-color); } .content hr { diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx index 6d2df9ed..50041dfd 100644 --- a/src/components/board-banner/board-banner.tsx +++ b/src/components/board-banner/board-banner.tsx @@ -1,6 +1,4 @@ import { useState } from 'react'; -import { useParams } from 'react-router-dom'; -import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import styles from './board-banner.module.css'; const totalBanners = 25; @@ -14,15 +12,16 @@ const ImageBanner = () => { return banner; }; -const BoardBanner = () => { - const { subplebbitAddress } = useParams(); - const subplebbit = useSubplebbit({ subplebbitAddress }); - const { address, title } = subplebbit || {}; +interface BoardBannerProps { + title: string | undefined; + address: string | undefined; +} +const BoardBanner = ({ title, address }: BoardBannerProps) => { return (
- +
{title || `p/${address}`}
{title &&
p/{address}
} diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 22c20034..30b42d0e 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -1,9 +1,10 @@ -import { Link, useNavigate, useParams } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import useDefaultSubplebbits from '../../hooks/use-default-subplebbits'; import styles from './board-nav.module.css'; interface BoardNavProps { - subplebbits: any; + address?: string | undefined; + subplebbits?: any; currentSubplebbit?: string | undefined; } @@ -55,14 +56,13 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => { ); }; -const BoardNav = () => { +const BoardNav = ({ address }: BoardNavProps) => { const defaultSubplebbits = useDefaultSubplebbits(); - const { subplebbitAddress } = useParams(); return ( <> - + ); }; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index fb583c27..0efde90c 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -1,7 +1,11 @@ import styles from './post-form.module.css'; import { useTranslation } from 'react-i18next'; -const PostForm = () => { +export interface PostFormProps { + address: string | undefined; +} + +const PostForm = ({ address }: PostFormProps) => { const { t } = useTranslation(); return ( diff --git a/src/themes.css b/src/themes.css index eb848ec6..8537617f 100644 --- a/src/themes.css +++ b/src/themes.css @@ -10,7 +10,7 @@ --boardnav-mobile-font-size: 10px; --board-title-font-size: 28px; --board-title-font-family: Tahoma, sans-serif; - --board-subtitle-font-size: x-small; + --board-address-font-size: x-small; --body-font-color: maroon; --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt; @@ -52,8 +52,8 @@ --board-title-font-size: 28px; --board-title-font-family: Tahoma, sans-serif; --board-title-text-color: #af0a0f; - --board-subtitle-text-color: #af0a0f; - --board-subtitle-font-size: x-small; + --board-address-text-color: #af0a0f; + --board-address-font-size: x-small; --body-font-color: #000; --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt; @@ -91,7 +91,7 @@ --boardnav-mobile-border-bottom: 2px solid #d9c5b7; --boardnav-mobile-font-size: 11pt; --board-title-font-size: 32px; - --board-subtitle-font-size: 10pt; + --board-address-font-size: 10pt; --body-font-color: maroon; --body-font-family: times new roman, serif; --body-font-size: 12pt; @@ -129,8 +129,8 @@ --boardnav-mobile-font-size: 11pt; --board-title-font-size: 32px; --board-title-text-color: #af0a0f; - --board-subtitle-text-color: #af0a0f; - --board-subtitle-font-size: 10pt; + --board-address-text-color: #af0a0f; + --board-address-font-size: 10pt; --body-font-color: #000; --body-font-family: times new roman, serif; --body-font-size: 12pt; @@ -170,7 +170,7 @@ --boardnav-mobile-font-size: 10px; --board-title-font-size: 28px; --board-title-font-family: Tahoma, sans-serif; - --board-subtitle-font-size: x-small; + --board-address-font-size: x-small; --body-font-color: #c5c8c6; --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt; @@ -205,7 +205,7 @@ --board-title-font-size: 28px; --board-title-font-family: Tahoma, sans-serif; --board-title-text-color: #004a99; - --board-subtitle-font-size: x-small; + --board-address-font-size: x-small; --body-font-color: #333; --body-font-family: arial, helvetica, sans-serif; --body-font-size: 10pt;