77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { useLocal } from "@/lib/utils/use-local";
|
|
import { useEffect } from "react";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
export const PinterestLayout: React.FC<{
|
|
data: any[];
|
|
child: (item: any, index: any, data: any[], key?: string) => any;
|
|
col: number;
|
|
gap?: number;
|
|
}> = ({ data, child, col = 2, gap = 2 }) => {
|
|
function generateUUIDs(data: any[]): string[] {
|
|
return data.map(() => uuidv4());
|
|
}
|
|
const createColumns = (items: any[], numCols: number) => {
|
|
const columns: any = Array.from({ length: numCols }, () => []); // Membuat array kosong sebanyak jumlah kolom
|
|
items.forEach((item, index) => {
|
|
columns[index % numCols].push(item); // Memasukkan item ke dalam kolom secara berurutan
|
|
});
|
|
return columns;
|
|
};
|
|
const local = useLocal({
|
|
data: [] as any[],
|
|
ids: {
|
|
col: [] as string[],
|
|
data: [] as string[],
|
|
},
|
|
user: null as any,
|
|
ready: false as boolean,
|
|
});
|
|
useEffect(() => {
|
|
const columns: any[] = Array.from({ length: col }, () => []);
|
|
if (Array.isArray(data) && data?.length)
|
|
data.forEach((item, index) => {
|
|
const targetColumn = index % col; // Menentukan kolom target berdasarkan indeks
|
|
columns[targetColumn].push(item); // Memasukkan elemen ke kolom yang sesuai
|
|
});
|
|
local.data = columns;
|
|
local.render();
|
|
}, [data, col]);
|
|
return (
|
|
<>
|
|
<div className="flex flex-grow flex-1 flex-col w-full h-full">
|
|
<div
|
|
className={cx(
|
|
`grid gap-${gap}`,
|
|
css`
|
|
grid-template-columns: repeat(${col}, minmax(0, 1fr));
|
|
`
|
|
)}
|
|
>
|
|
{local.data.map((el, idx) => {
|
|
return (
|
|
<div className={`flex flex-col gap-${gap}`} key={"col_" + idx}>
|
|
{Array.isArray(el) && el.length ? (
|
|
<div
|
|
key={"col_" + idx + "_idx_" + idx}
|
|
className={`flex flex-col gap-${gap}`}
|
|
>
|
|
{el.map((item, ids, data) => {
|
|
return (
|
|
<div key={"row_" + idx + "_" + ids}>
|
|
{child(item, idx, data, "item_" + idx + "_" + ids)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|