68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { AuthProvider, useAuth } from './context/AuthContext.tsx';
|
|
import { FarmProvider } from './context/FarmContext.tsx';
|
|
import AuthPage from './components/auth/AuthPage.tsx';
|
|
import FeedInButtonPanel from './components/feedInButton/FeedInButtonPanel.tsx';
|
|
import { Banner, Spinner } from './components/ui/Feedback.tsx';
|
|
import { useFarm } from './context/FarmContext.tsx';
|
|
|
|
const ButtonContent: React.FC = () => {
|
|
const { error } = useFarm();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 flex flex-col">
|
|
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
|
<div className="max-w-5xl mx-auto flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-4">
|
|
<img src="/favicon.png" alt="Logo" className="h-10 object-contain" />
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-800">Feed In/Out Button</h1>
|
|
<p className="text-sm text-gray-500">Pilih kandang untuk memulai hitung feed in</p>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href="/"
|
|
className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 hover:text-red-600 shrink-0"
|
|
>
|
|
<i className="fa-solid fa-arrow-left" />
|
|
Kembali ke Dashboard
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<main className="flex-1 px-6 py-10">
|
|
{error && (
|
|
<div className="max-w-5xl mx-auto mb-6">
|
|
<Banner kind="error">{error}</Banner>
|
|
</div>
|
|
)}
|
|
<FeedInButtonPanel variant="kiosk" />
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Gate: React.FC = () => {
|
|
const { user, loading } = useAuth();
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
|
<Spinner />
|
|
</div>
|
|
);
|
|
}
|
|
if (!user) return <AuthPage />;
|
|
return (
|
|
<FarmProvider>
|
|
<ButtonContent />
|
|
</FarmProvider>
|
|
);
|
|
};
|
|
|
|
const ButtonApp: React.FC = () => (
|
|
<AuthProvider>
|
|
<Gate />
|
|
</AuthProvider>
|
|
);
|
|
|
|
export default ButtonApp;
|