first commit

common/resources/client/datatable/column-templates/name-with-avatar.tsx

@@ -0,0 +1,60 @@
+import React, {ReactNode} from 'react';
+import {Avatar, AvatarProps} from '../../ui/images/avatar';
+import {Skeleton} from '@common/ui/skeleton/skeleton';
+import clsx from 'clsx';
+
+interface Props {
+  image?: string;
+  label: ReactNode;
+  description?: ReactNode;
+  labelClassName?: string;
+  avatarSize?: AvatarProps['size'];
+}
+export function NameWithAvatar({
+  image,
+  label,
+  description,
+  labelClassName,
+  avatarSize = 'md',
+}: Props) {
+  return (
+    <div className="flex items-center gap-12">
+      {image && (
+        <Avatar size={avatarSize} className="flex-shrink-0" src={image} />
+      )}
+      <div className="min-w-0 overflow-hidden">
+        <div
+          className={clsx(labelClassName, 'overflow-hidden overflow-ellipsis')}
+        >
+          {label}
+        </div>
+        {description && (
+          <div className="overflow-hidden overflow-ellipsis text-xs text-muted">
+            {description}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function NameWithAvatarPlaceholder({
+  labelClassName,
+  showDescription,
+}: Partial<Props> & {
+  showDescription?: boolean;
+}) {
+  return (
+    <div className="flex w-full max-w-4/5 items-center gap-12">
+      <Skeleton size="w-40 h-40 md:w-32 md:h-32" variant="rect" />
+      <div className="flex-auto">
+        <div className={clsx(labelClassName, 'leading-3')}>
+          <Skeleton />
+        </div>
+        {showDescription && (
+          <div className="mt-4 leading-3 text-muted">{<Skeleton />}</div>
+        )}
+      </div>
+    </div>
+  );
+}