ars9
35997f8bcb
- add ContextMenu component with click-outside/Escape dismiss, align prop, and danger variant - replace EnvironmentsPage table with responsive card grid - add cog button to each card opening a context menu with view and delete actions - add EnvironmentDetailPage at /environments/:id with meta grid, URLs card, and delete - add Breadcrumbs to all pages; detail page uses two-item trail with delete button inline - add Table stories for pagination and Timestamp column
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { keys } from '../api';
|
|
import { Breadcrumbs, Table, type TableColumn } from '../ui';
|
|
import styles from './Page.module.css';
|
|
|
|
interface KeyRow {
|
|
name: string;
|
|
}
|
|
|
|
export function KeysPage() {
|
|
const { t } = useTranslation();
|
|
const [items, setItems] = useState<KeyRow[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const columns: TableColumn<KeyRow>[] = [
|
|
{ key: 'name', header: t('keys.col_name'), render: (k) => k.name },
|
|
];
|
|
|
|
useEffect(() => {
|
|
keys
|
|
.list()
|
|
.then((res) => setItems(res.keys.map((name) => ({ name }))))
|
|
.catch((err: Error) => setError(err.message))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<Breadcrumbs items={[{ label: t('keys.title') }]} className={styles.breadcrumbs} />
|
|
{error && <p className={styles.error}>{error}</p>}
|
|
<Table
|
|
columns={columns}
|
|
data={items}
|
|
rowKey={(k) => k.name}
|
|
loading={loading}
|
|
emptyMessage={t('keys.empty')}
|
|
pageSize={10}
|
|
pageSizeOptions={[10, 25, 50]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|