56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
|
|
type BannerProps = {
|
|
kind?: 'error' | 'info' | 'success';
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
const styles = {
|
|
error: 'bg-red-50 text-red-800 border-red-200',
|
|
info: 'bg-sky-50 text-sky-800 border-sky-200',
|
|
success: 'bg-green-50 text-green-800 border-green-200',
|
|
};
|
|
|
|
export const Banner: React.FC<BannerProps> = ({ kind = 'info', children }) => (
|
|
<div className={`rounded-lg border px-4 py-3 text-sm ${styles[kind]}`}>{children}</div>
|
|
);
|
|
|
|
export const PageHeader: React.FC<{
|
|
title: string;
|
|
subtitle?: string;
|
|
icon?: React.ReactNode;
|
|
actions?: React.ReactNode;
|
|
}> = ({ title, subtitle, icon, actions }) => (
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
|
|
<div className="flex items-center">
|
|
{icon && (
|
|
<div className="bg-red-600 text-white p-3 rounded-lg mr-4">
|
|
<span className="text-2xl sm:text-3xl">{icon}</span>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-800">{title}</h1>
|
|
{subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
{actions}
|
|
</div>
|
|
);
|
|
|
|
export const Spinner: React.FC = () => (
|
|
<div className="flex items-center justify-center py-12 text-gray-400 gap-2">
|
|
<i className="fa-solid fa-spinner fa-spin" />
|
|
<span>Memuat...</span>
|
|
</div>
|
|
);
|
|
|
|
export const EmptyFarm: React.FC<{ onSettings: () => void }> = ({ onSettings }) => (
|
|
<Banner>
|
|
Pilih site, kandang, dan siklus di header. GM mendaftarkan site di{' '}
|
|
<button type="button" className="font-semibold underline" onClick={onSettings}>
|
|
Pengaturan
|
|
</button>
|
|
; BUH melihat rollup site dari GM yang dikelola.
|
|
</Banner>
|
|
);
|