add feed in / out button page and also button to redirect to button page

components/feedInButton/FeedInButtonGrid.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { Kandang } from '../../types/api.ts';
+
+type FeedInButtonGridProps = {
+  kandangs: Kandang[];
+  variant?: 'default' | 'kiosk';
+};
+
+type ButtonItem = {
+  key: string;
+  kandangName: string;
+  label: string;
+  url: string;
+};
+
+const toButtonItems = (kandangs: Kandang[]): ButtonItem[] =>
+  kandangs.flatMap((kandang) =>
+    (kandang.feed_in_button_urls ?? [])
+      .filter((entry) => entry.url.trim())
+      .map((entry, index) => ({
+        key: `${kandang.id}-${index}`,
+        kandangName: kandang.kandang_name,
+        label: entry.label.trim(),
+        url: entry.url.trim(),
+      }))
+  );
+
+const FeedInButtonGrid: React.FC<FeedInButtonGridProps> = ({ kandangs, variant = 'default' }) => {
+  const buttons = toButtonItems(kandangs);
+  const isKiosk = variant === 'kiosk';
+
+  if (buttons.length === 0) {
+    return (
+      <div
+        className={`rounded-xl border border-dashed border-gray-300 bg-white text-center ${
+          isKiosk ? 'p-10' : 'p-8'
+        }`}
+      >
+        <i className="fa-solid fa-link-slash text-3xl text-gray-300 mb-3" />
+        <p className="text-gray-600 font-medium">Belum ada URL Feed In yang dikonfigurasi.</p>
+        <p className="text-sm text-gray-500 mt-1">
+          Atur alamat per kandang di menu Pengaturan.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`grid gap-4 ${
+        isKiosk
+          ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto'
+          : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+      }`}
+    >
+      {buttons.map((button) => {
+        const title = button.label || button.kandangName;
+        const subtitle = button.label ? button.kandangName : button.url;
+
+        return (
+          <a
+            key={button.key}
+            href={button.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`group flex flex-col items-center justify-center rounded-2xl border-2 border-red-100 bg-white text-center shadow-sm transition-all hover:border-red-500 hover:shadow-lg hover:-translate-y-0.5 ${
+              isKiosk ? 'min-h-40 p-8' : 'min-h-32 p-6'
+            }`}
+          >
+            <span
+              className={`mb-3 flex items-center justify-center rounded-full bg-red-50 text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors ${
+                isKiosk ? 'h-16 w-16 text-3xl' : 'h-12 w-12 text-2xl'
+              }`}
+            >
+              <i className="fa-solid fa-arrow-up-right-from-square" />
+            </span>
+            <span className={`font-bold text-gray-800 ${isKiosk ? 'text-2xl' : 'text-lg'}`}>
+              {title}
+            </span>
+            <span className="mt-2 text-xs text-gray-400 truncate max-w-full px-2">{subtitle}</span>
+          </a>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FeedInButtonGrid;