move user list into its own reusable component

components/UserList.tsx

@@ -2,15 +2,13 @@ import React from "react"
 import { User } from "utils/types"
 import { UserIcon } from "./UserIcon"
 
-interface DirectoryProps {
+interface UserListProps {
 	users: User[]
-	userCount: number
 }
 
-export const Directory: React.FC<DirectoryProps> = (props) => {
-	const rest = props.userCount - props.users.length
+export const UserList: React.FC<UserListProps> = (props) => {
 	return (
-		<div className="p-4 bg-white rounded-lg flex flex-col gap-2">
+		<div className="flex flex-col gap-2">
 			{props.users.map((user) => (
 				<div key={user.publicKey} className="flex gap-2 items-center w-full">
 					<UserIcon user={user} />
@@ -32,11 +30,6 @@ export const Directory: React.FC<DirectoryProps> = (props) => {
 					</a>
 				</div>
 			))}
-			{rest > 0 && (
-				<a href="/users" className="hover:underline self-end">
-					... all users
-				</a>
-			)}
 		</div>
 	)
 }

pages/index.tsx

@@ -21,9 +21,8 @@ import { CreateThread } from "components/CreateThread"
 import { ThreadView } from "components/ThreadView"
 import { getVKeys } from "utils/server/vkeys"
 import { About } from "components/About"
-import { Directory } from "components/Directory"
-import { number } from "fp-ts"
 import { PageNav } from "components/PageNav"
+import { UserList } from "components/UserList"
 
 interface IndexPageProps extends PageProps {
 	currentPage: number
@@ -130,6 +129,7 @@ export const getServerSideProps: GetServerSideProps<IndexPageProps, {}> =
 
 export default function IndexPage(props: IndexPageProps) {
 	const lastPage = Math.ceil(props.threadCount / threadPageSize)
+
 	return (
 		<div className="max-w-4xl m-auto px-4 font-mono">
 			<Header />
@@ -143,7 +143,12 @@ export default function IndexPage(props: IndexPageProps) {
 				</div>
 				<div className="col-span-1 flex flex-col gap-2">
 					<About />
-					<Directory users={props.defaultUsers} userCount={props.userCount} />
+					<div className="p-4 bg-white rounded-lg flex flex-col gap-4">
+						<UserList users={props.defaultUsers} />
+						<a href="/users" className="hover:underline self-end">
+							all users
+						</a>
+					</div>
 				</div>
 			</div>
 		</div>

pages/thread/[id].tsx

@@ -23,6 +23,7 @@ import { UserIcon } from "components/UserIcon"
 import { CreateMessage } from "components/CreateMessage"
 import { PageContext } from "utils/context"
 import { PageNav } from "components/PageNav"
+import { UserList } from "components/UserList"
 
 type ThreadPageParams = { id: string }
 
@@ -159,26 +160,7 @@ export default function ThreadPage(props: ThreadPageProps) {
 				<div className="col-span-1">
 					<div className="p-4 bg-white rounded-lg">
 						<div className="mb-4">in this thread</div>
-						{props.group.map((user) => (
-							<div key={user.publicKey} className="flex items-center gap-x-2">
-								<UserIcon user={user} />
-								<a
-									className="mt-0.5 hover:underline flex-1"
-									href={`https://twitter.com/${user.twitterHandle}`}
-								>
-									{user.twitterHandle}
-								</a>
-								<a
-									href={`https://twitter.com/${user.twitterHandle}/status/${user.verificationTweetId}`}
-								>
-									<img
-										width={16}
-										src="/key.svg"
-										className="inline-block opacity-20 hover:opacity-70"
-									/>
-								</a>
-							</div>
-						))}
+						<UserList users={props.group} />
 					</div>
 				</div>
 			</div>