Є-Кейс

import { useState } from "react";
import { Menu, Search, Bell } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function Dashboard() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <aside
        className={`bg-white shadow-lg w-64 p-4 fixed h-full transition-transform transform ${sidebarOpen ? "translate-x-0" : "-translate-x-64"} md:translate-x-0`}
      >
        <h2 className="text-xl font-bold mb-6">Textdash</h2>
        <nav className="space-y-4">
          <a href="#" className="block p-2 rounded hover:bg-gray-200">Dashboard</a>
          <a href="#" className="block p-2 rounded hover:bg-gray-200">Analytics</a>
          <a href="#" className="block p-2 rounded hover:bg-gray-200">Settings</a>
        </nav>
      </aside>

      {/* Main Content */}
      <div className="flex-1 flex flex-col md:ml-64">
        {/* Top Bar */}
        <header className="bg-white shadow p-4 flex justify-between items-center">
          <Button
            variant="ghost"
            className="md:hidden"
            onClick={() => setSidebarOpen(!sidebarOpen)}
          >
            <Menu />
          </Button>
          <div className="flex items-center space-x-4">
            <div className="relative">
              <Search className="absolute left-2 top-2 text-gray-400" size={20} />
              <input
                type="text"
                placeholder="Search..."
                className="pl-8 pr-4 py-2 rounded border focus:ring focus:ring-blue-300"
              />
            </div>
            <Button variant="ghost">
              <Bell />
            </Button>
          </div>
        </header>

        {/* Content */}
        <main className="p-6">
          <h1 className="text-2xl font-semibold">Welcome to the Dashboard</h1>
          <p className="mt-2 text-gray-600">Your content goes here...</p>
        </main>
      </div>
    </div>
  );
}