Arkie-Library-Frontend/src/pages/Browse/index.tsx

import { useSearchParams } from "react-router-dom";
import { MessageStream } from "../../components/messageStream/MessageStream";
import { SectionHeader } from "../../components/SectionHeader";
import { useI18n } from "../../i18n";

export function Browse() {
  const { t } = useI18n();
  const [sp] = useSearchParams();
  const q = sp.get("q") || "";
  const sort = sp.get("sort") || "";
  const title = q
    ? `${t("search")}: ${q}`
    : sort === "latest"
      ? t("latest")
      : sort === "recommended"
        ? t("official")
        : sort === "popular"
          ? t("popular")
          : t("all");
  return (
    <section>
      <div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
        <SectionHeader title={title} />
      </div>
      <MessageStream scope={{ kind: "all" }} />
    </section>
  );
}