Switch to workspace

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2024-08-28 12:46:03 +02:00
parent 694abcb489
commit 4d5690d0c1
1318 changed files with 12005 additions and 11618 deletions
--- a/packages/pl-fe/src/components/groups/group-avatar.tsx
+++ b/packages/pl-fe/src/components/groups/group-avatar.tsx
@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import { GroupRoles, type Group } from 'pl-api';
+import React from 'react';
+
+import { Avatar } from '../ui';
+
+interface IGroupAvatar {
+  group: Pick<Group, 'avatar' | 'avatar_description' | 'relationship'>;
+  size: number;
+  withRing?: boolean;
+}
+
+const GroupAvatar = (props: IGroupAvatar) => {
+  const { group, size, withRing = false } = props;
+
+  const isOwner = group.relationship?.role === GroupRoles.OWNER;
+
+  return (
+    <Avatar
+      className={
+        clsx('relative rounded-full', {
+          'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
+          'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing,
+          'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,
+          'shadow-[0_0_0_2px_theme(colors.white)] dark:shadow-[0_0_0_2px_theme(colors.gray.800)]': !isOwner && withRing,
+        })
+      }
+      src={group.avatar}
+      alt={group.avatar_description}
+      size={size}
+    />
+  );
+};
+
+export { GroupAvatar as default };
--- a/packages/pl-fe/src/components/groups/popover/group-popover.tsx
+++ b/packages/pl-fe/src/components/groups/popover/group-popover.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Link, matchPath, useHistory } from 'react-router-dom';
+
+import { Button, Divider, HStack, Popover, 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 GroupAvatar from '../group-avatar';
+
+import type { Group } from 'soapbox/normalizers';
+
+interface IGroupPopoverContainer {
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  isEnabled: boolean;
+  group: Group;
+}
+
+const messages = defineMessages({
+  title: { id: 'group.popover.title', defaultMessage: 'Membership required' },
+  summary: { id: 'group.popover.summary', defaultMessage: 'You must be a member of the group in order to reply to this status.' },
+  action: { id: 'group.popover.action', defaultMessage: 'View group' },
+});
+
+const GroupPopover = (props: IGroupPopoverContainer) => {
+  const { children, group, isEnabled } = props;
+
+  const intl = useIntl();
+  const history = useHistory();
+
+  const path = history.location.pathname;
+  const shouldHideAction = matchPath(path, {
+    path: ['/groups/:groupId'],
+    exact: true,
+  });
+
+  if (!isEnabled) {
+    return children;
+  }
+
+  return (
+    <Popover
+      interaction='click'
+      referenceElementClassName='cursor-pointer'
+      content={
+        <Stack space={4} className='w-80 pb-4'>
+          <Stack
+            className='relative h-60 rounded-lg bg-white black:bg-white dark:border-primary-800 dark:bg-primary-900'
+            data-testid='group-card'
+          >
+            {/* Group Cover Image */}
+            <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
+              {group.header && (
+                <img
+                  className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
+                  src={group.header}
+                  alt={group.header_description}
+                />
+              )}
+            </Stack>
+
+            {/* Group Avatar */}
+            <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
+              <GroupAvatar group={group} size={64} withRing />
+            </div>
+
+            {/* Group Info */}
+            <Stack alignItems='center' justifyContent='end' grow className='basis-1/2 py-4' space={0.5}>
+              <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+
+              <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
+                <GroupPrivacy group={group} />
+                <GroupMemberCount group={group} />
+              </HStack>
+            </Stack>
+          </Stack>
+
+          <Divider />
+
+          <Stack space={0.5} className='px-4'>
+            <Text weight='semibold'>
+              {intl.formatMessage(messages.title)}
+            </Text>
+            <Text theme='muted'>
+              {intl.formatMessage(messages.summary)}
+            </Text>
+          </Stack>
+
+          {!shouldHideAction && (
+            <div className='px-4'>
+              <Link to={`/groups/${group.id}`}>
+                <Button type='button' theme='secondary' block>
+                  {intl.formatMessage(messages.action)}
+                </Button>
+              </Link>
+            </div>
+          )}
+        </Stack>
+      }
+      isFlush
+      children={
+        <div className='inline-block'>{children}</div>
+      }
+    />
+  );
+};
+
+export { GroupPopover as default };