status pages page

src/components/dashboard/org/status-page/status-page-list.tsx

@@ -20,7 +20,7 @@ const StatusPageList = (): ReactElement => {
         (state: OrganizationState) => state.selected
     );
     return (
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-3">
             {/* Create */}
             <SimpleTooltip content="Create a new status page">
                 <Button className="w-24" variant="outline" size="sm" disabled>

src/components/dashboard/org/status-page/status-page.tsx

@@ -1,5 +1,21 @@
 import { ReactElement } from "react";
 import { StatusPage as StatusPageType } from "@/app/types/page/status-page";
+import { Button } from "@/components/ui/button";
+import SimpleTooltip from "@/components/simple-tooltip";
+import {
+    ComputerDesktopIcon,
+    GlobeAltIcon,
+    MoonIcon,
+    SunIcon,
+} from "@heroicons/react/24/outline";
+import { capitalizeWords } from "@/lib/string";
+import Link from "next/link";
+
+const themeBadges = {
+    AUTO: <ComputerDesktopIcon />,
+    DARK: <MoonIcon />,
+    LIGHT: <SunIcon />,
+};
 
 /**
  * The status page for an organization.
@@ -12,6 +28,56 @@ const StatusPage = ({
 }: {
     statusPage: StatusPageType;
 }): ReactElement => (
-    <div className="p-3.5 w-72 border rounded-lg">sdfdssdfsfs</div>
+    <div className="p-3.5 w-72 flex flex-col gap-4 bg-background/30 border rounded-lg hover:opacity-90 transition-all transform-gpu">
+        {/* Name & Slug */}
+        <div className="flex flex-col gap-1 select-none">
+            <h1 className="font-bold">{statusPage.name}</h1>
+            <p className="text-xs opacity-75">/{statusPage.slug}</p>
+        </div>
+
+        {/* Details & Edit */}
+        <div className="flex justify-between items-center">
+            <Badges statusPage={statusPage} />
+
+            {/* Edit */}
+            <SimpleTooltip content="Edit this status page">
+                <Link href={`/dashboard/org/status-pages/${statusPage.slug}`}>
+                    <Button variant="outline" size="sm">
+                        Edit
+                    </Button>
+                </Link>
+            </SimpleTooltip>
+        </div>
+    </div>
 );
+
+const Badges = ({
+    statusPage,
+}: {
+    statusPage: StatusPageType;
+}): ReactElement => {
+    const theme = statusPage.theme;
+    return (
+        <div className="flex gap-1.5 items-center">
+            {/* Theme Badge */}
+            <SimpleTooltip
+                content={`${theme === "AUTO" ? "Automatically detected" : capitalizeWords(theme)} theme`}
+            >
+                <div className="w-[1.15rem] h-[1.15rem] opacity-75">
+                    {themeBadges[theme]}
+                </div>
+            </SimpleTooltip>
+
+            {/* Visible in search engines */}
+            {statusPage.visibleInSearchEngines && (
+                <SimpleTooltip content="Visible in search engines">
+                    <div className="w-[1.15rem] h-[1.15rem] opacity-75">
+                        <GlobeAltIcon />
+                    </div>
+                </SimpleTooltip>
+            )}
+        </div>
+    );
+};
+
 export default StatusPage;

src/components/dashboard/sidebar/user-menu/user-menu.tsx

@@ -27,6 +27,7 @@ import { Session } from "@/app/types/user/session";
 import { apiRequest } from "@/lib/api";
 import UserMenuLinks from "@/components/dashboard/sidebar/user-menu/user-menu-links";
 import { UserMenuLink } from "@/app/types/dashboard/user-menu-link";
+import SimpleTooltip from "@/components/simple-tooltip";
 
 export const userMenuLinks: UserMenuLink[] = [
     {
@@ -77,10 +78,12 @@ const UserMenu = (): ReactElement => {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger>
-                <div className="px-5 py-2 flex gap-2.5 items-center font-medium bg-background/30 border hover:opacity-75 rounded-lg transition-all transform-gpu">
+                <SimpleTooltip content="My account">
-                    <UserAvatar user={user as User} size="sm" />@
+                    <div className="px-5 py-2 flex gap-2.5 items-center font-medium bg-background/30 border hover:opacity-75 rounded-lg transition-all transform-gpu">
-                    {user?.username}
+                        <UserAvatar user={user as User} size="sm" />@
-                </div>
+                        {user?.username}
+                    </div>
+                </SimpleTooltip>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-44">
                 {/* Content */}