From 11e6d380cbeb7619f992b72fb69230f86c04670a Mon Sep 17 00:00:00 2001 From: cmp5987 <32434695+cmp5987@users.noreply.github.com> Date: Sun, 21 Apr 2024 01:52:58 +0000 Subject: [PATCH 1/2] fix(search): Fix search spacebar input and tome style --- .../components/TomeRadioGroup.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/tavern/internal/www/src/pages/create-quest/components/TomeRadioGroup.tsx b/tavern/internal/www/src/pages/create-quest/components/TomeRadioGroup.tsx index 8b2c08834..23e9f9092 100644 --- a/tavern/internal/www/src/pages/create-quest/components/TomeRadioGroup.tsx +++ b/tavern/internal/www/src/pages/create-quest/components/TomeRadioGroup.tsx @@ -1,12 +1,12 @@ import { useState } from 'react' import { RadioGroup } from '@headlessui/react' -import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Heading, Input, InputGroup, InputLeftElement } from '@chakra-ui/react' +import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Heading } from '@chakra-ui/react' import { TomeParams } from '../../../utils/consts' import { safelyJsonParse } from '../../../utils/utils' import { CheckCircleIcon } from '@heroicons/react/24/solid' import { CodeBlock, tomorrow } from 'react-code-blocks' -import { SearchIcon } from '@chakra-ui/icons' import { EmptyState, EmptyStateType } from '../../../components/tavern-base-ui/EmptyState' +import FreeTextSearch from '../../../components/tavern-base-ui/FreeTextSearch' const TomeRadioGroup = ( { label, data, selected, setSelected }: { @@ -19,7 +19,7 @@ const TomeRadioGroup = ( const [filteredData, setFilteredData] = useState(data); const [isExpanded, setIsExpanded] = useState(false); - const handleSearch = (data: Array, text: string) => { + const handleSearch = (text: string) => { const fd = data.filter((tome) => { let tomeName = tome.name.toLowerCase(); let searchText = text.toLowerCase(); @@ -30,18 +30,13 @@ const TomeRadioGroup = ( return (
-
+
+ {label} - - - - - handleSearch(data, event.target.value)} /> - -
+
{(filteredData.length === 0 && data.length > 0) && } @@ -51,7 +46,7 @@ const TomeRadioGroup = ( value={tome} className={({ active, checked }) => `${active - ? 'ring-2 ring-white/60 ring-offset-2 ring-offset-purple-300' + ? 'ring-2 ring-white/60 ring-offset-2 ring-offset-purple-800' : '' } bg-white relative flex cursor-pointer rounded-lg shadow-md focus:outline-none` @@ -70,11 +65,16 @@ const TomeRadioGroup = (

-
- {(checked || isSavedInForm) && ( -
- +
+ {(checked || isSavedInForm) ? ( +
+
+ ) : ( +