124 lines
3.8 KiB
JavaScript
124 lines
3.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
|
|
import {
|
|
Enroll,
|
|
Compare,
|
|
Liveness,
|
|
Search,
|
|
VerifySection
|
|
} from './Section';
|
|
|
|
const Verify = () => {
|
|
const verifyTabs = [
|
|
{ name: 'Enroll', link: 'face-enroll' },
|
|
{ name: 'Verify', link: 'face-verifysection' },
|
|
{ name: 'Liveness', link: 'face-liveness' },
|
|
{ name: 'Compare', link: 'face-compare' },
|
|
{ name: 'Search', link: 'face-search' },
|
|
];
|
|
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
// Redirect otomatis ke rute default saat akses ke /face-verify
|
|
useEffect(() => {
|
|
if (window.location.pathname === '/face-verify') {
|
|
navigate('face-enroll', { replace: true });
|
|
}
|
|
}, [navigate]);
|
|
|
|
// Update state isMobile berdasarkan ukuran layar
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setIsMobile(window.innerWidth <= 768);
|
|
};
|
|
|
|
handleResize();
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container" style={styles.container}>
|
|
{/* Static Content */}
|
|
<div className="row-card border-left border-primary shadow mb-4" style={styles.welcomeCard}>
|
|
<div className="d-flex flex-column justify-content-start align-items-start p-4">
|
|
<h4 className="mb-3 text-start">
|
|
<i className="fas fa-warning fa-bold me-3"></i>Alert
|
|
</h4>
|
|
<p className="mb-0 text-start">
|
|
Get started now by creating an Application ID and explore all the demo services available on the dashboard.
|
|
Experience the ease and flexibility of trying out all our features firsthand.
|
|
</p>
|
|
<div className="d-flex flex-row mt-3">
|
|
<Link to="/createApps" style={{ textDecoration: 'none' }}>
|
|
<button className="btn d-flex justify-content-center align-items-center me-2" style={styles.createButton}>
|
|
<i className="fas fa-plus text-white me-2"></i>
|
|
<p className="text-white mb-0">Create New App ID</p>
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div style={styles.section}>
|
|
<div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
|
|
<div className="d-flex flex-wrap">
|
|
{verifyTabs.map((tab) => (
|
|
<Link
|
|
key={tab.link}
|
|
to={tab.link}
|
|
className={`btn ${window.location.pathname.includes(tab.link) ? 'btn-primary' : 'btn-light'} me-2 mb-2`}
|
|
style={styles.tabLink}
|
|
>
|
|
{tab.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dynamic Tab Content */}
|
|
<div className="tab-content">
|
|
<Routes>
|
|
<Route path="face-enroll" element={<Enroll />} />
|
|
<Route path="face-verifysection" element={<VerifySection />} />
|
|
<Route path="face-liveness" element={<Liveness />} />
|
|
<Route path="face-compare" element={<Compare />} />
|
|
<Route path="face-search" element={<Search />} />
|
|
</Routes>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Verify;
|
|
|
|
const styles = {
|
|
container: {
|
|
marginTop: '3%',
|
|
padding: '0 15px',
|
|
},
|
|
welcomeCard: {
|
|
backgroundColor: '#E2FBEA',
|
|
borderLeft: '4px solid #0542CC',
|
|
borderRadius: '5px',
|
|
marginBottom: '20px',
|
|
},
|
|
createButton: {
|
|
backgroundColor: '#0542CC',
|
|
},
|
|
section: {
|
|
padding: '20px',
|
|
border: '0.1px solid rgba(0, 0, 0, 0.2)',
|
|
borderLeft: '4px solid #0542CC',
|
|
borderRadius: '10px',
|
|
width: '100%',
|
|
},
|
|
tabLink: {
|
|
padding: '10px 20px',
|
|
},
|
|
};
|