Skip to content

Commit 206a965

Browse files
ben221199ben221199
committed
Add sidebar
1 parent 05bb4d5 commit 206a965

8 files changed

Lines changed: 647 additions & 652 deletions

File tree

‎package-lock.json‎

Lines changed: 299 additions & 560 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx‎

Lines changed: 38 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,41 @@
1-
import {JSX, useEffect, useState} from "react";
2-
3-
import LBRY from "./LBRY";
4-
import ClaimPreviewTile from "./components/ClaimPreviewTile";
5-
6-
const notTags = ["porn","porno","nsfw","mature","xxx","sex","creampie","blowjob","handjob","vagina","boobs","big boobs","big dick","pussy","cumshot","anal","hard fucking","ass","fuck","hentai"];
7-
8-
function App(): JSX.Element {
9-
const [row1,setRow1] = useState([]);
10-
const [row2,setRow2] = useState([]);
11-
const [row3,setRow3] = useState([]);
12-
13-
useEffect((): void => {
14-
LBRY.rpc(import.meta.env.VITE_DAEMON_DEFAULT,'claim_search',{"page_size":4,"claim_type":["stream","repost","channel"],"no_totals":true,"any_tags":[],"not_tags":notTags,"channel_ids":["80d2590ad04e36fb1d077a9b9e3a8bba76defdf8","b58dfaeab6c70754d792cdd9b56ff59b90aea334"],"not_channel_ids":[],"order_by":["release_time"],"has_source":true,"release_time":">1731193200","include_purchase_receipt":true},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
15-
setRow1(json.result.items);
16-
});
17-
},[]);
18-
19-
useEffect((): void => {
20-
LBRY.rpc(import.meta.env.VITE_DAEMON_DEFAULT,'claim_search',{"page_size":4,"claim_type":["stream"],"no_totals":true,"any_tags":[],"not_tags":notTags,"channel_ids":[],"not_channel_ids":[],"order_by":["effective_amount"],"has_source":true,"release_time":">1762902000","limit_claims_per_channel":2,"include_purchase_receipt":true},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
21-
setRow2(json.result.items);
22-
});
23-
},[]);
24-
25-
useEffect((): void => {
26-
LBRY.rpc(import.meta.env.VITE_DAEMON_DEFAULT,'claim_search',{"page_size":4,"claim_type":["stream","repost","channel"],"no_totals":true,"any_tags":[],"not_tags":notTags,"channel_ids":["3fda836a92faaceedfe398225fb9b2ee2ed1f01a"],"not_channel_ids":[],"order_by":["release_time"],"has_source":true,"include_purchase_receipt":true},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
27-
setRow3(json.result.items);
28-
});
29-
},[]);
30-
31-
return (
32-
<>
33-
<div className="claim-preview-section">
34-
{row1.map((cell: unknown, i: number) => (
35-
<ClaimPreviewTile claim={cell} key={i}/>
36-
))}
37-
</div>
38-
{row2.length > 0 ? <h2>Top Content from Today</h2> : null}
39-
<div className="claim-preview-section">
40-
{row2.map((cell: unknown, i: number) => (
41-
<ClaimPreviewTile claim={cell} key={i}/>
42-
))}
43-
</div>
44-
{row3.length > 0 ? <h2>Latest From @lbry</h2> : null}
45-
<div className="claim-preview-section">
46-
{row3.map((cell: unknown, i: number) => (
47-
<ClaimPreviewTile claim={cell} key={i}/>
48-
))}
49-
</div>
50-
</>
51-
);
1+
import React, {JSX, StrictMode, useState} from "react";
2+
import {Route, Routes} from "react-router";
3+
4+
import AppRouter from "./AppRouter";
5+
import Home from "./Home";
6+
import ClaimPage from "./ClaimPage";
7+
import WalletPage from "./WalletPage";
8+
import SearchPage from "./SearchPage";
9+
import SettingsPage from "./SettingsPage";
10+
import NotFound from "./NotFound";
11+
12+
import Aside from "./components/Aside";
13+
import Header from "./components/Header";
14+
// import Footer from "./components/Footer";
15+
16+
function App(): JSX.Element{
17+
const [isMenuOpen,setMenuOpen] = useState(false);
18+
19+
return (
20+
<StrictMode>
21+
<AppRouter>
22+
<Header menuOpen={isMenuOpen} menuOpenSetter={setMenuOpen}/>
23+
<Aside open={isMenuOpen}/>
24+
<main>
25+
<Routes>
26+
<Route index path="/" element={<Home/>}/>
27+
<Route path="/about" element={<Home/>}/>
28+
<Route path="/claim/*" element={<ClaimPage/>}/>
29+
<Route path="/wallet" element={<WalletPage/>}/>
30+
<Route path="/search" element={<SearchPage/>}/>
31+
<Route path="/settings" element={<SettingsPage/>}/>
32+
<Route path="*" element={<NotFound/>}/>
33+
</Routes>
34+
</main>
35+
{/*<Footer/>*/}
36+
</AppRouter>
37+
</StrictMode>
38+
);
5239
}
5340

5441
export default App;

‎src/Home.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {JSX, useEffect, useState} from "react";
2+
3+
import LBRY from "./LBRY";
4+
import ClaimPreviewTile from "./components/ClaimPreviewTile";
5+
6+
const notTags = ["porn","porno","nsfw","mature","xxx","sex","creampie","blowjob","handjob","vagina","boobs","big boobs","big dick","pussy","cumshot","anal","hard fucking","ass","fuck","hentai"];
7+
8+
function Home(): JSX.Element {
9+
const [row1,setRow1] = useState([]);
10+
const [row2,setRow2] = useState([]);
11+
const [row3,setRow3] = useState([]);
12+
13+
useEffect((): void => {
14+
LBRY.rpc(import.meta.env.VITE_DAEMON_DEFAULT,'claim_search',{"page_size":4,"claim_type":["stream","repost","channel"],"no_totals":true,"any_tags":[],"not_tags":notTags,"channel_ids":["80d2590ad04e36fb1d077a9b9e3a8bba76defdf8","b58dfaeab6c70754d792cdd9b56ff59b90aea334"],"not_channel_ids":[],"order_by":["release_time"],"has_source":true,"release_time":">1731193200","include_purchase_receipt":true},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
15+
setRow1(json.result.items);
16+
});
17+
},[]);
18+
19+
useEffect((): void => {
20+
LBRY.rpc(import.meta.env.VITE_DAEMON_DEFAULT,'claim_search',{"page_size":4,"claim_type":["stream"],"no_totals":true,"any_tags":[],"not_tags":notTags,"channel_ids":[],"not_channel_ids":[],"order_by":["effective_amount"],"has_source":true,"release_time":">1762902000","limit_claims_per_channel":2,"include_purchase_receipt":true},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
21+
setRow2(json.result.items);
22+
});
23+
},[]);
24+
25+
useEffect((): void => {
26+
LBRY.rpc(import.meta.env.VITE_DAEMON_DEFAULT,'claim_search',{"page_size":4,"claim_type":["stream","repost","channel"],"no_totals":true,"any_tags":[],"not_tags":notTags,"channel_ids":["3fda836a92faaceedfe398225fb9b2ee2ed1f01a"],"not_channel_ids":[],"order_by":["release_time"],"has_source":true,"include_purchase_receipt":true},null,import.meta.env.VITE_DAEMON_PROXY==='true').then(json => {
27+
setRow3(json.result.items);
28+
});
29+
},[]);
30+
31+
return (
32+
<>
33+
<div className="claim-preview-section">
34+
{row1.map((cell: unknown, i: number) => (
35+
<ClaimPreviewTile claim={cell} key={i}/>
36+
))}
37+
</div>
38+
{row2.length > 0 ? <h2>Top Content from Today</h2> : null}
39+
<div className="claim-preview-section">
40+
{row2.map((cell: unknown, i: number) => (
41+
<ClaimPreviewTile claim={cell} key={i}/>
42+
))}
43+
</div>
44+
{row3.length > 0 ? <h2>Latest From @lbry</h2> : null}
45+
<div className="claim-preview-section">
46+
{row3.map((cell: unknown, i: number) => (
47+
<ClaimPreviewTile claim={cell} key={i}/>
48+
))}
49+
</div>
50+
</>
51+
);
52+
}
53+
54+
export default Home;

‎src/components/Aside.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, {JSX} from "react";
2+
import {Link, NavLink} from "react-router";
3+
import CustomSVG from "./CustomSVG";
4+
5+
function Aside({open}): JSX.Element {
6+
7+
8+
return (
9+
<aside className={open ? 'menu-open' : null}>
10+
<nav>
11+
<ul className="links" style={{listStyle:'none',margin:0,padding:0}}>
12+
<li className={location.pathname==='/'?'item-focus':null}>
13+
<NavLink style={{
14+
display: 'inline-block',
15+
textDecoration: 'none',
16+
width: '100%',
17+
}} to="/">
18+
<CustomSVG style={{height:'16',width:'16',verticalAlign:'middle',strokeWidth:'2px',padding:open?'0px 8px 0px 12px':null}} icon="home" viewBox="0 0 24 24"/>
19+
<span style={{verticalAlign: 'middle'}}>Home</span>
20+
</NavLink>
21+
</li>
22+
<li className={location.pathname==='/following'?'item-focus':null}>
23+
<NavLink style={{
24+
display: 'inline-block',
25+
textDecoration: 'none',
26+
width: '100%',
27+
}} to="/following">
28+
<CustomSVG style={{height:'16',width:'16',verticalAlign:'middle',strokeWidth:'2px',padding:open?'0px 8px 0px 12px':null}} icon="heart" viewBox="0 0 24 24"/>
29+
<span style={{verticalAlign: 'middle'}}>Following</span>
30+
</NavLink>
31+
</li>
32+
<li className={location.pathname==='/tags'?'item-focus':null}>
33+
<NavLink style={{
34+
display: 'inline-block',
35+
textDecoration: 'none',
36+
width: '100%',
37+
}} to="/tags">
38+
<CustomSVG style={{height:'16',width:'16',verticalAlign:'middle',strokeWidth:'2px',padding:open?'0px 8px 0px 12px':null}} icon="tag" viewBox="0 0 24 24"/>
39+
<span style={{verticalAlign: 'middle'}}>Your Tags</span>
40+
</NavLink>
41+
</li>
42+
<li className={location.pathname==='/discover'?'item-focus':null}>
43+
<NavLink style={{
44+
display: 'inline-block',
45+
textDecoration: 'none',
46+
width: '100%',
47+
}} to="/discover">
48+
<CustomSVG style={{height:'16',width:'16',verticalAlign:'middle',strokeWidth:'2px',padding:open?'0px 8px 0px 12px':null}} icon="compass" viewBox="0 0 24 24"/>
49+
<span style={{verticalAlign: 'middle'}}>Discover</span>
50+
</NavLink>
51+
</li>
52+
<li className={location.pathname==='/library'?'item-focus':null}>
53+
<NavLink style={{
54+
display: 'inline-block',
55+
textDecoration: 'none',
56+
width: '100%',
57+
}} to="/library">
58+
<CustomSVG style={{height:'16',width:'16',verticalAlign:'middle',strokeWidth:'2px',padding:open?'0px 8px 0px 12px':null}} icon="key" viewBox="0 0 24 24"/>
59+
<span style={{verticalAlign: 'middle'}}>Library</span>
60+
</NavLink>
61+
</li>
62+
<li className={location.pathname==='/lists'?'item-focus':null}>
63+
<NavLink style={{
64+
display: 'inline-block',
65+
textDecoration: 'none',
66+
width: '100%',
67+
}} to="/lists">
68+
<CustomSVG style={{height:'16',width:'16',verticalAlign:'middle',strokeWidth:'2px',padding:open?'0px 8px 0px 12px':null}} icon="stack" viewBox="0 0 24 24"/>
69+
<span style={{verticalAlign: 'middle'}}>Lists</span>
70+
</NavLink>
71+
</li>
72+
</ul>
73+
{open?(
74+
<>
75+
<ul className="generic">
76+
<li><Link to="https://lbry.org/about">About</Link></li>
77+
<li><Link to="https://lbry.org/faq">FAQ</Link></li>
78+
<li><Link to="https://lbry.org/support">Support</Link></li>
79+
<li><Link to="https://lbry.org/terms">Terms</Link></li>
80+
<li><Link to="https://lbry.org/privacy">Privacy Policy</Link></li>
81+
</ul>
82+
</>
83+
) : null}
84+
</nav>
85+
</aside>
86+
);
87+
}
88+
89+
export default Aside;

‎src/components/CustomSVG.tsx‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {JSX} from "react";
1+
import React, {JSX} from "react";
22

33
function CustomSVG({icon,viewBox,style}): JSX.Element {
44
let element = null;
@@ -25,6 +25,37 @@ function CustomSVG({icon,viewBox,style}): JSX.Element {
2525
</g>
2626
);
2727
}
28+
if(icon==='compass'){
29+
element = (
30+
<g>
31+
<circle cx="12" cy="12" r="10"></circle>
32+
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
33+
</g>
34+
);
35+
}
36+
if (icon === 'heart') {
37+
element = (
38+
<path
39+
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
40+
);
41+
}
42+
if (icon === 'home') {
43+
element = (
44+
<g fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
45+
<path d="M1, 11 L12, 2 C12, 2 22.9999989, 11.0000005 23, 11"></path>
46+
<path
47+
d="M3, 10 C3, 10 3, 10.4453982 3, 10.9968336 L3, 20.0170446 C3, 20.5675806 3.43788135, 21.0138782 4.00292933, 21.0138781 L8.99707067, 21.0138779 C9.55097324, 21.0138779 10, 20.5751284 10, 20.0089602 L10, 15.0049177 C10, 14.449917 10.4433532, 14 11.0093689, 14 L12.9906311, 14 C13.5480902, 14 14, 14.4387495 14, 15.0049177 L14, 20.0089602 C14, 20.5639609 14.4378817, 21.0138779 15.0029302, 21.0138779 L19.9970758, 21.0138781 C20.5509789, 21.0138782 21.000006, 20.56848 21.000006, 20.0170446 L21.0000057, 10"></path>
48+
</g>
49+
);
50+
}
51+
if(icon==='key'){
52+
element = (
53+
<g>
54+
<path
55+
d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path>
56+
</g>
57+
);
58+
}
2859
if (icon === 'lbc') {
2960
element = (
3061
<>
@@ -129,6 +160,24 @@ function CustomSVG({icon,viewBox,style}): JSX.Element {
129160
</g>
130161
);
131162
}
163+
if(icon==='stack'){
164+
element = (
165+
<g transform="matrix(1,0,0,1,0,0)">
166+
<path
167+
d="M22.91,6.953,12.7,1.672a1.543,1.543,0,0,0-1.416,0L1.076,6.953a.615.615,0,0,0,0,1.094l10.209,5.281a1.543,1.543,0,0,0,1.416,0L22.91,8.047a.616.616,0,0,0,0-1.094Z"></path>
168+
<path d="M.758,12.75l10.527,5.078a1.543,1.543,0,0,0,1.416,0L23.258,12.75"></path>
169+
<path d="M.758,17.25l10.527,5.078a1.543,1.543,0,0,0,1.416,0L23.258,17.25"></path>
170+
</g>
171+
);
172+
}
173+
if (icon === 'tag') {
174+
element = (
175+
<g>
176+
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
177+
<line x1="7" y1="7" x2="7" y2="7"></line>
178+
</g>
179+
);
180+
}
132181

133182
return (
134183
<svg viewBox={viewBox} style={style}>

‎src/components/Header.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {Link, NavLink, NavigateFunction, useNavigate} from "react-router";
44
import useAppHistory from "../AppHistory";
55
import CustomSVG from "./CustomSVG";
66

7-
function Header(): JSX.Element {
7+
function Header({menuOpen,menuOpenSetter}): JSX.Element {
88
const appHistory: object = useAppHistory();
99

1010
const navigate: NavigateFunction = useNavigate();
@@ -26,7 +26,9 @@ function Header(): JSX.Element {
2626
whiteSpace: 'nowrap'
2727
}}>
2828
<div style={{justifyContent: 'flex-start'}}>
29-
<Link className="hoverHeaderButtonFill" to="#menu" style={{
29+
<NavLink className={menuOpen?"hoverHeaderButtonFill menu-open":"hoverHeaderButtonFill"} onClick={(): void => {
30+
menuOpenSetter(!menuOpen);
31+
}} style={{
3032
backgroundColor: 'rgba(45, 45, 45, 0.7)',
3133
borderRadius: '1.5rem',
3234
display: 'inline-block',
@@ -35,9 +37,9 @@ function Header(): JSX.Element {
3537
verticalAlign: 'middle',
3638
marginRight:'10px',
3739
width: '40px'
38-
}}>
40+
}} to={null}>
3941
<CustomSVG icon="menu" viewBox="0 0 24 24" style={{height: '16px', padding: '12px 0'}}/>
40-
</Link>
42+
</NavLink>
4143
<Link className="hoverHeaderButton"
4244
style={{fill: 'white', margin: '0 10px', textDecoration: 'none'}} to="/">
4345
<CustomSVG icon="logo" style={{height: '40px', verticalAlign: 'middle', width: '40px'}}

0 commit comments

Comments
 (0)