Image Scanner Demo 1

1"use client";
2 
3import { useState } from "react";
4import { ImageScanner } from "../ui/image-scanner";
5import {
6  Activity,
7  Clock,
8  MapPin,
9  Shield,
10  Maximize2,
11  MoreVertical,
12  Signal,
13} from "lucide-react";
14import { Badge } from "@/components/ui/badge";
15import { Button } from "@/components/ui/button";
16import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
17 
18export const ImageScannerDemo1 = () => {
19  const [selectedCamera, setSelectedCamera] = useState(0);
20  const [alertLevel, setAlertLevel] = useState<
21    "normal" | "warning" | "critical"
22  >("normal");
23  const [scanTrigger, setScanTrigger] = useState(false);
24 
25  const cameras = [
26    {
27      id: 1,
28      name: "Main Entrance",
29      location: "Building A - Floor 1",
30      image: "/assets/images/image-scanner/entrance.jpg",
31      lastScan: "2 min ago",
32      alertLevel: "normal" as const,
33      fps: 30,
34    },
35    {
36      id: 2,
37      name: "Parking Garage",
38      location: "Underground Level",
39      image: "/assets/images/image-scanner/parking.png",
40      lastScan: "1 min ago",
41      alertLevel: "warning" as const,
42      fps: 25,
43    },
44    {
45      id: 3,
46      name: "Server Room",
47      location: "Building B - Floor 3",
48      image: "/assets/images/image-scanner/serverroom.png",
49      lastScan: "3 min ago",
50      alertLevel: "critical" as const,
51      fps: 30,
52    },
53    {
54      id: 4,
55      name: "Reception Area",
56      location: "Building A - Floor 1",
57      image: "/assets/images/image-scanner/reception.png",
58      lastScan: "30 sec ago",
59      alertLevel: "normal" as const,
60      fps: 30,
61    },
62  ];
63 
64  const triggerManualScan = () => {
65    setScanTrigger((prev) => !prev);
66  };
67 
68  const getScanColor = (level: "critical" | "warning" | "normal") => {
69    switch (level) {
70      case "critical":
71        return "red";
72      case "warning":
73        return "amber";
74      default:
75        return "emerald";
76    }
77  };
78 
79  const getScanType = (cameraId: number) => {
80    switch (cameraId) {
81      case 1:
82        return "matrix";
83      case 2:
84        return "radar";
85      case 3:
86        return "grid";
87      case 4:
88        return "pulse";
89      default:
90        return "default";
91    }
92  };
93 
94  const getBadgeVariant = (level: "critical" | "warning" | "normal") => {
95    switch (level) {
96      case "critical":
97        return "destructive";
98      case "warning":
99        return "secondary";
100      default:
101        return "default";
102    }
103  };
104 
105  return (
106// … truncated