revite/src/components/common/ServerIcon.tsx

48 lines
1.4 KiB
TypeScript
Raw Normal View History

2021-06-19 07:34:53 -04:00
import styled from "styled-components";
import { useContext } from "preact/hooks";
import { Server } from "revolt.js/dist/api/objects";
2021-06-19 10:29:04 -04:00
import { IconBaseProps, ImageIconBase } from "./IconBase";
2021-06-19 07:34:53 -04:00
import { AppContext } from "../../context/revoltjs/RevoltClient";
interface Props extends IconBaseProps<Server> {
server_name?: string;
}
const ServerText = styled.div`
display: grid;
padding: .2em;
overflow: hidden;
border-radius: 50%;
place-items: center;
color: var(--foreground);
background: var(--primary-background);
`;
const fallback = '/assets/group.png';
2021-06-19 10:29:04 -04:00
export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
2021-06-19 13:46:05 -04:00
const client = useContext(AppContext);
2021-06-19 07:34:53 -04:00
2021-06-19 10:29:04 -04:00
const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props;
2021-06-19 07:34:53 -04:00
const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
if (typeof iconURL === 'undefined') {
const name = target?.name ?? server_name ?? '';
return (
<ServerText style={{ width: size, height: size }}>
{ name.split(' ')
.map(x => x[0])
.filter(x => typeof x !== 'undefined') }
</ServerText>
)
}
return (
2021-06-19 10:29:04 -04:00
<ImageIconBase {...imgProps}
2021-06-19 07:34:53 -04:00
width={size}
height={size}
aria-hidden="true"
src={iconURL} />
2021-06-19 07:34:53 -04:00
);
}