1 files changed, 88 insertions, 0 deletions

diff --git a/packages/renderer/src/components/ServiceSwitcher.tsx b/packages/renderer/src/components/ServiceSwitcher.tsx
new file mode 100644
index 0000000..b454451
--- /dev/null
+++ b/packages/renderer/src/components/ServiceSwitcher.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import { alpha, styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import React, { useState } from 'react';
+
+import ServiceIcon from './ServiceIcon';
+import { useStore } from './StoreProvider';
+
+const ServiceSwitcherRoot = styled(Tabs, {
+  name: 'ServiceSwitcher',
+  slot: 'Root',
+})(({ theme }) => ({
+  '.MuiTabs-indicator': {
+    width: 3,
+    ...(theme.direction === 'ltr'
+      ? {
+          left: 0,
+          right: 'auto',
+        }
+      : {
+          left: 'auto',
+          right: 0,
+        }),
+  },
+}));
+
+const ServiceSwitcherTab = styled(Tab, {
+  name: 'ServiceSwitcher',
+  slot: 'Tab',
+})(({ theme }) => ({
+  minWidth: 0,
+  transition: theme.transitions.create('background-color', {
+    duration: theme.transitions.duration.shortest,
+  }),
+  '&.Mui-selected': {
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? alpha(theme.palette.text.primary, 0.16)
+        : alpha(theme.palette.primary.light, 0.3),
+  },
+}));
+
+export default observer(() => {
+  const { services } = useStore();
+  // TODO Move this to the `SharedStore`.
+  const [selectedService, setSelectedService] = useState<string | boolean>(
+    false,
+  );
+
+  return (
+    <ServiceSwitcherRoot
+      variant="scrollable"
+      orientation="vertical"
+      value={selectedService}
+      onChange={(_event, newValue: string) => setSelectedService(newValue)}
+    >
+      {services.map((service) => (
+        <ServiceSwitcherTab
+          key={service.id}
+          value={service.id}
+          icon={<ServiceIcon name={service.name} />}
+          aria-label={service.name}
+        />
+      ))}
+    </ServiceSwitcherRoot>
+  );
+});