feat: scroll

This commit is contained in:
dextmorgn
2025-02-09 19:46:08 +01:00
parent 91af724e19
commit 0818570a13
2 changed files with 12 additions and 8 deletions

View File

@@ -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"

View File

@@ -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} />