forked from administration/panel
34 lines
694 B
TypeScript
34 lines
694 B
TypeScript
"use client";
|
|
|
|
import { FC, useState } from "react";
|
|
import { Button } from "../ui/button";
|
|
|
|
export function ListCompactor<T>({
|
|
data,
|
|
Component,
|
|
}: {
|
|
data: T[];
|
|
Component: FC<{ item: T }>;
|
|
}) {
|
|
const [limit, setLimit] = useState(5);
|
|
|
|
return (
|
|
<>
|
|
{data.length === 0 && (
|
|
<h2 className="text-sm text-center pb-2 text-gray-400">Empty List</h2>
|
|
)}
|
|
{data.slice(0, limit).map((item, index) => (
|
|
<Component key={index} item={item} />
|
|
))}
|
|
{limit < data.length && (
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => setLimit((limit) => limit + 5)}
|
|
>
|
|
Show more
|
|
</Button>
|
|
)}
|
|
</>
|
|
);
|
|
}
|