first commit

components/ui/Feedback.tsx

@@ -0,0 +1,55 @@
+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, atau buat data di{' '}
+    <button type="button" className="font-semibold underline" onClick={onSettings}>
+      Pengaturan
+    </button>
+    .
+  </Banner>
+);