+ );
+};
+export default StatusPageList;
diff --git a/src/components/dashboard/org/status-page/status-page.tsx b/src/components/dashboard/org/status-page/status-page.tsx
new file mode 100644
index 0000000..15a6c72
--- /dev/null
+++ b/src/components/dashboard/org/status-page/status-page.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { StatusPage as StatusPageType } from "@/app/types/page/status-page";
+
+/**
+ * The status page for an organization.
+ *
+ * @param statusPage
+ * @constructor
+ */
+const StatusPage = ({
+ statusPage,
+}: {
+ statusPage: StatusPageType;
+}): ReactElement => (
+
sdfdssdfsfs
+);
+export default StatusPage;
diff --git a/src/components/generic-avatar.tsx b/src/components/generic-avatar.tsx
new file mode 100644
index 0000000..32b94d0
--- /dev/null
+++ b/src/components/generic-avatar.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+import { ReactElement } from "react";
+import { cva } from "class-variance-authority";
+import Image from "next/image";
+import InitialsAvatar from "react-initials-avatar";
+import { cn } from "@/lib/utils";
+
+/**
+ * The variants of the avatar.
+ */
+const avatarVariants = cva("relative rounded-full", {
+ variants: {
+ size: {
+ sm: "w-6 h-6",
+ default: "w-11 h-11",
+ },
+ },
+ defaultVariants: {
+ size: "default",
+ },
+});
+
+/**
+ * The props for the avatar.
+ */
+export type GenericAvatarProps = {
+ /**
+ * The image URL of the
+ * avatar to display, if any.
+ */
+ image?: string | undefined;
+
+ /**
+ * The alt text for the image.
+ */
+ imageAlt?: string;
+
+ /**
+ * The backup text to extract initials
+ * from if the avatar image is unavailable.
+ */
+ initialsText: string;
+
+ /**
+ * The size of the avatar.
+ */
+ size?: "sm" | "default";
+
+ /**
+ * The optional class name to apply to the logo.
+ */
+ className?: string;
+};
+
+/**
+ * An avatar for a user.
+ *
+ * @param props the avatar props
+ * @return the avatar jsx
+ */
+const GenericAvatar = ({
+ image,
+ imageAlt,
+ initialsText,
+ size,
+ className,
+}: GenericAvatarProps): ReactElement => (
+
+ {image ? (
+
+ ) : (
+
+ )}
+
+);
+export default GenericAvatar;
diff --git a/src/components/org/organization-logo.tsx b/src/components/org/organization-logo.tsx
index f9e034f..fbb5ed6 100644
--- a/src/components/org/organization-logo.tsx
+++ b/src/components/org/organization-logo.tsx
@@ -1,25 +1,7 @@
import * as React from "react";
import { ReactElement } from "react";
-import { cva } from "class-variance-authority";
-import Image from "next/image";
-import InitialsAvatar from "react-initials-avatar";
-import { cn } from "@/lib/utils";
import { Organization } from "@/app/types/org/organization";
-
-/**
- * The variants of the logo.
- */
-const logoVariants = cva("relative rounded-full", {
- variants: {
- size: {
- sm: "w-5 h-5",
- default: "w-10 h-10",
- },
- },
- defaultVariants: {
- size: "default",
- },
-});
+import GenericAvatar from "@/components/generic-avatar";
/**
* The props for this component.
@@ -29,45 +11,30 @@ type OrganizationLogoProps = {
* The organization to show the logo for.
*/
organization: Organization;
-
- /**
- * The size of the logo.
- */
- size?: "sm" | "default";
-
- /**
- * The optional class name to apply to the logo.
- */
- className?: string;
-};
+} & Omit<
+ React.ComponentProps,
+ "image" | "imageAlt" | "initialsText"
+>;
/**
- * A logo for an organization.
+ * The logo for an organization.
*
- * @param organization the organization
- * @param size the size
- * @param className additional class names
- * @return the organization jsx
+ * @param organization the org to show the logo for
+ * @param props additional props
+ * @return the logo jsx
*/
const OrganizationLogo = ({
organization,
- size,
- className,
+ ...props
}: OrganizationLogoProps): ReactElement => (
-
- {organization.logo ? (
-
- ) : (
-
- )}
-
+
);
export default OrganizationLogo;
diff --git a/src/components/user/user-avatar.tsx b/src/components/user/user-avatar.tsx
index e41c2c9..72cdb16 100644
--- a/src/components/user/user-avatar.tsx
+++ b/src/components/user/user-avatar.tsx
@@ -1,73 +1,37 @@
import * as React from "react";
import { ReactElement } from "react";
-import { cva } from "class-variance-authority";
-import Image from "next/image";
-import InitialsAvatar from "react-initials-avatar";
-import { cn } from "@/lib/utils";
import { User } from "@/app/types/user/user";
+import GenericAvatar from "@/components/generic-avatar";
/**
- * The variants of the avatar.
- */
-const avatarVariants = cva("relative rounded-full", {
- variants: {
- size: {
- sm: "w-6 h-6",
- default: "w-11 h-11",
- },
- },
- defaultVariants: {
- size: "default",
- },
-});
-
-/**
- * The props for this component.
+ * The props for the avatar.
*/
type UserAvatarProps = {
/**
* The user to show the avatar for.
*/
user: User;
-
- /**
- * The size of the avatar.
- */
- size?: "sm" | "default";
-
- /**
- * The optional class name to apply to the logo.
- */
- className?: string;
-};
+} & Omit<
+ React.ComponentProps,
+ "image" | "imageAlt" | "initialsText"
+>;
/**
- * An avatar for a user.
+ * The avatar for a user.
*
- * @param user the user
- * @param size the size
- * @param className additional class names
+ * @param user the user to show the avatar for
+ * @param props additional props
* @return the avatar jsx
*/
-const UserAvatar = ({
- user,
- size,
- className,
-}: UserAvatarProps): ReactElement => (
-