revite/src/components/common/ServerHeader.tsx

import { Cog } from "@styled-icons/boxicons-solid";
import { Link } from "react-router-dom";
import { Server } from "revolt.js/dist/api/objects";
import { ServerPermission } from "revolt.js/dist/api/permissions";
import styled from "styled-components";

import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";

import Header from "../ui/Header";
import IconButton from "../ui/IconButton";

interface Props {
    server: Server;
    ctx: HookContext;
}

const ServerName = styled.div`
    flex-grow: 1;
`;

export default function ServerHeader({ server, ctx }: Props) {
    const permissions = useServerPermission(server._id, ctx);
    const bannerURL = ctx.client.servers.getBannerURL(
        server._id,
        { width: 480 },
        true,
    );

    return (
        <Header
            borders
            placement="secondary"
            background={typeof bannerURL !== "undefined"}
            style={{
                background: bannerURL ? `url('${bannerURL}')` : undefined,
            }}>
            <ServerName>{server.name}</ServerName>
            {(permissions & ServerPermission.ManageServer) > 0 && (
                <div className="actions">
                    <Link to={`/server/${server._id}/settings`}>
                        <IconButton>
                            <Cog size={24} />
                        </IconButton>
                    </Link>
                </div>
            )}
        </Header>
    );
}