89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { Tree } from 'primereact/tree';
|
||
|
|
import { PrimeIcons } from 'primereact/api';
|
||
|
|
|
||
|
|
export default function AffinityGroupsTree() {
|
||
|
|
const [nodes, setNodes] = useState(
|
||
|
|
[
|
||
|
|
{
|
||
|
|
key: 1,
|
||
|
|
label: "Lilly's guests",
|
||
|
|
icon: PrimeIcons.HEART,
|
||
|
|
draggable: false,
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
key: 11,
|
||
|
|
label: "Family",
|
||
|
|
icon: PrimeIcons.HOME,
|
||
|
|
leaf: true,
|
||
|
|
className: "px-4",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 12,
|
||
|
|
label: "Country club",
|
||
|
|
icon: PrimeIcons.SUN,
|
||
|
|
className: "px-4",
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 13,
|
||
|
|
label: "Work",
|
||
|
|
icon: PrimeIcons.DESKTOP,
|
||
|
|
className: "px-4",
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 2,
|
||
|
|
label: "Dave's guests",
|
||
|
|
icon: PrimeIcons.HEART_FILL,
|
||
|
|
draggable: false,
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
key: 21,
|
||
|
|
label: "Family",
|
||
|
|
icon: PrimeIcons.HOME,
|
||
|
|
leaf: true,
|
||
|
|
className: "px-4",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 22,
|
||
|
|
label: "College friends",
|
||
|
|
icon: PrimeIcons.GRADUATION_CAP,
|
||
|
|
leaf: true,
|
||
|
|
className: "px-4",
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 3,
|
||
|
|
label: "Common guests",
|
||
|
|
icon: PrimeIcons.USERS,
|
||
|
|
draggable: false,
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
key: 31,
|
||
|
|
label: "Common workplace",
|
||
|
|
icon: PrimeIcons.BRIEFCASE,
|
||
|
|
leaf: true,
|
||
|
|
className: "px-4",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 32,
|
||
|
|
label: "Lifetime friends",
|
||
|
|
icon: PrimeIcons.STAR,
|
||
|
|
leaf: true,
|
||
|
|
className: "px-4",
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="card flex justify-content-center">
|
||
|
|
<Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|