diff --git a/src/components/GenericPage.tsx b/src/components/GenericPage.tsx index 946961dab..6f2906d18 100644 --- a/src/components/GenericPage.tsx +++ b/src/components/GenericPage.tsx @@ -6,6 +6,7 @@ import { RenderComponent } from '@/components/RenderComponent' import { SignOut, House, List, X } from '@phosphor-icons/react' import { toast } from 'sonner' import { getPageRenderer, type PageDefinition, type PageContext } from '@/lib/page-renderer' +import { AppFooter } from './shared/AppFooter' import type { User } from '@/lib/level-types' interface GenericPageProps { @@ -262,11 +263,7 @@ export function GenericPage({ {renderContent()} {page.metadata?.showFooter !== false && ( - + )} ) diff --git a/src/components/Level1.tsx b/src/components/Level1.tsx index d80c3048f..ed9633412 100644 --- a/src/components/Level1.tsx +++ b/src/components/Level1.tsx @@ -6,6 +6,7 @@ import { GodCredentialsBanner } from './level1/GodCredentialsBanner' import { HeroSection } from './level1/HeroSection' import { FeaturesSection } from './level1/FeaturesSection' import { ContactSection } from './level1/ContactSection' +import { AppFooter } from './shared/AppFooter' interface Level1Props { onNavigate: (level: number) => void @@ -121,11 +122,7 @@ export function Level1({ onNavigate }: Level1Props) { -
-
-

© 2024 MetaBuilder. Built with the power of visual workflows and declarative schemas.

-
-
+ ) } diff --git a/src/components/Level2.tsx b/src/components/Level2.tsx index 98da21edf..656c1bcc8 100644 --- a/src/components/Level2.tsx +++ b/src/components/Level2.tsx @@ -3,14 +3,14 @@ import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Textarea } from '@/components/ui/textarea' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { Avatar, AvatarFallback } from '@/components/ui/avatar' -import { User, ChatCircle, SignOut, House } from '@phosphor-icons/react' +import { User, ChatCircle } from '@phosphor-icons/react' import { toast } from 'sonner' import { Database, hashPassword } from '@/lib/database' import { generateScrambledPassword, simulateEmailSend } from '@/lib/password-utils' import { IRCWebchatDeclarative } from './IRCWebchatDeclarative' import { ProfileCard } from './level2/ProfileCard' import { CommentsList } from './level2/CommentsList' +import { AppHeader } from './shared/AppHeader' import type { User as UserType, Comment } from '@/lib/level-types' interface Level2Props { @@ -104,34 +104,13 @@ export function Level2({ user, onLogout, onNavigate }: Level2Props) { return (
- + onNavigate(1)} + onLogout={onLogout} + variant="user" + />

User Dashboard

diff --git a/src/components/Level3.tsx b/src/components/Level3.tsx index fdae46a30..445ef68de 100644 --- a/src/components/Level3.tsx +++ b/src/components/Level3.tsx @@ -19,9 +19,10 @@ import { DialogTitle, } from '@/components/ui/dialog' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { SignOut, MagnifyingGlass, Plus, PencilSimple, Trash, Users, ChatCircle, House } from '@phosphor-icons/react' +import { MagnifyingGlass, Plus, PencilSimple, Trash, Users, ChatCircle } from '@phosphor-icons/react' import { toast } from 'sonner' import { Database } from '@/lib/database' +import { AppHeader } from './shared/AppHeader' import type { User as UserType, Comment } from '@/lib/level-types' import type { ModelSchema } from '@/lib/schema-types' @@ -96,29 +97,14 @@ export function Level3({ user, onLogout, onNavigate }: Level3Props) { return (
- + onNavigate(1)} + onLogout={onLogout} + variant="admin" + />
diff --git a/src/components/shared/AppFooter.tsx b/src/components/shared/AppFooter.tsx new file mode 100644 index 000000000..e8bb02655 --- /dev/null +++ b/src/components/shared/AppFooter.tsx @@ -0,0 +1,17 @@ +interface AppFooterProps { + text?: string + className?: string +} + +export function AppFooter({ + text = '© 2024 MetaBuilder. Built with the power of visual workflows and declarative schemas.', + className = '', +}: AppFooterProps) { + return ( +
+
+

{text}

+
+
+ ) +} diff --git a/src/components/shared/AppHeader.tsx b/src/components/shared/AppHeader.tsx new file mode 100644 index 000000000..b4e0aca7f --- /dev/null +++ b/src/components/shared/AppHeader.tsx @@ -0,0 +1,105 @@ +import { Button } from '@/components/ui/button' +import { Avatar, AvatarFallback } from '@/components/ui/avatar' +import { Badge } from '@/components/ui/badge' +import { SignOut, House } from '@phosphor-icons/react' + +interface AppHeaderProps { + title?: string + username?: string + showAvatar?: boolean + showBadge?: boolean + onNavigateHome?: () => void + onLogout?: () => void + variant?: 'default' | 'admin' | 'user' + children?: React.ReactNode +} + +export function AppHeader({ + title = 'MetaBuilder', + username, + showAvatar = false, + showBadge = false, + onNavigateHome, + onLogout, + variant = 'default', + children, +}: AppHeaderProps) { + const getLogoGradient = () => { + switch (variant) { + case 'admin': + return 'bg-gradient-to-br from-orange-500 to-orange-600' + case 'user': + return 'bg-gradient-to-br from-primary to-accent' + default: + return 'bg-gradient-to-br from-primary to-accent' + } + } + + const getBgClass = () => { + switch (variant) { + case 'admin': + return 'bg-sidebar' + case 'user': + return 'bg-card' + default: + return 'bg-card' + } + } + + const getTextClass = () => { + return variant === 'admin' ? 'text-sidebar-foreground' : '' + } + + return ( + + ) +} diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts new file mode 100644 index 000000000..9ecf5d400 --- /dev/null +++ b/src/components/shared/index.ts @@ -0,0 +1,2 @@ +export { AppHeader } from './AppHeader' +export { AppFooter } from './AppFooter'