76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
// src/components/masterData/BarangGrid.tsx
|
|
|
|
import lang from "../../languages/language";
|
|
|
|
type Barang = {
|
|
id: number;
|
|
nama: string;
|
|
foto: string;
|
|
kondisi: string;
|
|
tersedia: boolean;
|
|
kategori: string;
|
|
};
|
|
|
|
type Props = {
|
|
barangList: Barang[];
|
|
onEdit: (barang: Barang) => void;
|
|
};
|
|
|
|
export default function BarangGrid({
|
|
barangList,
|
|
onEdit,
|
|
}: Props) {
|
|
return (
|
|
<div className="grid grid-cols-4 gap-6">
|
|
{barangList.map((barang) => (
|
|
<div
|
|
key={barang.id}
|
|
onClick={() => onEdit(barang)}
|
|
className="bg-white rounded-3xl shadow-lg p-4 cursor-pointer hover:shadow-2xl transition"
|
|
>
|
|
{/* FOTO DINAMIS BERDASARKAN KATEGORI */}
|
|
<div
|
|
className={`w-full overflow-hidden rounded-2xl mb-4 bg-gray-100 ${
|
|
barang.kategori === lang.electronics
|
|
? "aspect-square"
|
|
: "aspect-[2/3]"
|
|
}`}
|
|
>
|
|
<img
|
|
src={barang.foto}
|
|
alt={barang.nama}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* NAMA */}
|
|
<h2 className="text-lg font-bold text-black mb-2">
|
|
{barang.nama}
|
|
</h2>
|
|
|
|
{/* KATEGORI */}
|
|
<p className="text-sm text-blue-600 font-medium mb-1">
|
|
{barang.kategori}
|
|
</p>
|
|
{/* KONDISI */}
|
|
<p className="text-gray-600">
|
|
{lang.condition}: {barang.kondisi}
|
|
</p>
|
|
|
|
{/* STATUS */}
|
|
<p
|
|
className={`text-sm font-medium ${
|
|
barang.tersedia
|
|
? "text-green-600"
|
|
: "text-red-500"
|
|
}`}
|
|
>
|
|
{barang.tersedia
|
|
? lang.available
|
|
: lang.notAvailable}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |