43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
// Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
|
|
|
|
import { For, type JSX } from "solid-js";
|
|
import { Plus } from "../../../lib/icons";
|
|
import { railItems } from "../data/shell.data";
|
|
import styles from "./LeftRail.module.scss";
|
|
|
|
export const LeftRail = (): JSX.Element => {
|
|
return (
|
|
<aside class={styles.rail} aria-label="Workspace rail">
|
|
<div class={styles.topCluster}>
|
|
<div class={styles.logo} aria-hidden="true">
|
|
M
|
|
</div>
|
|
</div>
|
|
|
|
<div class={styles.items}>
|
|
<For each={railItems}>
|
|
{(item): JSX.Element => (
|
|
<button
|
|
type="button"
|
|
classList={{
|
|
[styles.workspaceButton]: true,
|
|
[styles.workspaceButtonActive]: !!item.active,
|
|
}}
|
|
title={item.label}
|
|
aria-label={item.label}
|
|
>
|
|
{item.abbreviation}
|
|
</button>
|
|
)}
|
|
</For>
|
|
</div>
|
|
|
|
<div class={styles.bottomCluster}>
|
|
<button type="button" class={styles.addButton} aria-label="Create workspace" title="Create workspace">
|
|
<Plus size={16} strokeWidth={2} />
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|