50fc7f2f01
* add tailwindcss * add header component with logo and add torrent buttons * remove bootstrap from few files replace it with tailwindcss classes, add card which diplay all nessesarry information about torrent and current state * Add modal component and reorganize components folder * add useModal hook to render modal though react portal, remove UrlPromptModal and replace it with useModal. * add taliwindcss to Desctop app * removed bootstrap from deleteTorrentModal replace it with useModal * replacing bootstrap with useModal * saving * Saving * Header and cards now look good * Modals still broken... * still doesnt work * Finally it scrolls * Continuing to fix bugs * Continuing to fix bugs * Aler * Getting better * Desktop doesnt work with tailwind somehow * Desktop now works with tailwind * Styles fully work * (De)select all buttons * fix alert styles * Animate progress bar * Progress bar + error colors * Fix error message * Torrent status icon (#56) * add statusIcon component to display icon of the torrent status * change props name and remove isDownloading variable * Tweak styles for icon * Tweak styles * Update styles --------- Co-authored-by: Artur Lozovski <arccik@gmail.com>
24 lines
797 B
TypeScript
24 lines
797 B
TypeScript
import { useContext } from "react";
|
|
import { TorrentId, ErrorDetails as ApiErrorDetails } from "../api-types";
|
|
import { AppContext } from "../context";
|
|
import { TorrentsList } from "./TorrentsList";
|
|
import { ErrorComponent } from "./ErrorComponent";
|
|
|
|
export const RootContent = (props: {
|
|
closeableError: ApiErrorDetails | null;
|
|
otherError: ApiErrorDetails | null;
|
|
torrents: Array<TorrentId> | null;
|
|
torrentsLoading: boolean;
|
|
}) => {
|
|
let ctx = useContext(AppContext);
|
|
return (
|
|
<div className="container mx-auto">
|
|
<ErrorComponent
|
|
error={props.closeableError}
|
|
remove={() => ctx.setCloseableError(null)}
|
|
/>
|
|
<ErrorComponent error={props.otherError} />
|
|
<TorrentsList torrents={props.torrents} loading={props.torrentsLoading} />
|
|
</div>
|
|
);
|
|
};
|