Clean

web/components/widgets/user-link.tsx

@@ -1,14 +1,13 @@
 import Link from 'next/link'
 import clsx from 'clsx'
-import { VERIFIED_USERNAMES, MOD_IDS } from 'common/envs/constants'
-import { SparklesIcon } from '@heroicons/react/solid'
-import { Tooltip } from './tooltip'
-import { BadgeCheckIcon, ShieldCheckIcon } from '@heroicons/react/outline'
-import { Row } from '../layout/row'
-import { Avatar } from './avatar'
-import { DAY_MS } from 'common/util/time'
-import { linkClass } from './site-link'
-import { Col } from 'web/components/layout/col'
+import {MOD_IDS, VERIFIED_USERNAMES} from 'common/envs/constants'
+import {SparklesIcon} from '@heroicons/react/solid'
+import {Tooltip} from './tooltip'
+import {BadgeCheckIcon, ShieldCheckIcon} from '@heroicons/react/outline'
+import {Row} from '../layout/row'
+import {Avatar} from './avatar'
+import {DAY_MS} from 'common/util/time'
+import {linkClass} from './site-link'
 
 export const isFresh = (createdTime: number) =>
   createdTime > Date.now() - DAY_MS * 14
@@ -16,15 +15,13 @@ export const isFresh = (createdTime: number) =>
 export function shortenName(name: string) {
   const firstName = name.split(' ')[0]
   const maxLength = 10
-  const shortName =
-    firstName.length >= 3 && name.length > maxLength
-      ? firstName.length < maxLength
-        ? firstName
-        : firstName.substring(0, maxLength - 3) + '...'
-      : name.length > maxLength
+  return firstName.length >= 3 && name.length > maxLength
+    ? firstName.length < maxLength
+      ? firstName
+      : firstName.substring(0, maxLength - 3) + '...'
+    : name.length > maxLength
       ? name.substring(0, maxLength - 3) + '...'
       : name
-  return shortName
 }
 
 export function UserAvatarAndBadge(props: {
@@ -32,8 +29,8 @@ export function UserAvatarAndBadge(props: {
   noLink?: boolean
   className?: string
 }) {
-  const { user, noLink, className } = props
-  const { username, avatarUrl } = user
+  const {user, noLink, className} = props
+  const {username, avatarUrl} = user
 
   return (
     <Row className={clsx('items-center gap-2', className)}>
@@ -43,7 +40,7 @@ export function UserAvatarAndBadge(props: {
         size={'sm'}
         noLink={noLink}
       />
-      <UserLink user={user} noLink={noLink} />
+      <UserLink user={user} noLink={noLink}/>
     </Row>
   )
 }
@@ -57,7 +54,7 @@ export function UserLink(props: {
   hideBadge?: boolean
 }) {
   const {
-    user: { id, name, username },
+    user: {id, name, username},
     className,
     short,
     noLink,
@@ -70,7 +67,7 @@ export function UserLink(props: {
     <>
       <span className="max-w-[200px] truncate">{shortName}</span>
       {!hideBadge && (
-        <UserBadge userId={id} username={username} fresh={fresh} />
+        <UserBadge userId={id} username={username} fresh={fresh}/>
       )}
     </>
   )
@@ -112,7 +109,8 @@ export function BannedBadge() {
       text="Can't create comments, messages, or questions"
       placement="bottom"
     >
-      <span className="ml-1.5 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
+      <span
+        className="ml-1.5 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
         Banned
       </span>
     </Tooltip>
@@ -124,17 +122,17 @@ export function UserBadge(props: {
   username: string
   fresh?: boolean
 }) {
-  const { userId, username, fresh } = props
+  const {userId, username, fresh} = props
   const badges = []
 
   if (MOD_IDS.includes(userId)) {
-    badges.push(<ModBadge key="mod" />)
+    badges.push(<ModBadge key="mod"/>)
   }
   if (VERIFIED_USERNAMES.includes(username)) {
-    badges.push(<VerifiedBadge key="check" />)
+    badges.push(<VerifiedBadge key="check"/>)
   }
   if (fresh) {
-    badges.push(<FreshBadge key="fresh" />)
+    badges.push(<FreshBadge key="fresh"/>)
   }
   return <>{badges}</>
 }
@@ -155,7 +153,7 @@ function ModBadge() {
 function VerifiedBadge() {
   return (
     <Tooltip text="Verified" placement="right">
-      <BadgeCheckIcon className="text-primary-700 h-4 w-4" aria-hidden />
+      <BadgeCheckIcon className="text-primary-700 h-4 w-4" aria-hidden/>
     </Tooltip>
   )
 }
@@ -164,51 +162,51 @@ function VerifiedBadge() {
 function FreshBadge() {
   return (
     <Tooltip text="I'm new here!" placement="right">
-      <SparklesIcon className="h-4 w-4 text-green-500" aria-hidden="true" />
+      <SparklesIcon className="h-4 w-4 text-green-500" aria-hidden="true"/>
     </Tooltip>
   )
 }
 
-export const StackedUserNames = (props: {
-  user: {
-    id: string
-    name: string
-    username: string
-    createdTime: number
-    isBannedFromPosting?: boolean
-  }
-  followsYou?: boolean
-  className?: string
-  usernameClassName?: string
-}) => {
-  const { user, followsYou, usernameClassName, className } = props
-  return (
-    <Col>
-      <div className={'inline-flex flex-row items-center gap-1 pt-1'}>
-        <span className={clsx('break-anywhere ', className)}>{user.name}</span>
-        {
-          <UserBadge
-            userId={user.id}
-            username={user.username}
-            fresh={isFresh(user.createdTime)}
-          />
-        }
-        {user.isBannedFromPosting && <BannedBadge />}
-      </div>
-      <Row className={'flex-shrink flex-wrap gap-x-2'}>
-        <span className={clsx('text-ink-400 text-sm', usernameClassName)}>
-          @{user.username}{' '}
-        </span>
-        {followsYou && (
-          <span
-            className={
-              'bg-ink-200 w-fit self-center rounded-md p-0.5 px-1 text-xs'
-            }
-          >
-            Follows you
-          </span>
-        )}
-      </Row>
-    </Col>
-  )
-}
+// export const StackedUserNames = (props: {
+//   user: {
+//     id: string
+//     name: string
+//     username: string
+//     createdTime: number
+//     isBannedFromPosting?: boolean
+//   }
+//   followsYou?: boolean
+//   className?: string
+//   usernameClassName?: string
+// }) => {
+//   const {user, followsYou, usernameClassName, className} = props
+//   return (
+//     <Col>
+//       <div className={'inline-flex flex-row items-center gap-1 pt-1'}>
+//         <span className={clsx('break-anywhere ', className)}>{user.name}</span>
+//         {
+//           <UserBadge
+//             userId={user.id}
+//             username={user.username}
+//             fresh={isFresh(user.createdTime)}
+//           />
+//         }
+//         {user.isBannedFromPosting && <BannedBadge/>}
+//       </div>
+//       <Row className={'flex-shrink flex-wrap gap-x-2'}>
+//         <span className={clsx('text-ink-400 text-sm', usernameClassName)}>
+//           @{user.username}{' '}
+//         </span>
+//         {followsYou && (
+//           <span
+//             className={
+//               'bg-ink-200 w-fit self-center rounded-md p-0.5 px-1 text-xs'
+//             }
+//           >
+//             Follows you
+//           </span>
+//         )}
+//       </Row>
+//     </Col>
+//   )
+// }