89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
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;
|