56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { useAppUpdates } from '../../../hooks/useAppUpdates';
|
|
import { useServerContext } from '../../../context/ServerContext/useServerContext';
|
|
import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
|
|
import './Header.css';
|
|
|
|
interface HeaderProps {
|
|
appVersion?: string;
|
|
}
|
|
|
|
export const Header: React.FC<HeaderProps> = ({ appVersion = '1.0.0' }) => {
|
|
const { isCheckingAppUpdate, appUpdateAvailable, checkForAppUpdate } = useAppUpdates();
|
|
const { serverPath } = useServerContext();
|
|
const { isCheckingUpdates } = usePluginContext();
|
|
|
|
const handleCheckForUpdates = async () => {
|
|
if (!isCheckingAppUpdate) {
|
|
await checkForAppUpdate();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<header className="header">
|
|
<div className="header-left">
|
|
<h1 className="app-title">PlugSnatcher</h1>
|
|
<span className="app-version">v{appVersion}</span>
|
|
{appUpdateAvailable && (
|
|
<span className="update-badge">Update Available</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="header-center">
|
|
{serverPath && (
|
|
<div className="server-path-display">
|
|
<span className="server-label">Selected Server:</span>
|
|
<span className="server-path" title={serverPath}>
|
|
{serverPath.length > 40 ? `...${serverPath.slice(-40)}` : serverPath}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="header-right">
|
|
<button
|
|
className="update-check-button"
|
|
onClick={handleCheckForUpdates}
|
|
disabled={isCheckingAppUpdate || isCheckingUpdates}
|
|
>
|
|
{isCheckingAppUpdate ? 'Checking...' : 'Check for Updates'}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header; |