diff --git a/app/soapbox/components/group-card.tsx b/app/soapbox/components/group-card.tsx index faf9d3514..6d616acba 100644 --- a/app/soapbox/components/group-card.tsx +++ b/app/soapbox/components/group-card.tsx @@ -5,7 +5,8 @@ import GroupMemberCount from 'soapbox/features/group/components/group-member-cou import GroupPrivacy from 'soapbox/features/group/components/group-privacy'; import GroupRelationship from 'soapbox/features/group/components/group-relationship'; -import { Avatar, HStack, Stack, Text } from './ui'; +import GroupAvatar from './groups/group-avatar'; +import { HStack, Stack, Text } from './ui'; import type { Group as GroupEntity } from 'soapbox/types/entities'; @@ -37,7 +38,7 @@ const GroupCard: React.FC = ({ group }) => { {/* Group Avatar */}
- +
{/* Group Info */} diff --git a/app/soapbox/components/groups/group-avatar.tsx b/app/soapbox/components/groups/group-avatar.tsx new file mode 100644 index 000000000..b862a92c0 --- /dev/null +++ b/app/soapbox/components/groups/group-avatar.tsx @@ -0,0 +1,38 @@ +import clsx from 'clsx'; +import React from 'react'; + +import { useGroupRoles } from 'soapbox/hooks/useGroupRoles'; + +import { Avatar } from '../ui'; + +import type { Group } from 'soapbox/schemas'; + +interface IGroupAvatar { + group: Group + size: number + withRing?: boolean +} + +const GroupAvatar = (props: IGroupAvatar) => { + const { group, size, withRing = false } = props; + + const { normalizeRole } = useGroupRoles(); + + const isAdmin = normalizeRole(group.relationship?.role as any) === 'admin'; + + return ( + + ); +}; + +export default GroupAvatar; \ No newline at end of file diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx index 4f7065dc0..30732dbec 100644 --- a/app/soapbox/features/group/components/group-header.tsx +++ b/app/soapbox/features/group/components/group-header.tsx @@ -3,8 +3,9 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { openModal } from 'soapbox/actions/modals'; +import GroupAvatar from 'soapbox/components/groups/group-avatar'; import StillImage from 'soapbox/components/still-image'; -import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui'; +import { HStack, Stack, Text } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; import { normalizeAttachment } from 'soapbox/normalizers'; import { isDefaultHeader } from 'soapbox/utils/accounts'; @@ -109,10 +110,10 @@ const GroupHeader: React.FC = ({ group }) => {
-
diff --git a/app/soapbox/features/groups/components/discover/group-grid-item.tsx b/app/soapbox/features/groups/components/discover/group-grid-item.tsx index 7cc41de74..9c743c44f 100644 --- a/app/soapbox/features/groups/components/discover/group-grid-item.tsx +++ b/app/soapbox/features/groups/components/discover/group-grid-item.tsx @@ -2,7 +2,8 @@ import React, { forwardRef } from 'react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; -import { Avatar, Button, HStack, Stack, Text } from 'soapbox/components/ui'; +import GroupAvatar from 'soapbox/components/groups/group-avatar'; +import { Button, HStack, Stack, Text } from 'soapbox/components/ui'; import GroupMemberCount from 'soapbox/features/group/components/group-member-count'; import GroupPrivacy from 'soapbox/features/group/components/group-privacy'; import { useJoinGroup } from 'soapbox/queries/groups'; @@ -43,9 +44,8 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef - diff --git a/app/soapbox/features/groups/components/discover/group-list-item.tsx b/app/soapbox/features/groups/components/discover/group-list-item.tsx index cd69ad86e..8f2f5879c 100644 --- a/app/soapbox/features/groups/components/discover/group-list-item.tsx +++ b/app/soapbox/features/groups/components/discover/group-list-item.tsx @@ -2,7 +2,8 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; -import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; +import GroupAvatar from 'soapbox/components/groups/group-avatar'; +import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; import { useJoinGroup } from 'soapbox/queries/groups'; import { Group as GroupEntity } from 'soapbox/types/entities'; import { shortNumberFormat } from 'soapbox/utils/numbers'; @@ -26,9 +27,8 @@ const GroupListItem = (props: IGroup) => { > - diff --git a/app/soapbox/schemas/index.ts b/app/soapbox/schemas/index.ts index bae2eb830..4136058e5 100644 --- a/app/soapbox/schemas/index.ts +++ b/app/soapbox/schemas/index.ts @@ -1,8 +1,15 @@ +/** + * Schemas + */ export { customEmojiSchema } from './custom-emoji'; -export type { CustomEmoji } from './custom-emoji'; export { groupSchema } from './group'; -export type { Group } from './group'; export { groupMemberSchema } from './group-member'; -export type { GroupMember } from './group-member'; export { groupRelationshipSchema } from './group-relationship'; + +/** + * Entity Types + */ +export type { CustomEmoji } from './custom-emoji'; +export type { Group } from './group'; +export type { GroupMember } from './group-member'; export type { GroupRelationship } from './group-relationship';