feat: /titles page with search and sort functionality. Website header added

modules/frontend/src/components/TitlesSortBox/TitlesSortBox.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import type { TitleSort } from "../../api";
+import { ChevronDownIcon, ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/24/solid";
+
+type TitlesSortBoxProps = {
+  sort: TitleSort;
+  setSort: (value: TitleSort) => void;
+  sortForward: boolean;
+  setSortForward: (value: boolean) => void;
+};
+
+const SORT_OPTIONS: TitleSort[] = ["id", "rating", "year", "views"];
+
+export function TitlesSortBox({
+  sort,
+  setSort,
+  sortForward,
+  setSortForward,
+}: TitlesSortBoxProps) {
+  const [open, setOpen] = useState(false);
+
+  const toggleSortDirection = () => setSortForward(!sortForward);
+  const handleSortSelect = (newSort: TitleSort) => {
+    setSort(newSort);
+    setOpen(false);
+  };
+
+  return (
+    <div className="inline-flex relative z-50">
+      {/* Левая часть — смена направления */}
+      <button
+        onClick={toggleSortDirection}
+        className="px-4 py-2 flex items-center justify-center bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-l-lg transition"
+      >
+        {sortForward ? <ArrowUpIcon className="w-4 h-4 mr-1" /> : <ArrowDownIcon className="w-4 h-4 mr-1" />}
+        <span className="text-sm font-medium">Order</span>
+      </button>
+
+      {/* Правая часть — выбор параметра */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="px-4 py-2 flex items-center justify-center bg-gray-100 hover:bg-gray-200 border border-gray-300 border-l-0 rounded-r-lg transition"
+      >
+        <span className="text-sm font-medium">{sort}</span>
+        <ChevronDownIcon className="w-4 h-4 ml-1" />
+      </button>
+
+      {/* Dropdown */}
+      {open && (
+        <ul className="absolute top-full left-0 mt-1 w-40 bg-white border border-gray-300 rounded-md shadow-lg z-[1000]">
+          {SORT_OPTIONS.map(option => (
+            <li key={option}>
+              <button
+                className={`w-full text-left px-4 py-2 hover:bg-gray-100 transition ${
+                  option === sort ? "font-bold bg-gray-100" : ""
+                }`}
+                onClick={() => handleSortSelect(option)}
+              >
+                {option}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}