feat: add section header

src/layouts/SectionHeader/SectionHeader.css

+.sectionheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.sectionheader__link {
+    text-decoration: none;
+    color: var(--text-color)
+}
+
+.sectionheader__link__icon {
+    font-size: 1.5rem;
+}
\ No newline at end of file

src/layouts/SectionHeader/SectionHeader.tsx

+import React from "react";
+import "./SectionHeader.css";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  useAppDispatch,
+  useAppSelector,
+  type RootState,
+} from "../../stores/store";
+import CDeviceSelect from "../../components/CDeviceSelect";
+import { setSelectedDevice } from "../../stores/slices/deviceSlice";
+import { BiArrowBack } from "react-icons/bi";
+
+interface SectionHeaderProps {
+  to?: string;
+}
+
+const SectionHeader: React.FC<SectionHeaderProps> = ({ to }) => {
+  const { devices, selectedDevice } = useAppSelector(
+    (state: RootState) => state.device
+  );
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  const handleNavigate = (e: React.MouseEvent) => {
+    if (!to) {
+      e.preventDefault();
+      navigate(-1);
+    }
+  };
+
+  return (
+    <div className="sectionheader">
+      <Link
+        to={to || "#"}
+        onClick={handleNavigate}
+        className="sectionheader__link"
+      >
+        <BiArrowBack className="sectionheader__link__icon"/>
+      </Link>
+
+      <CDeviceSelect
+        devices={devices}
+        selectedDevice={selectedDevice}
+        onDeviceChange={(name) => dispatch(setSelectedDevice(name))}
+        disabled={!devices.length}
+        style={{ width: "220px" }}
+        className="header__device-select"
+      />
+    </div>
+  );
+};
+
+export default SectionHeader;

src/layouts/SectionHeader/index.ts

+export { default } from "./SectionHeader";