63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
||
import { Server } from "revolt.js";
|
||
import styled from "styled-components";
|
||
|
||
import { Text } from "preact-i18n";
|
||
|
||
import { Button, Column, Row, Stacked } from "@revoltchat/ui";
|
||
|
||
import UserShort from "../../../components/common/user/UserShort";
|
||
import { EmojiUploader } from "../../../components/settings/customisation/EmojiUploader";
|
||
|
||
interface Props {
|
||
server: Server;
|
||
}
|
||
|
||
const Emoji = styled(Row)`
|
||
padding: 8px;
|
||
border-radius: var(--border-radius);
|
||
background: var(--secondary-background);
|
||
`;
|
||
|
||
const Preview = styled.img`
|
||
width: 32px;
|
||
height: 32px;
|
||
object-fit: contain;
|
||
border-radius: var(--border-radius);
|
||
`;
|
||
|
||
export const Emojis = observer(({ server }: Props) => {
|
||
const emoji = [...server.client.emojis.values()].filter(
|
||
(x) => x.parent.type === "Server" && x.parent.id === server._id,
|
||
);
|
||
|
||
return (
|
||
<Column>
|
||
{server.havePermission("ManageCustomisation") && (
|
||
<EmojiUploader server={server} />
|
||
)}
|
||
<h3>
|
||
<Text id="app.settings.server_pages.emojis.title" />
|
||
{" – "}
|
||
{emoji.length}
|
||
</h3>
|
||
{emoji.map((emoji) => (
|
||
<Emoji key={emoji._id} centred>
|
||
<Stacked>
|
||
<Preview src={emoji.imageURL} />
|
||
</Stacked>
|
||
<span>{`:${emoji.name}:`}</span>
|
||
<Row centred>
|
||
<UserShort user={emoji.creator} />
|
||
</Row>
|
||
{server.havePermission("ManageCustomisation") && (
|
||
<Button palette="plain" onClick={() => emoji.delete()}>
|
||
<Text id="app.special.modals.actions.delete" />
|
||
</Button>
|
||
)}
|
||
</Emoji>
|
||
))}
|
||
</Column>
|
||
);
|
||
});
|