From f983a7e0a91b1c4e4d43a371f3236f6843e01b43 Mon Sep 17 00:00:00 2001
From: Thaarak <91105460+Thaarak@users.noreply.github.com>
Date: Tue, 3 Feb 2026 18:14:51 -0800
Subject: [PATCH] Add role-based UI visibility with mock auth system. Buttons
 on the home page conditionally render based on the currentUserRole constant
 (admin/user/guest)

---
 app/page.tsx     | 27 ++++++++++++++++++++++++++-
 lib/mock-auth.ts | 12 ++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 lib/mock-auth.ts

diff --git a/app/page.tsx b/app/page.tsx
index 7e27f92..86a005c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,30 @@
 import PublicLayout from "@/components/layout/PublicLayout";
+import { currentUserRole, isAdmin, isAuthenticated } from "@/lib/mock-auth";
 
 export default function Page() {
-  return <PublicLayout>Home page content</PublicLayout>;
+    return (
+        <PublicLayout>
+            <div className="p-8">
+                <h1 className="text-2xl font-bold mb-4">Home Page</h1>
+                <p className="mb-4 text-sm text-gray-600">
+                    Current role: <span className="font-semibold">{currentUserRole}</span>
+                </p>
+                <div className="flex gap-2">
+                    {isAuthenticated() && (
+                        <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
+                            User Action
+                        </button>
+                    )}
+                    {isAdmin() && (
+                        <button className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
+                            Admin Only
+                        </button>
+                    )}
+                    <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+                        Public Action
+                    </button>
+                </div>
+            </div>
+        </PublicLayout>
+    );
 }
diff --git a/lib/mock-auth.ts b/lib/mock-auth.ts
new file mode 100644
index 0000000..6c5f9d4
--- /dev/null
+++ b/lib/mock-auth.ts
@@ -0,0 +1,12 @@
+export type Role = "admin" | "user" | "guest";
+
+// Change this value to test different UI states
+export const currentUserRole: Role = "guest";
+
+export function isAdmin(): boolean {
+    return currentUserRole === "admin";
+}
+
+export function isAuthenticated(): boolean {
+    return currentUserRole !== "guest";
+}