🪢 Wiring up to addTorrent endpoint (#105)

* 🪢 Wiring up to addTorrent endpoint

* 🧲 Added a torrent download sub-panel

* 🧲 Fixed the auto-population of search box

* 🧲 Added downloads panel

* 🧲 Surfacing torrent progress in UI via scheduled job

* 🧲 Added visual indicators of torrent progress

* 💅🏼 Formatting improvements

* 💅🏼 Formatting tweaks to tabs
This commit was merged in pull request #105.
This commit is contained in:
2024-03-30 21:41:05 -04:00
committed by GitHub
parent c89e4af328
commit 9a3ccba719
16 changed files with 416 additions and 136 deletions

View File

@@ -1,15 +1,9 @@
import React, { ReactElement, useEffect, useState } from "react";
import React, { ReactElement, useState } from "react";
import { isNil } from "lodash";
export const TabControls = (props): ReactElement => {
// const comicBookDetailData = useSelector(
// (state: RootState) => state.comicInfo.comicBookDetail,
// );
const { filteredTabs, downloadCount } = props;
const [active, setActive] = useState(filteredTabs[0].id);
// useEffect(() => {
// setActive(filteredTabs[0].id);
// }, [filteredTabs]);
return (
<>
@@ -19,7 +13,11 @@ export const TabControls = (props): ReactElement => {
{filteredTabs.map(({ id, name, icon }) => (
<a
key={id}
className="inline-flex shrink-0 items-center gap-2 border-b border-transparent px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700"
className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
active === id
? "border-b border-cyan-50 dark:text-slate-200"
: "border-b border-transparent"
}`}
aria-current="page"
onClick={() => setActive(id)}
>
@@ -28,7 +26,7 @@ export const TabControls = (props): ReactElement => {
{id === 6 && !isNil(downloadCount) ? (
<span className="inline-flex flex-row">
{/* download count */}
<span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-orange-400">
<span className="text-md text-slate-500 dark:text-slate-900">
{icon}
</span>