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>
30 lines
701 B
TypeScript
30 lines
701 B
TypeScript
import { MouseEventHandler } from "react";
|
|
|
|
export const IconButton: React.FC<{
|
|
onClick: () => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
color?: string;
|
|
children: any;
|
|
}> = (props) => {
|
|
const { onClick, disabled, color, children, className, ...otherProps } =
|
|
props;
|
|
const onClickStopPropagation: MouseEventHandler<HTMLAnchorElement> = (e) => {
|
|
e.stopPropagation();
|
|
if (disabled) {
|
|
return;
|
|
}
|
|
onClick();
|
|
};
|
|
const colorClassName = color ? `text-${color}` : "";
|
|
return (
|
|
<a
|
|
className={`block p-1 ${colorClassName} ${className}`}
|
|
onClick={onClickStopPropagation}
|
|
href="#"
|
|
{...otherProps}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
};
|