SensorsNetwork.tsx
1.97 KB
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
33
34
35
36
37
38
39
40
41
42
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Plug, Thermometer, Weight, Activity, Database } from 'lucide-react';
import { cn } from '../ui/utils';
export function SensorsNetwork() {
const sensors = [
{ name: 'Temp', icon: Thermometer, status: '97% online', color: 'bg-green-100 text-green-600' },
{ name: 'Weight', icon: Weight, status: '92% online', color: 'bg-green-100 text-green-600' },
{ name: 'Motion', icon: Activity, status: '85% online', color: 'bg-yellow-100 text-yellow-600' },
{ name: 'Quality', icon: Database, status: '63% online', color: 'bg-red-100 text-red-600' },
];
return (
<Card className="col-span-1 md:col-span-2 shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<div className="flex items-center gap-2">
<Plug className="w-5 h-5 text-blue-600" />
<CardTitle className="text-base font-semibold">Sensors Network</CardTitle>
</div>
<Button variant="outline" size="sm" className="h-7 text-xs bg-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100">
Manage
</Button>
</CardHeader>
<CardContent>
<div className="text-xs text-muted-foreground mb-6">Device status monitoring</div>
<div className="grid grid-cols-4 gap-4">
{sensors.map((sensor, index) => (
<div key={index} className="flex flex-col items-center justify-center text-center">
<div className={cn("w-12 h-12 rounded-xl flex items-center justify-center mb-3 transition-transform hover:scale-105", sensor.color)}>
<sensor.icon className="w-6 h-6" />
</div>
<div className="text-sm font-semibold text-gray-900">{sensor.name}</div>
<div className="text-xs text-gray-500">{sensor.status}</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}