Files
soorya-carpet/resources/js/pages/dashboard/testimonial.tsx

84 lines
3.6 KiB
TypeScript

import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import AppLayout from '@/layouts/app-layout';
import { index } from '@/routes/testimonial';
import { Head, Link } from '@inertiajs/react';
import { Pencil, Trash2 } from 'lucide-react';
export default function Testimonial({
testimonial,
}: {
testimonial: [
{ name: string; description: string; location: string; image: string },
];
}) {
return (
<>
<AppLayout
breadcrumbs={[{ title: 'Testimonial', href: index().url }]}
>
<Head title={'Testimonials'}></Head>
<section className="flex flex-col gap-8 px-8 py-8">
<div className="flex items-center justify-between">
<h1 className="text-xl font-semibold tracking-tight">
Testimonial
</h1>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[80px]">S.N.</TableHead>
<TableHead className="w-48">Image</TableHead>
<TableHead>Name</TableHead>
<TableHead>Location</TableHead>
<TableHead>Description</TableHead>
<TableHead className="text-right">
Action
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{testimonial.map((item, index) => (
<TableRow key={index}>
<TableCell className="font-medium">
{index + 1}
</TableCell>
<TableCell>
<img
src={item.image}
alt={item.name}
className="aspect-video w-24 rounded-md object-cover object-center"
/>
</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.location}</TableCell>
<TableCell>{item.description}</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Link href="">
<Pencil size={18} />
</Link>
<Link href="">
<Trash2
size={18}
color={'#D2042D'}
/>
</Link>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</section>
</AppLayout>
</>
);
}