revamp template

2025-02-01 16:44:51 +07:00
parent c432df568a
commit 276a289580
1212 changed files with 112762 additions and 0 deletions
--- a/src/partials/common/CommonAvatars.tsx
+++ b/src/partials/common/CommonAvatars.tsx
@ -0,0 +1,70 @@
+import clsx from 'clsx';
+
+import { toAbsoluteUrl } from '@/utils/Assets';
+
+interface IAvatarsItem {
+  path?: string;
+  filename?: string;
+  fallback?: string;
+  variant?: string;
+}
+interface IAvatarsItems extends Array<IAvatarsItem> {}
+
+interface IAvatarsProps {
+  size?: string;
+  group: IAvatarsItem[];
+  more?: { variant?: string; number?: number | string; label?: string };
+  className?: string;
+}
+
+const CommonAvatars = ({ size, group, more, className }: IAvatarsProps) => {
+  const avatarSize = size ? size : 'size-6';
+
+  const renderItem = (each: IAvatarsItem, index: number) => {
+    return (
+      <div key={index} className="flex">
+        {each.filename || each.path ? (
+          <img
+            src={toAbsoluteUrl(each.path || `/media/avatars/${each.filename}`)}
+            className={clsx(
+              `hover:z-5 relative shrink-0 rounded-full ring-1 ring-light-light ${avatarSize}`
+            )}
+            alt=""
+          />
+        ) : each.fallback ? (
+          <span
+            className={clsx(
+              `hover:z-5 relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-3xs ${avatarSize}`,
+              each.variant
+            )}
+          >
+            {each.fallback}
+          </span>
+        ) : null}
+      </div>
+    );
+  };
+
+  return (
+    <div className={clsx('flex -space-x-2', className && className)}>
+      {group.map((each, index) => {
+        return renderItem(each, index);
+      })}
+
+      {more && (
+        <div className="flex">
+          <span
+            className={clsx(
+              `relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-3xs ${size} size-6`,
+              more.variant
+            )}
+          >
+            +{more.number || more.label}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { CommonAvatars, type IAvatarsItem, type IAvatarsItems, type IAvatarsProps };