improve ribbon

2024-07-20 16:28:00 +02:00
parent c1b7dc46dd
commit e27c360395
7 changed files with 205 additions and 41 deletions
@@ -0,0 +1,30 @@
+import * as React from "bloatless-react";
+
+import ChatViewModel, { ChatPageType } from "../../ViewModel/chatViewModel";
+
+export function ChatViewToggleButton(
+  label: string,
+  icon: string,
+  page: ChatPageType,
+  chatViewModel: ChatViewModel
+) {
+  function select() {
+    chatViewModel.selectedPage.value = page;
+  }
+
+  const isSelected = React.createProxyState(
+    [chatViewModel.selectedPage],
+    () => chatViewModel.selectedPage.value == page
+  );
+
+  return (
+    <button
+      class="ghost"
+      aria-label={label}
+      toggle:selected={isSelected}
+      on:click={select}
+    >
+      <span class="icon">{icon}</span>
+    </button>
+  );
+}