v3/packages/design-system/molecules/server-listing-card/ServerListingCard.tsx

import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
import { Collapse } from '@roleypoly/design-system/atoms/collapse';
import { GuildSlug, UserGuildPermissions } from '@roleypoly/types';
import * as React from 'react';
import { GoPerson, GoStar, GoZap } from 'react-icons/go';
import {
  CardBase,
  CardLine,
  MaxWidthTitle,
  PermissionTagStyled,
} from './ServerListingCard.styled';

type ServerListingProps = {
  guild: GuildSlug;
};

export const ServerListingCard = (props: ServerListingProps) => (
  <CardBase>
    <CardLine>
      <Avatar
        hash={props.guild.icon}
        src={utils.avatarHash(props.guild.id, props.guild.icon, 'icons')}
      >
        {utils.initialsFromName(props.guild.name)}
      </Avatar>
    </CardLine>
    <MaxWidthTitle>{props.guild.name}</MaxWidthTitle>
    <CardLine left>
      <PermissionTag permissionLevel={props.guild.permissionLevel} />
    </CardLine>
  </CardBase>
);

const PermissionTag = (props: { permissionLevel: UserGuildPermissions }) => {
  switch (props.permissionLevel) {
    case UserGuildPermissions.Admin:
      return (
        <PermissionTagStyled>
          <GoStar />
          <Collapse>Administrator</Collapse>
        </PermissionTagStyled>
      );
    case UserGuildPermissions.Manager:
      return (
        <PermissionTagStyled>
          <GoZap />
          <Collapse>Role Manager</Collapse>
        </PermissionTagStyled>
      );
    default:
      return (
        <PermissionTagStyled hiddenOnSmall>
          <GoPerson />
          <Collapse>Member</Collapse>
        </PermissionTagStyled>
      );
  }
};