78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import Register from "./register/Register";
|
|
import Search from "./search/Search";
|
|
import "./MainForm.css";
|
|
import FaceLiveness from "./faceLivelinessCheck/FaceLivelinessCheck";
|
|
import FaceMovementDetection from "./faceMovementDetection/FaceMovementDetection";
|
|
import RealtimeCount from "./realtimeCount/RealtimeCount";
|
|
import RealtimeDetection from "./realtimeDetection/RealtimeDetection";
|
|
|
|
const MainForm: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState<
|
|
| "register"
|
|
| "search"
|
|
| "realtime"
|
|
| "liveliness"
|
|
| "realtime-count"
|
|
| "facemovement"
|
|
>("register");
|
|
|
|
return (
|
|
<div className="main-container">
|
|
<div className="tabs">
|
|
<button
|
|
className={`tab-button ${activeTab === "register" ? "active" : ""}`}
|
|
onClick={() => setActiveTab("register")}
|
|
>
|
|
Register
|
|
</button>
|
|
<button
|
|
className={`tab-button ${activeTab === "search" ? "active" : ""}`}
|
|
onClick={() => setActiveTab("search")}
|
|
>
|
|
Search
|
|
</button>
|
|
<button
|
|
className={`tab-button ${activeTab === "realtime" ? "active" : ""}`}
|
|
onClick={() => setActiveTab("realtime")}
|
|
>
|
|
Realtime Detection
|
|
</button>
|
|
{/* <button
|
|
className={`tab-button ${activeTab === "liveliness" ? "active" : ""}`}
|
|
onClick={() => setActiveTab("liveliness")}
|
|
>
|
|
Liveliness Detection
|
|
</button> */}
|
|
<button
|
|
className={`tab-button ${
|
|
activeTab === "realtime-count" ? "active" : ""
|
|
}`}
|
|
onClick={() => setActiveTab("realtime-count")}
|
|
>
|
|
Realtime Count
|
|
</button>
|
|
<button
|
|
className={`tab-button ${
|
|
activeTab === "facemovement" ? "active" : ""
|
|
}`}
|
|
onClick={() => setActiveTab("facemovement")}
|
|
>
|
|
Face Movement Detection
|
|
</button>
|
|
</div>
|
|
<div className="tab-content">
|
|
{activeTab === "register" && <Register />}
|
|
{activeTab === "search" && <Search />}
|
|
{activeTab === "realtime" && <RealtimeDetection />}
|
|
{activeTab === "liveliness" && <FaceLiveness />}
|
|
{activeTab === "realtime-count" && <RealtimeCount />}
|
|
{activeTab === "facemovement" && <FaceMovementDetection />}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MainForm;
|