forked from blakeblackshear/frigate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Cameras.jsx
32 lines (27 loc) · 973 Bytes
/
Cameras.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { h } from 'preact';
import ActivityIndicator from './components/ActivityIndicator';
import Card from './components/Card';
import CameraImage from './components/CameraImage';
import Events from './Events';
import Heading from './components/Heading';
import { route } from 'preact-router';
import { useConfig } from './api';
import { useMemo } from 'preact/hooks';
export default function Cameras() {
const { data: config, status } = useConfig();
if (!config) {
return <p>loading…</p>;
}
return (
<div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{Object.keys(config.cameras).map((camera) => (
<Camera name={camera} />
))}
</div>
);
}
function Camera({ name }) {
const href = `/cameras/${name}`;
const buttons = useMemo(() => [{ name: 'Events', href: `/events?camera=${name}` }], [name]);
return <Card buttons={buttons} href={href} header={name} media={<CameraImage camera={name} />} />;
}