Add contributors panel.

package.json

@@ -15,6 +15,7 @@
     "@hookform/resolvers": "^3.4.2",
     "@nextui-org/react": "^2.4.1",
     "@notionhq/client": "^2.2.15",
+    "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

src/app/topics/mpox/page.tsx

@@ -5,6 +5,7 @@ import {
 } from "@/components/ui/hover-card";
 import Image from "next/image";
 import ReferencesPanel, { Reference } from "@/components/references-panel";
+import ContributorsPanel from "@/components/contributors-panel";
 
 const references: Reference[] = [
 	{
@@ -34,7 +35,10 @@ export default function MpoxPage() {
 	return (
 		<div className="relative min-h-screen">
 			<div className="fixed right-12 top-32 z-10">
-				<ReferencesPanel references={references} className="py-2" />
+				<div className="flex flex-col space-y-2">
+					<ReferencesPanel references={references} className="py-2" />
+					<ContributorsPanel contributors={["terje"]} />
+				</div>
 			</div>
 			<section className="flex flex-col space-y-6 p-2">
 				<h1 className="text-3xl font-bold">Overview</h1>

src/components/contributors-panel.tsx

@@ -0,0 +1,104 @@
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+interface Contributor {
+	name: string;
+	alias: string;
+	email: string;
+	github?: string;
+	twitter?: string;
+	linkedin?: string;
+}
+
+export const CONTRIBUTORS: Contributor[] = [
+	{
+		name: "Erik Hjerde",
+		alias: "erik",
+		email: "[email protected]",
+	},
+	{
+		name: "Espen Åberg",
+		alias: "espen",
+		email: "[email protected]",
+	},
+	{
+		name: "Terje Klemetsen",
+		alias: "terje",
+		email: "[email protected]",
+	},
+	{
+		name: "Peter Wilfred Kovachich",
+		alias: "peter",
+		email: "[email protected]",
+	},
+	{
+		name: "Sebastian Petters",
+		alias: "sebastian",
+		email: "[email protected]",
+	},
+	{
+		name: "Dorota Julia Buczek",
+		alias: "dorota",
+		email: "[email protected]",
+	},
+] as const;
+
+function getEmailByAlias(alias: string) {
+	const contributor = CONTRIBUTORS.find((it) => it.alias === alias);
+	return contributor ? contributor.email : null;
+}
+
+function getNameByAlias(alias: string) {
+	const contributor = CONTRIBUTORS.find((it) => it.alias === alias);
+	return contributor ? contributor.name : null;
+}
+
+export default function ContributorsPanel({
+	contributors,
+}: {
+	contributors: string[];
+}) {
+	return (
+		<Sheet>
+			<SheetTrigger asChild>
+				<Button variant="outline">Contributors</Button>
+			</SheetTrigger>
+			<SheetContent>
+				<SheetHeader>
+					<SheetTitle className="text-xl font-bold">Contributors</SheetTitle>
+					<SheetDescription></SheetDescription>
+				</SheetHeader>
+				<div className="flex flex-col space-y-6">
+					{contributors.map((contributor) => (
+						<div
+							key={contributor}
+							className="flex flex-row items-center justify-start space-x-6"
+						>
+							<Avatar>
+								<AvatarImage src={`/people/${contributor}.jpg`} />
+								<AvatarFallback>{contributor[0]}</AvatarFallback>
+							</Avatar>
+							<div className="flex flex-col">
+								<p className="font-bold">{getNameByAlias(contributor)}</p>
+								<a
+									className="italic text-primary hover:underline"
+									href={`mailto:${getEmailByAlias(contributor)}`}
+								>
+									{getEmailByAlias(contributor)}
+								</a>
+							</div>
+						</div>
+					))}
+				</div>
+			</SheetContent>
+		</Sheet>
+	);
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+			className
+		)}
+		{...props}
+	/>
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+			className
+		)}
+		{...props}
+	/>
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// @ts-ignore
+export { Avatar, AvatarImage, AvatarFallback };