forked from abner/for-legacy-web
84 lines
2.4 KiB
TypeScript
84 lines
2.4 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";
|
||
import { modalController } from "../../../controllers/modals/ModalController";
|
||
|
||
interface Props {
|
||
server: Server;
|
||
}
|
||
|
||
const List = styled.div`
|
||
gap: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
`;
|
||
|
||
const Emoji = styled(Column)`
|
||
padding: 8px;
|
||
border-radius: var(--border-radius);
|
||
background: var(--secondary-background);
|
||
`;
|
||
|
||
const Preview = styled.img`
|
||
width: 72px;
|
||
height: 72px;
|
||
object-fit: contain;
|
||
border-radius: var(--border-radius);
|
||
`;
|
||
|
||
const UserInfo = styled(Row)`
|
||
font-size: 12px;
|
||
|
||
svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
`;
|
||
|
||
export const Emojis = observer(({ server }: Props) => {
|
||
const emoji = [...server.client.emojis.values()].filter(
|
||
(x) => x.parent.id === server._id,
|
||
);
|
||
|
||
return (
|
||
<Column>
|
||
<EmojiUploader server={server} />
|
||
<h3>
|
||
<Text id="app.settings.server_pages.emojis.title" />
|
||
{" – "}
|
||
{emoji.length}
|
||
</h3>
|
||
<List>
|
||
{emoji.map((emoji) => (
|
||
<Emoji key={emoji._id} centred>
|
||
<Stacked>
|
||
<Preview src={emoji.imageURL} />
|
||
</Stacked>
|
||
<span>{`:${emoji.name}:`}</span>
|
||
<UserInfo centred>
|
||
<UserShort user={emoji.creator} />
|
||
</UserInfo>
|
||
<Button
|
||
palette="plain"
|
||
onClick={() =>
|
||
modalController.writeText(emoji._id)
|
||
}>
|
||
<Text id="app.context_menu.copy_id" />
|
||
</Button>
|
||
<Button palette="plain" onClick={() => emoji.delete()}>
|
||
<Text id="app.special.modals.actions.delete" />
|
||
</Button>
|
||
</Emoji>
|
||
))}
|
||
</List>
|
||
</Column>
|
||
);
|
||
});
|