v3/packages/design-system/molecules/preauth-greeting/PreauthGreeting.tsx

import { Avatar, utils as avatarUtils } from '@roleypoly/design-system/atoms/avatar';
import { Space } from '@roleypoly/design-system/atoms/space';
import { AccentTitle } from '@roleypoly/design-system/atoms/typography';
import { GuildSlug } from '@roleypoly/types';
import * as React from 'react';
import styled from 'styled-components';

type GreetingProps = {
    guildSlug: GuildSlug;
};

const Center = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
`;

export const PreauthGreeting = (props: GreetingProps) => (
    <Center>
        <Avatar
            size={64}
            src={avatarUtils.avatarHash(
                props.guildSlug.id,
                props.guildSlug.icon,
                'icons',
                512
            )}
            hash={props.guildSlug.icon}
        >
            {avatarUtils.initialsFromName(props.guildSlug.name)}
        </Avatar>
        <AccentTitle>
            Hi there. <b>{props.guildSlug.name}</b> uses Roleypoly to help assign you
            roles.
        </AccentTitle>
        <Space />
        <Space />
    </Center>
);