forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-13 19:13:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use tailwind-based components in AppUpdateBanner

Browse Source
This commit is contained in:
Alejandro Celaya
2025-04-02 09:20:04 +02:00
parent c9ada8f41d
commit a63c214d8d
3 changed files with 25 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/App.tsx
View File

@@ -87,7 +87,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
</div> </div>
</div> </div>
<AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} /> <AppUpdateBanner isOpen={appUpdated} onClose={resetAppUpdate} forceUpdate={forceUpdate} />
</div> </div>
); );
}; };

17
src/common/AppUpdateBanner.scss
View File

@@ -1,17 +0,0 @@
@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
@use '../utils/mixins/horizontal-align';
.app-update-banner.app-update-banner {
@include horizontal-align.horizontal-align();
position: fixed;
top: base.$headerHeight - 25px;
padding: 0 4rem 0 0;
z-index: 1040;
margin: 0;
color: var(--text-color);
text-align: center;
width: 700px;
max-width: calc(100% - 30px);
box-shadow: 0 0 1rem var(--brand-color);
}

38
src/common/AppUpdateBanner.tsx
View File

@@ -1,34 +1,44 @@
import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons'; import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { SimpleCard, useToggle } from '@shlinkio/shlink-frontend-kit'; import { useToggle } from '@shlinkio/shlink-frontend-kit';
import type { MouseEventHandler } from 'react'; import { Button, Card, CloseButton } from '@shlinkio/shlink-frontend-kit/tailwind';
import { forwardRef, useCallback } from 'react'; import { clsx } from 'clsx';
import { Alert, Button } from 'reactstrap'; import type { FC } from 'react';
import './AppUpdateBanner.scss'; import { useCallback } from 'react';
interface AppUpdateBannerProps { interface AppUpdateBannerProps {
isOpen: boolean; isOpen: boolean;
toggle: MouseEventHandler<any>; onClose: () => void;
forceUpdate: () => void; forceUpdate: () => void;
} }
export const AppUpdateBanner = forwardRef<HTMLElement, AppUpdateBannerProps>(({ isOpen, toggle, forceUpdate }, ref) => { export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, forceUpdate }) => {
const [isUpdating,, setUpdating] = useToggle(); const [isUpdating,, setUpdating] = useToggle();
const update = useCallback(() => { const update = useCallback(() => {
setUpdating(); setUpdating();
forceUpdate(); forceUpdate();
}, [forceUpdate, setUpdating]); }, [forceUpdate, setUpdating]);
if (!isOpen) {
return null;
}
return ( return (
<Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary" innerRef={ref}> <Card className={clsx(
<h4 className="mb-4">This app has just been updated!</h4> 'tw:w-[700px] tw:max-w-[calc(100%-30px)]',
<p className="mb-0"> 'tw:fixed tw:top-[35px] tw:left-[50%] tw:translate-x-[-50%] tw:z-[1040]',
)}>
<Card.Header className="tw:flex tw:items-center tw:justify-between">
<b>This app has just been updated!</b>
<CloseButton onClick={onClose} />
</Card.Header>
<Card.Body className="tw:flex tw:gap-4 tw:items-center tw:justify-between tw:max-md:flex-col">
Restart it to enjoy the new features. Restart it to enjoy the new features.
<Button role="button" disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}> <Button disabled={isUpdating} variant="secondary" solid onClick={update}>
{!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>} {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
{isUpdating && <>Restarting...</>} {isUpdating && <>Restarting...</>}
</Button> </Button>
</p> </Card.Body>
</Alert> </Card>
); );
}); };