import React from 'react';
const App: React.FC = () => {
return (
<div className="h-screen flex">
<div className="bg-gray-200 dark:bg-black w-64 flex-none">
<div className="flex flex-col h-full justify-between p-4">
<div className="space-y-4">
<div className="bg-blue-500 dark:bg-blue-800 mx-auto w-20 h-20 rounded-full"></div>
<nav>
<ul className="space-y-2">
<li>
<a href="#" className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg p-2">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-500 dark:text-gray-300" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M19 10a9 9 0 11-18 0 9 9 0 0118 0zm1 0a10 10 0 11-20 0 10 10 0 0120 0zm-4-1a1 1 0 00-1-1h-4V4a1 1 0 00-2 0v4h-4a1 1 0 100 2h4v4a1 1 0 102 0v-4h4a1 1 0 001-1z" clipRule="evenodd" />
</svg>
<span>Home</span>
</a>
</li>
<li>
<a href="#" className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg p-2">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-500 dark:text-gray-300" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M3 2a1 1 0 00-.725 1.688l.638.638A1 1 0 002 5v11a2.008 2.008 0 002 2h12a2.006 2.006 0 002-2V9.414a1 1 0 00-.293-.707l-6-6A1 1 0 0011.586 2H3zm1.414 1L10 7.586 14.586 3H4.414zM4 15V6.414L9.586 12H4a1 1 0 01-1-1V4h12v6.586L15.414 9H19v4a1 1 0 01-1 1H4zM4 18a1 1 0 011-1h10a1 1 0 011 1v.19l-5-2.5-5 2.5V18zm12-1a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
</svg>
<span>About Us</span>
</a>
</li>
<li>
<a href="#" className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg p-2">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-500 dark:text-gray-300" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-3a5 5 0 100-10 5 5 0 000 10zm0-7a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
</svg>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
<div className="text-center">
<span className="text-gray-700 dark:text-gray-300">Version 1.0.0</span>
</div>
</div>
</div>
<div className="flex-1">
<div className="p-4">
<h1 className="text-3xl font-semibold">Dashboard</h1>
<p className="mt-4 text-gray-600 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate consequatur porro veniam fugiat
magni reiciendis deserunt aliquam eos minus dolorem debitis quos adipisci reprehenderit, natus labore a
saepe provident?
</p>
<p className="mt-4 text-gray-600 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate consequatur porro veniam fugiat
magni reiciendis deserunt aliquam eos minus dolorem debitis quos adipisci reprehenderit, natus labore a
saepe provident?
</p>
</div>
</div>
</div>
);
};
export default App;