47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
'use client'
|
|
import { Card, CardHeader, CardContent, CardTitle, CardDescription } from "@/components/mutual/shadcnui/card";
|
|
import { TableCardProps } from "@/validations/mutual/table/type";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const ComponentTableCardPlain: React.FC<TableCardProps> = ({ data, columns, translations }) => {
|
|
const [tableData, setTableData] = useState<any>(data);
|
|
useEffect(() => {
|
|
setTableData(data);
|
|
}, [data]);
|
|
|
|
|
|
const renderCards = () => {
|
|
return tableData?.map((item: any, index: number) => (
|
|
<Card className="w-full min-w-full my-2 p-5" key={index}>
|
|
<CardHeader>
|
|
<CardTitle>Row : {index + 1}</CardTitle>
|
|
<CardDescription>{item.uuid}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col items-start justify-start">Email: {item.email}</div>
|
|
<div className="flex flex-col items-start justify-start">Phone Number: {item.phoneNumber}</div>
|
|
<div>Created At: {item.createdAt}</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
}
|
|
|
|
const noDataFound = () => (
|
|
<>
|
|
No Data Found
|
|
</>
|
|
)
|
|
return (
|
|
<>
|
|
{
|
|
tableData ? (
|
|
<div className="w-full min-w-full">
|
|
<div className="flex flex-col items-center justify-start my-6">{renderCards()}</div>
|
|
</div>
|
|
) : (noDataFound())
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ComponentTableCardPlain |