50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
// Path: Frontend/src/components/shell/ServerDock/ServerDock.tsx
|
|
|
|
import { For, Show, type JSX } from "solid-js";
|
|
import { useAppShellData } from "../data/app-shell.context";
|
|
import styles from "./ServerDock.module.scss";
|
|
|
|
export const ServerDock = (): JSX.Element => {
|
|
const appShellData = useAppShellData();
|
|
const activeServer = () => appShellData.activeServer();
|
|
|
|
return (
|
|
<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer().kind}>
|
|
<div class={styles.identity} data-slot="server-dock-identity">
|
|
<div class={styles.glyph} aria-hidden="true">
|
|
{activeServer().abbreviation}
|
|
</div>
|
|
<div class={styles.copy} data-slot="server-dock-copy">
|
|
<span class={styles.name}>{activeServer().name}</span>
|
|
<Show
|
|
when={activeServer().kind === "organization"}
|
|
fallback={<span class={styles.subtitle}>{activeServer().subtitle}</span>}
|
|
>
|
|
<span class={styles.status}>
|
|
<span class={styles.statusDot} aria-hidden="true" />
|
|
<span>{activeServer().connectedLabel}</span>
|
|
</span>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
|
|
<Show when={activeServer().dockActions.length > 0}>
|
|
<div class={styles.actions} data-slot="server-dock-actions">
|
|
<For each={activeServer().dockActions}>
|
|
{(item): JSX.Element => {
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
|
|
<Icon size={16} strokeWidth={2} />
|
|
<span class={styles.actionLabel}>{item.label}</span>
|
|
</button>
|
|
);
|
|
}}
|
|
</For>
|
|
</div>
|
|
</Show>
|
|
</section>
|
|
);
|
|
};
|