frontend: now working fully, fuctionality tested

2026-09-27 20:12:29 +03:00
parent 1f3a0e4351
commit ca0aa9ee9c
15 changed files with 1657 additions and 74 deletions
@@ -0,0 +1,40 @@
+import { avatarColor, initials } from '../lib/format'
+
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'
+
+interface AvatarProps {
+  name: string
+  seed: number | string
+  size?: AvatarSize
+  online?: boolean
+  className?: string
+}
+
+const SIZE_CLASSES: Record<AvatarSize, string> = {
+  sm: 'h-8 w-8 text-[11px]',
+  md: 'h-10 w-10 text-xs',
+  lg: 'h-12 w-12 text-sm',
+  xl: 'h-16 w-16 text-lg',
+}
+
+export default function Avatar({ name, seed, size = 'md', online = false, className = '' }: AvatarProps) {
+  const background = avatarColor(seed)
+  return (
+    <span className={`relative inline-flex shrink-0 ${className}`}>
+      <span
+        className={`inline-flex items-center justify-center rounded-full font-semibold text-white/95 shadow-inner ring-1 ring-white/10 ${SIZE_CLASSES[size]}`}
+        style={{ backgroundImage: `linear-gradient(145deg, ${background}, color-mix(in srgb, ${background} 62%, #000))` }}
+        aria-hidden="true"
+      >
+        {initials({ display_name: name, username: name })}
+      </span>
+      {online && (
+        <span
+          className="absolute -right-0.5 -bottom-0.5 rounded-full border-2 border-panel bg-online"
+          style={{ width: '30%', height: '30%', minWidth: 9, minHeight: 9 }}
+          aria-hidden="true"
+        />
+      )}
+    </span>
+  )
+}