diff --git a/src/components/styled/Home.styled.jsx b/src/components/styled/Home.styled.jsx index f8c81fa8..3ab9b6cd 100644 --- a/src/components/styled/Home.styled.jsx +++ b/src/components/styled/Home.styled.jsx @@ -171,6 +171,11 @@ export const Boards = styled.div` padding: 0; padding-bottom: .5em; background: #fff; + word-wrap: break-word; + + #subscriptions { + text-align: left; + } `; export const BoardsTitle = styled.div` @@ -237,6 +242,22 @@ export const BoardsContent = styled.div` padding: 0 2px; white-space: pre-line; } + + h3 { + font-size: 100%; + font-weight: 700; + text-align: left; + } + + .boardlink { + color: #800; + text-decoration: none; + + :hover { + text-decoration: underline; + color: #e00 + } + } `; export const Footer = styled.div` diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx index 1155aec1..c1fda378 100644 --- a/src/components/views/Home.jsx +++ b/src/components/views/Home.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { Helmet } from 'react-helmet-async'; -import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; import { Link, useNavigate } from 'react-router-dom'; import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled'; @@ -31,6 +31,7 @@ const Home = () => { setSelectedTitle } = useGeneralStore(state => state); + const account = useAccount(); const inputRef = useRef(null); const navigate = useNavigate(); @@ -98,9 +99,30 @@ const Home = () => { + {account.subscriptions?.length > 0 ? ( + + +

Board Subscriptions

+
+ +

+ You have subscribed to {account.subscriptions.length} board{account.subscriptions.length > 1 ? "s" : null} +

+
+ {account.subscriptions.map((subscription, index) => ( + <> + + {subscription} + +
+ + ))} +
+
+ ) : null} -

Popular boards

+

Popular Boards

{defaultSubplebbits.map(subplebbit => (