41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { Dropdown, DropdownItem, Flex, Input } from '@/components';
|
|
|
|
import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles';
|
|
|
|
const orderResults: DropdownItem[] = [
|
|
{ value: 'a-z', label: 'Sort A-Z' },
|
|
{ value: 'z-a', label: 'Sort Z-A' },
|
|
];
|
|
|
|
export const ResultsSearch: React.FC = () => {
|
|
const [selectedValue, setSelectedValue] = useState<DropdownItem>(
|
|
orderResults[0]
|
|
); //TODO replace for context
|
|
|
|
return (
|
|
<Flex css={{ justifyContent: 'space-between' }}>
|
|
<ResultsContainer>
|
|
<ResultsText>All NFAs </ResultsText>
|
|
<ResultsNumber>(3,271)</ResultsNumber>
|
|
</ResultsContainer>
|
|
<Flex css={{ gap: '$3' }}>
|
|
<Input
|
|
placeholder="Search"
|
|
leftIcon="search"
|
|
css={{ width: '23rem' }}
|
|
/>
|
|
<Dropdown
|
|
items={orderResults}
|
|
selectedValue={selectedValue}
|
|
onChange={setSelectedValue}
|
|
backgroundColor="slate4"
|
|
textColor="slate11"
|
|
optionsWidth="40"
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|