1. import { Link } from "react-router-dom";
2. export const NavBar = (): React.ReactElement => {
3.   return (
4.     <nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
5.       <div className="container flex flex-wrap justify-between items-center mx-auto">
6.         <Link to="/" className="flex items-center">
7.           <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
8.             Streammm
9.           </span>
10.         </Link>
11.         <div className="flex md:order-2">
12.           <button
13.             type="button"
14.             data-collapse-toggle="navbar-search"
15.             aria-controls="navbar-search"
16.             aria-expanded="false"
17.             className="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
18.           >
19.             <svg
20.               className="w-5 h-5"
21.               aria-hidden="true"
22.               fill="currentColor"
23.               viewBox="0 0 20 20"
24.               xmlns="http://www.w3.org/2000/svg"
25.             >
26.               <path
27.                 fill-rule="evenodd"
28.                 d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
29.                 clip-rule="evenodd"
30.               ></path>
31.             </svg>
32.             <span className="sr-only">Search</span>
33.           </button>
34.           <div className="hidden relative md:block">
35.             <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
36.               <svg
37.                 className="w-5 h-5 text-gray-500"
38.                 aria-hidden="true"
39.                 fill="currentColor"
40.                 viewBox="0 0 20 20"
41.                 xmlns="http://www.w3.org/2000/svg"
42.               >
43.                 <path
44.                   fill-rule="evenodd"
45.                   d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
46.                   clip-rule="evenodd"
47.                 ></path>
48.               </svg>
49.               <span className="sr-only">Search icon</span>
50.             </div>
51.             <input
52.               type="text"
53.               id="search-navbar"
54.               className="block p-2 pl-10 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
55.               placeholder="Search..."
56.             />
57.           </div>
58.           <button
59.             data-collapse-toggle="navbar-search"
60.             type="button"
61.             className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
62.             aria-controls="navbar-search"
63.             aria-expanded="false"
64.           >
65.             <span className="sr-only">Open menu</span>
66.             <svg
67.               className="w-6 h-6"
68.               aria-hidden="true"
69.               fill="currentColor"
70.               viewBox="0 0 20 20"
71.               xmlns="http://www.w3.org/2000/svg"
72.             >
73.               <path
74.                 fill-rule="evenodd"
75.                 d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
76.                 clip-rule="evenodd"
77.               ></path>
78.             </svg>
79.           </button>
80.         </div>
81.         <div
82.           className="hidden justify-between items-center w-full md:flex md:w-auto md:order-1"
83.           id="navbar-search"
84.         >
85.           <div className="relative mt-3 md:hidden">
86.             <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
87.               <svg
88.                 className="w-5 h-5 text-gray-500"
89.                 aria-hidden="true"
90.                 fill="currentColor"
91.                 viewBox="0 0 20 20"
92.                 xmlns="http://www.w3.org/2000/svg"
93.               >
94.                 <path
95.                   fill-rule="evenodd"
96.                   d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
97.                   clip-rule="evenodd"
98.                 ></path>
99.               </svg>
100.             </div>
101.             <input
102.               type="text"
103.               id="search-navbar"
104.               className="block p-2 pl-10 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
105.               placeholder="Search..."
106.             />
107.           </div>
108.           <ul className="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
109.             <li>
110.               <Link
111.                 to="/lou"
112.                 className="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
113.                 aria-current="page"
114.               >
115.                 Home
116.               </Link>
117.             </li>
118.             <li>
119.               <Link
120.                 to="/lou"
121.                 className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
122.               >
123.                 Human Object
124.               </Link>
125.             </li>
126.             <li>
127.               <Link
128.                 to="/logout"
129.                 className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
130.               >
131.                 Logout
132.               </Link>
133.             </li>
134.             <li>
135.               <Link
136.                 to="/login"
137.                 className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
138.               >
139.                 Login
140.               </Link>
141.             </li>
142.           </ul>
143.         </div>
144.       </div>
145.     </nav>
146.   );
147. };
148.