Add fa icons
This commit is contained in:
parent
523d1951fa
commit
81ac966a03
@ -3,6 +3,9 @@ import { useEffect, useState } from "react";
|
|||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
import { faHeart, faReply, faInfo } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
import Event from "../nostr/Event";
|
import Event from "../nostr/Event";
|
||||||
import ProfileImage from "./ProfileImage";
|
import ProfileImage from "./ProfileImage";
|
||||||
import useEventPublisher from "../pages/feed/EventPublisher";
|
import useEventPublisher from "../pages/feed/EventPublisher";
|
||||||
@ -89,7 +92,7 @@ export default function Note(props) {
|
|||||||
let idx = parseInt(matchTag[1]);
|
let idx = parseInt(matchTag[1]);
|
||||||
let ref = ev.Tags.find(a => a.Index === idx);
|
let ref = ev.Tags.find(a => a.Index === idx);
|
||||||
if (ref) {
|
if (ref) {
|
||||||
switch(ref.Key) {
|
switch (ref.Key) {
|
||||||
case "p": {
|
case "p": {
|
||||||
let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
|
let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
|
||||||
return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
|
return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
|
||||||
@ -100,7 +103,7 @@ export default function Note(props) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return <b style={{color: "red"}}>{matchTag[0]}?</b>;
|
return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
|
||||||
} else {
|
} else {
|
||||||
return match;
|
return match;
|
||||||
}
|
}
|
||||||
@ -129,7 +132,7 @@ export default function Note(props) {
|
|||||||
return (
|
return (
|
||||||
<div className="note">
|
<div className="note">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<ProfileImage pubKey={ev.PubKey} subHeader={replyTag()}/>
|
<ProfileImage pubKey={ev.PubKey} subHeader={replyTag()} />
|
||||||
<div className="info">
|
<div className="info">
|
||||||
{moment(ev.CreatedAt * 1000).fromNow()}
|
{moment(ev.CreatedAt * 1000).fromNow()}
|
||||||
</div>
|
</div>
|
||||||
@ -138,11 +141,15 @@ export default function Note(props) {
|
|||||||
{transformBody()}
|
{transformBody()}
|
||||||
</div>
|
</div>
|
||||||
<div className="footer">
|
<div className="footer">
|
||||||
|
<span className="pill" onClick={() => {}}>
|
||||||
|
<FontAwesomeIcon icon={faReply} />
|
||||||
|
</span>
|
||||||
<span className="pill" onClick={() => like()}>
|
<span className="pill" onClick={() => like()}>
|
||||||
👍 {(reactions?.length ?? 0)}
|
<FontAwesomeIcon icon={faHeart} />
|
||||||
|
{(reactions?.length ?? 0)}
|
||||||
</span>
|
</span>
|
||||||
<span className="pill" onClick={() => console.debug(ev)}>
|
<span className="pill" onClick={() => console.debug(ev)}>
|
||||||
<i>i</i>
|
<FontAwesomeIcon icon={faInfo} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,4 +8,5 @@
|
|||||||
height: 40px;
|
height: 40px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
@ -32,6 +32,11 @@ code {
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page > .header > div:nth-child(2) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@ -50,6 +55,10 @@ code {
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-rnd {
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
input[type="text"], input[type="password"] {
|
input[type="text"], input[type="password"] {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
3
src/pages/Layout.css
Normal file
3
src/pages/Layout.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.notifications {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
@ -1,11 +1,15 @@
|
|||||||
|
import "./Layout.css";
|
||||||
import { useContext, useEffect } from "react"
|
import { useContext, useEffect } from "react"
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { faBell } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
import { NostrContext } from ".."
|
import { NostrContext } from ".."
|
||||||
import ProfileImage from "../element/ProfileImage";
|
import ProfileImage from "../element/ProfileImage";
|
||||||
import { init } from "../state/Login";
|
import { init } from "../state/Login";
|
||||||
import useLoginFeed from "./feed/LoginFeed";
|
import useLoginFeed from "./feed/LoginFeed";
|
||||||
import useUsersCache from "./feed/UsersFeed";
|
import useUsersCache from "./feed/UsersFeed";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
export default function Layout(props) {
|
export default function Layout(props) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -28,12 +32,23 @@ export default function Layout(props) {
|
|||||||
dispatch(init());
|
dispatch(init());
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
function accountHeader() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="btn btn-rnd notifications">
|
||||||
|
<FontAwesomeIcon icon={faBell} size="xl" />
|
||||||
|
</div>
|
||||||
|
<ProfileImage pubKey={key} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="page">
|
<div className="page">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<div onClick={() => navigate("/")}>n o s t r</div>
|
<div onClick={() => navigate("/")}>n o s t r</div>
|
||||||
<div>
|
<div>
|
||||||
{key ? <ProfileImage pubKey={key} /> :
|
{key ? accountHeader() :
|
||||||
<div className="btn" onClick={() => navigate("/login")}>Login</div>
|
<div className="btn" onClick={() => navigate("/login")}>Login</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user