Files
rahavard-portal/resources/js/Components/ProductTable.jsx

57 lines
2.2 KiB
JavaScript

import { Link } from '@inertiajs/react'
import { useState, useEffect } from 'react'
import { router } from '@inertiajs/react'
export default function ProductTable({ items, title, links}) {
console.log(items);
const items_list = items.map(items => {
return (
<tr key={items.id} className="border-y text-right font-normal">
<td className="py-2">{ items.id }</td>
<td className="py-2">{ items.images[0] ? <img className="z-0 w-16 h-16 rounded-lg shadow-inner p-1" src={ items.images[0].thumbnail } alt={ items.images[0].alt } /> : null }</td>
<td className="py-2 text-lg">{ items.title }</td>
<td className="py-2">{ items.price }</td>
<td className="py-2">{ items.inventory }</td>
</tr>
)}
);
return (
<div className="h-full">
<div className="flex flex-col bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition overflow-auto max-h-full">
<div className="w-full px-3">
<table className="table-auto border-collapse w-full text-right">
<th className="text-sm font-normal w-12">
<span>
آیدی
</span>
</th>
<th className="text-sm font-normal w-20">
<span>
عکس
</span>
</th>
<th className="text-sm font-normal">
<span>
عنوان
</span>
</th>
<th className="text-sm font-normal">
<span>
قیمت
</span>
</th>
<th className="text-sm font-normal">
<span>
موجودی
</span>
</th>
{items_list}
</table>
</div>
</div>
</div>
);
}