Update README.md to provide a comprehensive overview of the ScriptShare platform, including features, tech stack, setup instructions, admin capabilities, and contribution guidelines.

2025-08-12 22:31:26 +01:00
parent 978b9b26bc
commit aa10ea0b26
64 changed files with 12998 additions and 2 deletions
--- a/src/components/UserMenu.tsx
+++ b/src/components/UserMenu.tsx
@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useAuth } from '@/contexts/AuthContext';
+import { User, Settings, LogOut, Code2, Shield, Crown } from 'lucide-react';
+
+export function UserMenu() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleLogout = () => {
+    logout();
+    navigate('/');
+    setIsOpen(false);
+  };
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+
+  if (!user) return null;
+
+  return (
+    <div className="relative">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={toggleMenu}
+        className="flex items-center space-x-2"
+      >
+        <Avatar className="h-8 w-8">
+          <AvatarImage src={user.avatarUrl} alt={user.displayName} />
+          <AvatarFallback>
+            {user.displayName.charAt(0).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        <span className="hidden md:block">{user.displayName}</span>
+      </Button>
+
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={closeMenu}
+          />
+          
+          {/* Menu */}
+          <div className="absolute right-0 top-full mt-2 w-56 rounded-md border bg-background shadow-lg z-50">
+            <div className="p-2">
+              {/* User Info */}
+              <div className="px-3 py-2 border-b">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{user.displayName}</span>
+                  {user.isSuperUser && (
+                    <Crown className="h-3 w-3 text-amber-600" title="Super User" />
+                  )}
+                  {user.isAdmin && !user.isSuperUser && (
+                    <Shield className="h-3 w-3 text-blue-600" title="Admin" />
+                  )}
+                </div>
+                <div className="text-xs text-muted-foreground">{user.email}</div>
+              </div>
+
+              {/* Menu Items */}
+              <div className="py-1">
+                <Link
+                  to="/dashboard"
+                  className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
+                  onClick={closeMenu}
+                >
+                  <User className="mr-2 h-4 w-4" />
+                  Dashboard
+                </Link>
+                
+                <Link
+                  to="/my-scripts"
+                  className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
+                  onClick={closeMenu}
+                >
+                  <Code2 className="mr-2 h-4 w-4" />
+                  My Scripts
+                </Link>
+                
+                <Link
+                  to="/profile"
+                  className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
+                  onClick={closeMenu}
+                >
+                  <Settings className="mr-2 h-4 w-4" />
+                  Profile
+                </Link>
+
+                {user.isAdmin && (
+                  <Link
+                    to="/admin"
+                    className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
+                    onClick={closeMenu}
+                  >
+                    {user.isSuperUser ? (
+                      <Crown className="mr-2 h-4 w-4 text-amber-600" />
+                    ) : (
+                      <Shield className="mr-2 h-4 w-4" />
+                    )}
+                    {user.isSuperUser ? 'Super Admin' : 'Admin Panel'}
+                  </Link>
+                )}
+              </div>
+
+              {/* Logout */}
+              <div className="border-t pt-1">
+                <button
+                  onClick={handleLogout}
+                  className="flex w-full items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
+                >
+                  <LogOut className="mr-2 h-4 w-4" />
+                  Sign Out
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}