first commit

resources/client/user-lists/user-list-details.tsx

@@ -0,0 +1,88 @@
+import {Trans} from '@common/i18n/trans';
+import {FormattedRelativeTime} from '@common/i18n/formatted-relative-time';
+import {LockIcon} from '@common/icons/material/Lock';
+import React, {Fragment} from 'react';
+import {LockOpenIcon} from '@common/icons/material/LockOpen';
+import clsx from 'clsx';
+import {Channel} from '@common/channels/channel';
+import {Button} from '@common/ui/buttons/button';
+import {ShareIcon} from '@common/icons/material/Share';
+import {ShareMenuTrigger} from '@app/sharing/share-menu-trigger';
+import {getUserListLink} from '@app/user-lists/user-list-link';
+
+interface Props {
+  list: Channel;
+  className?: string;
+  showShareButton?: boolean;
+  showVisibility?: boolean;
+}
+export function UserListDetails({
+  list,
+  className,
+  showShareButton,
+  showVisibility = true,
+}: Props) {
+  return (
+    <div
+      className={clsx(
+        'flex flex-shrink-0 items-center gap-4 whitespace-nowrap text-muted',
+        className,
+      )}
+    >
+      {showShareButton && (
+        <Fragment>
+          <ShareButton list={list} />
+          <Divider marginLeft="ml-2" />
+        </Fragment>
+      )}
+      {list.items_count ? (
+        <Fragment>
+          <Trans message=":count items" values={{count: list.items_count}} />
+          <Divider />
+        </Fragment>
+      ) : null}
+      <span>
+        <Trans
+          message="Updated :date"
+          values={{
+            date: <FormattedRelativeTime date={list.updated_at} />,
+          }}
+        />
+      </span>
+      {showVisibility && (
+        <Fragment>
+          <Divider />
+          {list.public ? <LockOpenIcon size="sm" /> : <LockIcon size="sm" />}
+          <div>
+            {list.public ? (
+              <Trans message="Public" />
+            ) : (
+              <Trans message="Private" />
+            )}
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+}
+
+interface ShareButtonProps {
+  list: Channel;
+}
+function ShareButton({list}: ShareButtonProps) {
+  const link = getUserListLink(list, {absolute: true});
+  return (
+    <ShareMenuTrigger link={link}>
+      <Button startIcon={<ShareIcon />} sizeClassName="px-10 py-6">
+        <Trans message="Share" />
+      </Button>
+    </ShareMenuTrigger>
+  );
+}
+
+interface DividerProps {
+  marginLeft?: string;
+}
+function Divider({marginLeft = 'ml-12'}: DividerProps) {
+  return <div className={clsx('mr-10 h-20 w-1 bg-divider', marginLeft)} />;
+}