https://www.hamienet.com/assets/ListPage-gXg1XIZF.js

1import { R as React, j as jsxRuntimeExports } from "./vendor-react-Bay9Y7Lb.js";
2import { V as VideoCard } from "./main-CznOH3wZ.js";
3import { u as useShouldShowAd, A as AdSlot } from "./AdSlot-CPW4Sb2o.js";
4import { u as useTranslation } from "./vendor-i18n-R-bMoYp_.js";
5import { cv as LayoutGrid, cw as List } from "./vendor-dVNaLJx_.js";
6const ListPage = ({ icon: Icon, title, tracks, onSelectTrack, onToggleWatchLater, watchLaterSet }) => {
7  const { t } = useTranslation();
8  const shouldShowAd = useShouldShowAd("exploreList");
9  const [viewMode, setViewMode] = React.useState(() => {
10    return localStorage.getItem("hamie_view_mode") || "list";
11  });
12  React.useEffect(() => {
13    localStorage.setItem("hamie_view_mode", viewMode);
14  }, [viewMode]);
15  if (!tracks) return null;
16  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 max-w-6xl mx-auto", children: [
17    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4 mb-8 border-b border-zinc-200 dark:border-zinc-800 pb-4", children: [

18      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
19        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 sm:w-16 sm:h-16 bg-zinc-200 dark:bg-zinc-800 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { size: 28, className: "text-zinc-600 dark:text-zinc-300" }) }),
20        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white", children: title })
21      ] }),
22      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center bg-zinc-100 dark:bg-zinc-800 p-1 rounded-xl shadow-inner", children: [
23        /* @__PURE__ */ jsxRuntimeExports.jsx(
24          "button",
25          {
26            onClick: () => setViewMode("grid"),
27            className: `p-1.5 rounded-lg transition-all ${viewMode === "grid" ? "bg-white dark:bg-zinc-700 text-indigo-600 shadow-sm" : "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"}`,
28            title: "Grid View",
29            children: /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutGrid, { size: 18 })
30          }
31        ),

32        /* @__PURE__ */ jsxRuntimeExports.jsx(
33          "button",
34          {
35            onClick: () => setViewMode("list"),
36            className: `p-1.5 rounded-lg transition-all ${viewMode === "list" ? "bg-white dark:bg-zinc-700 text-indigo-600 shadow-sm" : "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"}`,
37            title: "List View",
38            children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { size: 18 })
39          }
40        )
41      ] })
42    ] }),
43    tracks.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: viewMode === "grid" ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-x-4 gap-y-8" : "flex flex-col gap-3", children: tracks.map((track, idx) => {
44      const showAd = (idx + 1) % 12 === 0;
45      return /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
46        /* @__PURE__ */ jsxRuntimeExports.jsx(
47          VideoCard,
48          {
49            track,
50            onSelect: (t2) => onSelectTrack(t2, void 0, tracks),
51            onToggleWatchLater,
52            isWatchLater: watchLaterSet.has(track.id),
53            variant: viewMode,
54            playlist: tracks
55          }
56        ),

57        showAd && shouldShowAd && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: viewMode === "grid" ? "col-span-1" : "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AdSlot, { type: "exploreList", className: "!my-0 h-full min-h-[200px]" }) })
58      ] }, track.id);
59    }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-20", children: [
60      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-zinc-400", children: t("list.empty", "This list is empty.") }),
61      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-zinc-500 mt-2", children: t("list.emptyDesc", "There are no MIDIs in this list yet.") })
62    ] })
63  ] });
64};
65export {
66  ListPage as L
67};