Refactor empty avatar component

web/components/avatar.tsx

@@ -1,7 +1,7 @@
 import Router from 'next/router'
 import clsx from 'clsx'
 import { MouseEvent } from 'react'
-import { UserCircleIcon } from '@heroicons/react/solid'
+import { UserCircleIcon, UserIcon, UsersIcon } from '@heroicons/react/solid'
 
 export function Avatar(props: {
   username?: string
@@ -45,3 +45,17 @@ export function Avatar(props: {
     />
   )
 }
+
+export function EmptyAvatar(props: { size?: number; multi?: boolean }) {
+  const { size = 8, multi } = props
+  const insize = size - 3
+  const Icon = multi ? UsersIcon : UserIcon
+
+  return (
+    <div
+      className={`flex h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`}
+    >
+      <Icon className={`h-${insize} w-${insize} text-gray-500`} aria-hidden />
+    </div>
+  )
+}

web/components/feed/feed-bets.tsx

@@ -4,7 +4,7 @@ import { Bet } from 'common/bet'
 import { User } from 'common/user'
 import { useUser, useUserById } from 'web/hooks/use-user'
 import { Row } from 'web/components/layout/row'
-import { Avatar } from 'web/components/avatar'
+import { Avatar, EmptyAvatar } from 'web/components/avatar'
 import clsx from 'clsx'
 import { UserIcon, UsersIcon } from '@heroicons/react/solid'
 import { formatMoney } from 'common/util/format'
@@ -50,9 +50,7 @@ export function FeedBet(props: {
           />
         ) : (
           <div className="relative px-1">
-            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
-              <UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-            </div>
+            <EmptyAvatar />
           </div>
         )}
         <div className={'min-w-0 flex-1 py-1.5'}>

web/pages/notifications.tsx

@@ -7,7 +7,7 @@ import {
   notification_source_types,
   notification_source_update_types,
 } from 'common/notification'
-import { Avatar } from 'web/components/avatar'
+import { Avatar, EmptyAvatar } from 'web/components/avatar'
 import { Row } from 'web/components/layout/row'
 import { Page } from 'web/components/page'
 import { Title } from 'web/components/title'
@@ -235,9 +235,7 @@ function NotificationGroupItem(props: {
         />
       )}
       <Row className={'items-center text-gray-500 sm:justify-start'}>
-        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
-          <UsersIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-        </div>
+        <EmptyAvatar multi />
         <div className={'flex-1 overflow-hidden pl-2 sm:flex'}>
           <div
             onClick={() => setExpanded(!expanded)}