diff --git a/src/components/ProfileImage.tsx b/src/components/ProfileImage.tsx
new file mode 100644
index 0000000..cafebbc
--- /dev/null
+++ b/src/components/ProfileImage.tsx
@@ -0,0 +1,25 @@
+import Image from "next/image";
+import type { RouterOutputs } from "~/utils/api";
+
+type User = RouterOutputs["posts"]["getAll"][number]["author"];
+type UserWithNullableUsername = Omit
& {
+ username: string | null;
+};
+
+export const ProfileImage = (props: {
+ user: UserWithNullableUsername;
+ size?: number;
+ className?: string;
+}) => {
+ const size = props.size ?? 56;
+
+ return (
+
+ );
+};
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
index 2c32009..12c3f3d 100644
--- a/src/pages/[slug].tsx
+++ b/src/pages/[slug].tsx
@@ -1,9 +1,9 @@
import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
-import Image from "next/image";
import { LoadingPage } from "~/components/Loading";
import { NotFoundPage } from "~/components/NotFound";
import { PostView } from "~/components/PostView";
+import { ProfileImage } from "~/components/ProfileImage";
import { generateSSGHelper } from "~/server/helpers/ssgHelper";
import { api } from "~/utils/api";
@@ -39,12 +39,10 @@ const ProfilePage: NextPage<{ username: string }> = ({ username }) => {
{data.username}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 184eae4..642cede 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,9 +3,9 @@ import { type NextPage } from "next";
import { api } from "~/utils/api";
-import Image from "next/image";
import { LoadingPage, LoadingSpinner } from "~/components/Loading";
import { PostView } from "~/components/PostView";
+import { ProfileImage } from "~/components/ProfileImage";
import { useState } from "react";
import { toast } from "react-hot-toast";
@@ -36,13 +36,7 @@ const CreatePostWizard = () => {
return (