Added env variables and other shit

.env

@@ -0,0 +1 @@
+VITE_API_URL='https://api.mts.shamps.dev'

.env.example

@@ -0,0 +1 @@
+VITE_API_URL='https://api.mts.shamps.dev'

src/App.tsx

@@ -1,12 +1,15 @@
 import '@xyflow/react/dist/style.css';
 import Flow from './components/tree/flow.component';
 import { CommandMenu } from './components/command/command-menu.component';
+import { ReactFlowProvider } from '@xyflow/react';
 
 export default function App() {
-    return (
-        <div style={{ width: '100vw', height: '100vh' }}>
-            <Flow />
-            <CommandMenu />
-        </div>
-    );
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <ReactFlowProvider>
+        <Flow />
+        <CommandMenu />
+      </ReactFlowProvider>
+    </div>
+  );
 }

src/components/command/command-menu.component.tsx

@@ -1,32 +1,92 @@
-import { useEffect, useState } from "react"
-import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command"
+import { useEffect, useState } from 'react';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandInput,
+  CommandList,
+  CommandItem,
+} from '../ui/command';
+import { Person } from '@/shared/interfaces/person.interface';
+import { getPersonNodePath } from '@/shared/api/node.api';
+import { API_URL } from '@/shared/constants';
 
 export function CommandMenu() {
-    const [open, setOpen] = useState(false)
-
-    useEffect(() => {
-        const down = (e: KeyboardEvent) => {
-            if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault()
-                setOpen((open) => !open)
-            }
-        }
-        document.addEventListener("keydown", down)
-        return () => document.removeEventListener("keydown", down)
-    }, [])
-
-    return (
-        <CommandDialog open={open} onOpenChange={setOpen}>
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-                <CommandEmpty>No results found.</CommandEmpty>
-                <CommandGroup heading="Suggestions">
-                    <CommandItem>Calendar</CommandItem>
-                    <CommandItem>Search Emoji</CommandItem>
-                    <CommandItem>Calculator</CommandItem>
-                </CommandGroup>
-            </CommandList>
-        </CommandDialog>
-    )
-}
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<Person[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleQueryChange = (search: string) => {
+    setQuery(search);
+  };
+
+  useEffect(() => {
+    if (query.trim() === '') {
+      setResults([]);
+      return;
+    }
+
+    const fetchResults = async () => {
+      setError(null);
+
+      try {
+        const response = await fetch(
+          `${API_URL}/persons/search?text=${encodeURIComponent(
+            query
+          )}`
+        );
+        const data = await response.json();
+        setResults(data);
+      } catch {
+        setError('An error occurred while fetching the results.');
+      }
+    };
 
+    fetchResults();
+  }, [query]);
+
+  useEffect(() => {
+    console.log(results);
+  }, [results]);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
+      }
+    };
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, []);
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput
+        placeholder='Type a command or search...'
+        value={query}
+        onValueChange={handleQueryChange}
+      />
+      <CommandList>
+        {error && <CommandEmpty>{error}</CommandEmpty>}
+        {results.length === 0 && !error && (
+          <CommandEmpty>No results found.</CommandEmpty>
+        )}
+        {results.map((result) => {
+          return (
+            <CommandItem
+              onSelect={async () => {
+                const path = await getPersonNodePath('8', result.id);
+                console.log(path);
+                setOpen(false);
+              }}
+              key={result.id}
+            >
+              {result.name}
+            </CommandItem>
+          );
+        })}
+      </CommandList>
+    </CommandDialog>
+  );
+}

src/components/tree/custom-node.component.tsx

@@ -1,21 +1,38 @@
 import { memo } from 'react';
-import { PersonNode } from '@/shared/person-node.interface';
+import { PersonNode } from '@/shared/interfaces/person-node.interface';
 import { Handle, Position } from '@xyflow/react';
 
 function CustomNode({ data }: { data: PersonNode }) {
-    return (
-        <div className="p-2 shadow-sm rounded-md bg-white border">
-            <div className="flex">
-                <img className="h-12 w-12 rounded-full overflow-hidden" src={data.image} />
-                <div className="mx-2">
-                    <div className="text-lg font-bold">{data.name}</div>
-                    <div className="text-sm text-gray-500">{data.jobtitle}</div>
-                </div>
-            </div>
-            <Handle className="opacity-0" type="target" position={Position.Top} id="a" />
-            <Handle className="opacity-0" type="source" position={Position.Bottom} id="b" />
+  return (
+    <div className='p-4 min-w-52 shadow-sm rounded-xl bg-white border-[1.51px]'>
+      <div className='flex items-center'>
+        <img
+          className='h-12 aspect-square rounded-full overflow-hidden'
+          src={
+            data.image === ''
+              ? 'https://thispersondoesnotexist.com/'
+              : data.image
+          }
+        />
+        <div className='mx-4 h-fit'>
+          <div className='text-md font-medium'>{data.name}</div>
+          <div className='text-sm text-gray-500'>{data.jobtitle}</div>
         </div>
-    );
+      </div>
+      <Handle
+        className='border border-gray-400 w-3 h-3 bg-white'
+        type='target'
+        position={Position.Top}
+        id='a'
+      />
+      <Handle
+        className='border border-gray-400 w-3 h-3 bg-white'
+        type='source'
+        position={Position.Bottom}
+        id='b'
+      />
+    </div>
+  );
 }
 
 export default memo(CustomNode);