77 lines
No EOL
2.3 KiB
JavaScript
77 lines
No EOL
2.3 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import styles from "./TaskBar.module.css";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faBatteryFull, faSearch, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
|
|
import ApplicationsManager from "../../features/applications/applications.js";
|
|
import { useWindows } from "../../hooks/windows/WindowsContext.js";
|
|
import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
|
|
import { ReactSVG } from "react-svg";
|
|
// eslint-disable-next-line no-unused-vars
|
|
import Application from "../../features/applications/application.js";
|
|
|
|
/**
|
|
* @param {Object} props
|
|
* @param {Application} props.app
|
|
*/
|
|
function AppButton({ app }) {
|
|
const [active, setActive] = useState(false);
|
|
const windows = useWindows();
|
|
const windowsManager = useWindowsManager();
|
|
|
|
useEffect(() => {
|
|
setActive(windowsManager.isAppActive(app.id));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [windows]);
|
|
|
|
return (<button className={active ? `${styles["App-icon"]} ${styles["Active"]}` : styles["App-icon"]} key={app.id} onClick={() => { windowsManager.open(app.id); }}>
|
|
<ReactSVG src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
|
|
</button>);
|
|
}
|
|
|
|
export function Taskbar() {
|
|
const [date, setDate] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
setInterval(() => {
|
|
setDate(new Date());
|
|
}, 30000);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles["Task-bar"]}>
|
|
<div className={styles["Program-icons"]}>
|
|
<button>
|
|
<FontAwesomeIcon icon={faSearch}/>
|
|
</button>
|
|
{ApplicationsManager.APPLICATIONS.map((app) =>
|
|
<AppButton app={app} key={app.id}/>
|
|
)}
|
|
</div>
|
|
<div className={styles["Util-icons"]}>
|
|
<button>
|
|
<FontAwesomeIcon icon={faBatteryFull}/>
|
|
</button>
|
|
<button>
|
|
<FontAwesomeIcon icon={faWifi}/>
|
|
</button>
|
|
<button>
|
|
<FontAwesomeIcon icon={faVolumeHigh}/>
|
|
</button>
|
|
<button style={{ userSelect: "none" }}>
|
|
{date.toLocaleString("en-US", {
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
hour12: false,
|
|
})}
|
|
<br/>
|
|
{date.toLocaleDateString("en-GB", {
|
|
day: "numeric",
|
|
month: "short",
|
|
year: "numeric",
|
|
})}
|
|
</button>
|
|
<button id="desktop-button"/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |