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>
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { RqbitWebUI } from "rqbit-webui/src/rqbit-web";
|
|
import { CurrentDesktopState, RqbitDesktopConfig } from "./configuration";
|
|
import { ConfigModal } from "./configure";
|
|
import { IconButton } from "rqbit-webui/src/components/buttons/IconButton";
|
|
import { BsSliders2 } from "react-icons/bs";
|
|
import { APIContext } from "rqbit-webui/src/context";
|
|
import { makeAPI } from "./api";
|
|
|
|
export const RqbitDesktop: React.FC<{
|
|
version: string;
|
|
defaultConfig: RqbitDesktopConfig;
|
|
currentState: CurrentDesktopState;
|
|
}> = ({ version, defaultConfig, currentState }) => {
|
|
let [configured, setConfigured] = useState<boolean>(currentState.configured);
|
|
let [config, setConfig] = useState<RqbitDesktopConfig>(
|
|
currentState.config ?? defaultConfig
|
|
);
|
|
let [configurationOpened, setConfigurationOpened] = useState<boolean>(false);
|
|
|
|
const configButton = (
|
|
<IconButton
|
|
onClick={() => {
|
|
setConfigurationOpened(true);
|
|
}}
|
|
>
|
|
<BsSliders2 />
|
|
</IconButton>
|
|
);
|
|
|
|
return (
|
|
<APIContext.Provider value={makeAPI(config)}>
|
|
{configured && (
|
|
<RqbitWebUI
|
|
title={`Rqbit Desktop - v${version}`}
|
|
menuButtons={[configButton]}
|
|
></RqbitWebUI>
|
|
)}
|
|
<ConfigModal
|
|
show={!configured || configurationOpened}
|
|
handleStartReconfigure={() => {
|
|
setConfigured(false);
|
|
}}
|
|
handleCancel={() => {
|
|
setConfigurationOpened(false);
|
|
}}
|
|
handleConfigured={(config) => {
|
|
setConfig(config);
|
|
setConfigurationOpened(false);
|
|
setConfigured(true);
|
|
}}
|
|
initialConfig={config}
|
|
defaultConfig={defaultConfig}
|
|
/>
|
|
</APIContext.Provider>
|
|
);
|
|
};
|