2023-03-09 10:13:10 +00:00
|
|
|
import "./BadgeList.css";
|
|
|
|
|
|
|
|
import { useState } from "react";
|
2023-09-27 09:09:26 +00:00
|
|
|
import FormattedMessage from "Element/FormattedMessage";
|
2023-03-09 10:13:10 +00:00
|
|
|
|
2023-08-17 18:54:14 +00:00
|
|
|
import { TaggedNostrEvent } from "@snort/system";
|
2023-03-09 10:13:10 +00:00
|
|
|
|
|
|
|
import { ProxyImg } from "Element/ProxyImg";
|
|
|
|
import Icon from "Icons/Icon";
|
|
|
|
import Modal from "Element/Modal";
|
|
|
|
import Username from "Element/Username";
|
2023-05-24 10:12:23 +00:00
|
|
|
import { findTag } from "SnortUtils";
|
2023-03-09 10:13:10 +00:00
|
|
|
|
2023-08-17 18:54:14 +00:00
|
|
|
export default function BadgeList({ badges }: { badges: TaggedNostrEvent[] }) {
|
2023-03-09 10:13:10 +00:00
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
const badgeMetadata = badges.map(b => {
|
|
|
|
const thumb = findTag(b, "thumb");
|
|
|
|
const image = findTag(b, "image");
|
|
|
|
const name = findTag(b, "name");
|
|
|
|
const description = findTag(b, "description");
|
|
|
|
return {
|
|
|
|
id: b.id,
|
|
|
|
pubkey: b.pubkey,
|
|
|
|
name,
|
|
|
|
description,
|
|
|
|
thumb: thumb?.length ?? 0 > 0 ? thumb : image,
|
|
|
|
image,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="badge-list" onClick={() => setShowModal(!showModal)}>
|
|
|
|
{badgeMetadata.slice(0, 8).map(({ id, name, thumb }) => (
|
|
|
|
<ProxyImg alt={name} key={id} className="badge-item" size={64} src={thumb} />
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
{showModal && (
|
2023-09-21 20:02:59 +00:00
|
|
|
<Modal id="badges" className="reactions-modal" onClose={() => setShowModal(false)}>
|
2023-03-09 10:13:10 +00:00
|
|
|
<div className="reactions-view">
|
|
|
|
<div className="close" onClick={() => setShowModal(false)}>
|
|
|
|
<Icon name="close" />
|
|
|
|
</div>
|
|
|
|
<div className="reactions-header">
|
|
|
|
<h2>
|
|
|
|
<FormattedMessage defaultMessage="Badges" />
|
|
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
<div className="body">
|
|
|
|
{badgeMetadata.map(({ id, name, pubkey, description, image }) => {
|
|
|
|
return (
|
|
|
|
<div key={id} className="reactions-item badges-item">
|
|
|
|
<ProxyImg className="reaction-icon" src={image} size={64} alt={name} />
|
|
|
|
<div className="badge-info">
|
|
|
|
<h3>{name}</h3>
|
|
|
|
<p>{description}</p>
|
|
|
|
<p>
|
|
|
|
<FormattedMessage
|
|
|
|
defaultMessage="By: {author}"
|
|
|
|
values={{ author: <Username pubkey={pubkey} onLinkVisit={() => setShowModal(false)} /> }}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Modal>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|