mirror of
https://github.com/reconurge/flowsint.git
synced 2026-03-12 01:44:42 -05:00
feat: scroll
This commit is contained in:
@@ -4,7 +4,7 @@ import { Avatar, Box, Card, Flex, IconButton, Skeleton, Text } from '@radix-ui/t
|
||||
import { useIndividuals } from '@/src/lib/hooks/individuals/use-individuals';
|
||||
import { useInvestigationContext } from '@/src/components/contexts/investigation-provider';
|
||||
import { cn } from '@/src/lib/utils';
|
||||
import { Pencil1Icon } from '@radix-ui/react-icons';
|
||||
import { MagnifyingGlassIcon, Pencil1Icon } from '@radix-ui/react-icons';
|
||||
import { RotateCwIcon } from 'lucide-react';
|
||||
|
||||
const Filters = ({ investigation_id }: { investigation_id: string }) => {
|
||||
@@ -12,9 +12,13 @@ const Filters = ({ investigation_id }: { investigation_id: string }) => {
|
||||
const { currentNode, setCurrentNode, handleOpenIndividualModal } = useInvestigationContext()
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-2'>
|
||||
<Flex justify={"between"} align={"center"}><Text size={"2"}>Profiles</Text> <IconButton disabled={isLoading} onClick={() => refetch()} size={"1"} variant='ghost' color='gray'><RotateCwIcon className={cn('h-3.5', isLoading && 'animate-spin')} /></IconButton></Flex>
|
||||
<Flex direction={"column"} gap="1">
|
||||
<div className='flex flex-col gap-2 p-1'>
|
||||
<Flex justify={"between"} align={"center"}><Text size={"2"}>Profiles</Text>
|
||||
<IconButton className='!p-1 !mr-2' radius='medium' disabled={isLoading} onClick={() => refetch()} size="1" variant="ghost" color="gray">
|
||||
<RotateCwIcon width="15" height="15" />
|
||||
</IconButton>
|
||||
</Flex>
|
||||
<Flex direction={"column"} gap="2">
|
||||
{isLoading && <>
|
||||
<Skeleton height={"48px"} />
|
||||
<Skeleton height={"48px"} />
|
||||
@@ -23,7 +27,7 @@ const Filters = ({ investigation_id }: { investigation_id: string }) => {
|
||||
}
|
||||
{individuals?.map((individual: any) => (
|
||||
<Box key={individual.id}>
|
||||
<Card className={cn('relative group cursor-pointer border border-transparent hover:border-sky-400', currentNode === individual.id && 'border-sky-400')} onClick={() => setCurrentNode(individual.id)}>
|
||||
<Card size={"1"} className={cn('!p-2 relative group cursor-pointer border border-transparent hover:border-sky-400', currentNode === individual.id && 'border-sky-400')} onClick={() => setCurrentNode(individual.id)}>
|
||||
<Flex gap="3" align="center">
|
||||
<Avatar
|
||||
size="3"
|
||||
|
||||
@@ -7,7 +7,7 @@ import { SearchIcon } from "lucide-react"
|
||||
import Highlighter from "react-highlight-words";
|
||||
import Link from 'next/link';
|
||||
import { useSearchResults } from '../../lib/hooks/investigation/use-search-results';
|
||||
import { Card, Dialog, IconButton, TextField } from '@radix-ui/themes';
|
||||
import { Card, Dialog, IconButton, Spinner, TextField } from '@radix-ui/themes';
|
||||
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
|
||||
import { useInvestigationContext } from '../contexts/investigation-provider';
|
||||
|
||||
@@ -93,14 +93,14 @@ const SearchModal = ({ investigation_id }: { investigation_id: string }) => {
|
||||
<TextField.Root
|
||||
defaultValue={search}
|
||||
onChange={debouncedChangeHandler}
|
||||
placeholder="Search the docs…">
|
||||
placeholder="Your search here…">
|
||||
<TextField.Slot>
|
||||
<MagnifyingGlassIcon height="16" width="16" />
|
||||
</TextField.Slot>
|
||||
</TextField.Root>
|
||||
<div className='min-h-[20vh] max-h-[60vh] w-full relative text-center flex flex-col items-center justify-center gap-2'>
|
||||
{error && "An error occured."}
|
||||
{isLoading && <span className="loading loading-bars loading-md"></span>}
|
||||
{isLoading && <Spinner />}
|
||||
{results?.length === 0 && `No results found for "${search}".`}
|
||||
<ul className='w-full h-full flex flex-col gap-1 overflow-auto mt-2'>{!error && !isLoading && Array.isArray(results) && results?.map((item) => (
|
||||
<SearchItem key={item.id} item={item} />
|
||||
|
||||
Reference in New Issue
Block a user