https://www.hamienet.com/assets/LyricsSearchPage-CSEEDiVu.js

1import { r as reactExports, j as jsxRuntimeExports } from "./vendor-react-Bay9Y7Lb.js";
2import { a as api } from "./index-w5lXls15.js";
3import { u as useTranslation } from "./vendor-i18n-BC7ZMXWQ.js";
4import { bf as Search, bA as Eye, bg as Music } from "./vendor-D0P4XgNj.js";
5const LyricsSearchPage = ({ onNavigate }) => {
6  const { t } = useTranslation();
7  const [query, setQuery] = reactExports.useState("");
8  const [results, setResults] = reactExports.useState([]);
9  const [loading, setLoading] = reactExports.useState(false);
10  const [total, setTotal] = reactExports.useState(0);
11  const handleSearch = (e) => {
12    if (e) e.preventDefault();
13    if (!query.trim()) return;
14    setLoading(true);
15    api.searchLyrics(query).then((res) => {
16      setResults(res.results);
17      setTotal(res.total);
18    }).catch((err) => console.error(err)).finally(() => setLoading(false));
19  };
20  reactExports.useEffect(() => {
21    const params = new URLSearchParams(window.location.search);
22    const qParam = params.get("q");
23    if (qParam) {
24      setQuery(qParam);
25      setLoading(true);
26      api.searchLyrics(qParam).then((res) => {
27        setResults(res.results);
28        setTotal(res.total);
29      }).finally(() => setLoading(false));
30    }
31  }, []);
32  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 max-w-4xl mx-auto", children: [
33    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 mb-8 pb-4 border-b border-zinc-200 dark:border-zinc-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-3xl font-extrabold text-zinc-900 dark:text-white", children: t("lyrics.searchLyrics", "Search Lyrics") }) }),
34    /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSearch, className: "flex gap-3 mb-8", children: [

35      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex-1", children: [
36        /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400", size: 18 }),
37        /* @__PURE__ */ jsxRuntimeExports.jsx(
38          "input",
39          {
40            type: "text",
41            value: query,
42            onChange: (e) => setQuery(e.target.value),
43            placeholder: t("lyrics.searchPlaceholder", "Enter song name, artist, or lyric lines..."),
44            className: "w-full pl-11 pr-4 py-3 bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl text-zinc-900 dark:text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition"
45          }
46        )
47      ] }),
48      /* @__PURE__ */ jsxRuntimeExports.jsx(
49        "button",
50        {
51          type: "submit",
52          className: "px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl shadow-lg shadow-indigo-500/20 active:scale-95 transition",
53          children: t("lyrics.search", "Search")
54        }
55      )
56    ] }),

57    loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center py-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin" }) }) : results.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
58      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-zinc-500 mb-4", children: t("lyrics.resultsFound", "Found {{count}} matches", { count: total }) }),
59      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3", children: results.map((lyric) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
60        "div",
61        {
62          onClick: () => onNavigate("lyrics", lyric.id),
63          className: "p-4 bg-zinc-50 dark:bg-zinc-900/40 border border-zinc-200 dark:border-zinc-800 hover:border-indigo-500 rounded-xl cursor-pointer transition flex items-center justify-between",
64          children: [
65            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [

66              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-bold text-zinc-900 dark:text-white group-hover:text-indigo-400 transition mb-1 text-base", children: lyric.title }),
67              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-xs text-zinc-500", children: [
68                lyric.artist && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-indigo-400 font-medium", children: lyric.artist }),
69                lyric.album && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: lyric.album })
70              ] })
71            ] }),
72            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3 text-xs text-zinc-500", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1", children: [
73              /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { size: 12 }),
74              lyric.views
75            ] }) })
76          ]
77        },
78        lyric.id
79      )) })
80    ] }) : query && !loading ? /* @__P

80URE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-20 border border-dashed border-zinc-200 dark:border-zinc-800 rounded-2xl", children: [
81      /* @__PURE__ */ jsxRuntimeExports.jsx(Music, { className: "mx-auto text-zinc-500 mb-4", size: 40 }),
82      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-zinc-400 font-medium", children: t("lyrics.noResults", "No lyrics found") }),
83      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-zinc-500 mt-1", children: t("lyrics.noResultsDesc", "Try using different keywords or tags.") })
84    ] }) : null
85  ] });
86};
87export {
88  LyricsSearchPage as default
89};