revite/src/components/common/ServerIcon.tsx

import { Server } from "revolt.js/dist/api/objects";
import styled from "styled-components";

import { useContext } from "preact/hooks";

import { AppContext } from "../../context/revoltjs/RevoltClient";

import { IconBaseProps, ImageIconBase } from "./IconBase";

interface Props extends IconBaseProps<Server> {
	server_name?: string;
}

const ServerText = styled.div`
	display: grid;
	padding: 0.2em;
	overflow: hidden;
	border-radius: 50%;
	place-items: center;
	color: var(--foreground);
	background: var(--primary-background);
`;

const fallback = "/assets/group.png";
export default function ServerIcon(
	props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
) {
	const client = useContext(AppContext);

	const {
		target,
		attachment,
		size,
		animate,
		server_name,
		children,
		as,
		...imgProps
	} = props;
	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 (
		<ImageIconBase
			{...imgProps}
			width={size}
			height={size}
			aria-hidden="true"
			src={iconURL}
		/>
	);
}