Components
Loading preview...
Network component
npx shadcn@latest add https://21st.dev/r/airbnb/network// src/DemoOne.tsx
import React from 'react';
import { Component as NetworkGraphComponent } from '@/components/ui/network';
import { cn } from "@/lib/utils";
const customNodesForDemo = [
{ id: 'a', x: 50, y: 50, color: '#ff6b6b' },
{ id: 'b', x: 250, y: 80 },
{ id: 'c', x: 150, y: 250, color: '#4ecdc4' },
{ id: 'd', x: 350, y: 280 },
];
const customLinksForDemo = [
{ source: customNodesForDemo[0], target: customNodesForDemo[1], dashed: true },
{ source: customNodesForDemo[1], target: customNodesForDemo[2] },
{ source: customNodesForDemo[2], target: customNodesForDemo[3] },
{ source: customNodesForDemo[3], target: customNodesForDemo[0] },
{ source: customNodesForDemo[0], target: customNodesForDemo[2] },
];
const demoGraphData = {
nodes: customNodesForDemo,
links: customLinksForDemo,
};
const DemoOne = () => {
return (
<div className={cn("flex w-full min-h-screen justify-center items-center p-4 bg-gray-700")}>
<div className="rounded-lg shadow-xl overflow-hidden">
<NetworkGraphComponent
width={500}
height={400}
graphData={demoGraphData}
/>
</div>
</div>
);
};
export { DemoOne };