72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import React from 'react';
|
||
|
||
interface MainLayoutProps {
|
||
children: React.ReactNode;
|
||
}
|
||
|
||
export default function MainLayout({ children }: MainLayoutProps) {
|
||
return (
|
||
<div className="flex h-screen bg-gray-900">
|
||
{/* Sidebar */}
|
||
<aside className="w-64 bg-gray-800 border-r border-gray-700 overflow-y-auto">
|
||
<nav className="p-4 space-y-2">
|
||
<a
|
||
href="/"
|
||
className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
|
||
>
|
||
<span className="text-xl mr-3">🏠</span>
|
||
<span>Home</span>
|
||
</a>
|
||
<a
|
||
href="/chat"
|
||
className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
|
||
>
|
||
<span className="text-xl mr-3">💬</span>
|
||
<span>Messages</span>
|
||
</a>
|
||
<a
|
||
href="/calls"
|
||
className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
|
||
>
|
||
<span className="text-xl mr-3">📞</span>
|
||
<span>Calls</span>
|
||
</a>
|
||
<a
|
||
href="/settings"
|
||
className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
|
||
>
|
||
<span className="text-xl mr-3">⚙️</span>
|
||
<span>Settings</span>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
{/* Main Content */}
|
||
<main className="flex-1 flex flex-col overflow-hidden">
|
||
{/* Header */}
|
||
<header className="bg-gray-800 border-b border-gray-700 px-6 py-4">
|
||
<div className="flex justify-between items-center">
|
||
<h1 className="text-xl font-bold text-white">AeThex Connect</h1>
|
||
<div className="flex items-center space-x-4">
|
||
<button className="text-gray-400 hover:text-white">
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||
</svg>
|
||
</button>
|
||
<button className="text-gray-400 hover:text-white">
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10h.01M9 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Content Area */}
|
||
<div className="flex-1 overflow-auto bg-gray-900">
|
||
{children}
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|