diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx index 0a7562ece..5312db4ce 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx @@ -1,38 +1,71 @@ +import { useState } from 'react' import styled from 'styled-components' +import { AutoComplete, TAutocompleteOption } from '~/components/common/AutoComplete' import { Flex } from '~/components/common/Flex' import ClearIcon from '~/components/Icons/ClearIcon' import FamilyHistoryIcon from '~/components/Icons/FamilyHistoryIcon' +import SearchIcon from '~/components/Icons/SearchIcon' +import { Schema } from '~/network/fetchSourcesData' import { colors } from '~/utils/colors' interface HeaderProps { onClose: () => void activeTab: 'all' | 'parent' setActiveTab: (tab: 'all' | 'parent') => void + onSchemaSelect: (schemaId: string) => void + schemas: Schema[] } interface TabProps { active: boolean } -export const Header = ({ onClose, activeTab, setActiveTab }: HeaderProps) => ( - - - - Blueprint - - - setActiveTab('all')}> - Show All - - setActiveTab('parent')}> - Parent Only - - - - - - -) +export const Header = ({ onClose, activeTab, setActiveTab, onSchemaSelect, schemas }: HeaderProps) => { + const [searchTerm, setSearchTerm] = useState('') + + const searchOptions = schemas + .filter((schema): schema is Schema & { ref_id: string } => schema.ref_id !== undefined && schema.type !== undefined) + .map((schema) => ({ + label: schema.type, + value: schema.ref_id, + })) + + return ( + + + + Blueprint + + + + setSearchTerm(value)} + onSelect={(option: TAutocompleteOption | null) => { + if (option?.value) { + onSchemaSelect(option.value) + } + }} + options={searchOptions} + placeholder="Search" + /> + {searchTerm?.trim() ? null : } + + + + setActiveTab('all')}> + Show All + + setActiveTab('parent')}> + Parent Only + + + + + + + + ) +} const HeaderWrapper = styled(Flex)` background-color: ${colors.BG1}; @@ -43,6 +76,7 @@ const HeaderWrapper = styled(Flex)` justify-content: space-between; padding: 17px; border-bottom: 1px solid ${colors.black}; + z-index: 2000; ` const IconWrapper = styled.div` @@ -66,6 +100,20 @@ const Title = styled.span` font-size: 22px; ` +const InputButton = styled(Flex).attrs({ + align: 'center', + justify: 'center', + p: 5, +})` + font-size: 32px; + color: ${colors.mainBottomIcons}; + cursor: pointer; + transition-duration: 0.2s; + margin-left: -42px; + z-index: 2; + width: 30px; +` + const TabsWrapper = styled.div` display: flex; position: absolute; @@ -106,3 +154,65 @@ const CloseButton = styled.div` height: 32px; } ` + +const SearchSection = styled.div` + display: flex; + align-items: center; + width: 300px; + position: fixed; + transform: translateY(-6px); + margin-left: 11%; + + &:has(.MuiTextField-root:focus-within) { + ${InputButton} { + color: ${colors.primaryBlue}; + } + } +` + +const StyledAutoComplete = styled(AutoComplete)` + .MuiTextField-root { + pointer-events: auto; + height: 40px !important; + z-index: 2; + box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); + width: 100%; + color: #fff; + box-shadow: none; + border: none; + border-radius: 200px !important; + background: ${colors.BG2}; + + .MuiInput-input.MuiInputBase-input { + padding: 1px 40px 1px 18px; + height: 40px !important; + + -webkit-autofill, + -webkit-autocomplete, + -webkit-contacts-auto-fill, + -webkit-credentials-auto-fill { + display: none !important; + visibility: hidden !important; + pointer-events: none !important; + position: absolute !important; + right: 0 !important; + } + } + + &:focus-within { + outline: 1px solid ${colors.primaryBlue}; + } + + &:hover { + background: ${colors.black}; + } + + input::placeholder { + color: ${colors.GRAY7}; + } + + .MuiAutocomplete-endAdornment { + display: none; + } + } +` diff --git a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx index 260af531b..fac393da6 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx @@ -138,7 +138,15 @@ export const Body = ({ Close }: BodyProps) => { return ( <> -
+
{ + setSelectedSchemaId(schemaId) + }} + schemas={schemas} + setActiveTab={setActiveTab} + />