diff --git a/src/components/App/MainToolbar/index.tsx b/src/components/App/MainToolbar/index.tsx index 43a04cc6a..fc9ae6794 100644 --- a/src/components/App/MainToolbar/index.tsx +++ b/src/components/App/MainToolbar/index.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import AddContentIcon from '~/components/Icons/AddContentIcon' import AddSourceIcon from '~/components/Icons/AddSourceIcon' import SentimentDataIcon from '~/components/Icons/SentimentDataIcon' -import SettingsIcon from '~/components/Icons/SettingsIcon' import SourcesTableIcon from '~/components/Icons/SourcesTableIcon' import { Flex } from '~/components/common/Flex' import { Text } from '~/components/common/Text' @@ -50,12 +49,12 @@ export const MainToolbar = () => { Sentiment Data - + {/* Change Display - + */} ) } diff --git a/src/components/SourcesTableModal/SourcesView/Topics/Search/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/Search/index.tsx new file mode 100644 index 000000000..4b48525a0 --- /dev/null +++ b/src/components/SourcesTableModal/SourcesView/Topics/Search/index.tsx @@ -0,0 +1,52 @@ +import { Divider } from '@mui/material' +import IconButton from '@mui/material/IconButton' +import InputBase from '@mui/material/InputBase' +import Paper from '@mui/material/Paper' +import { useState } from 'react' +import styled from 'styled-components' +import ClearIcon from '~/components/Icons/ClearIcon' +import SearchIcon from '~/components/Icons/SearchIcon' +import { useTopicsStore } from '~/stores/useTopicsStore' + +export const Search = () => { + const [filters, setFilters] = useTopicsStore((s) => [s.filters, s.setFilters]) + const [inputValue, setInputValue] = useState('') + + const handleSearch = () => setFilters({ search: inputValue }) + + const resetSearch = () => { + setInputValue('') + + if (filters.search) { + setFilters({ search: '' }) + } + } + + return ( + + setInputValue(e.target.value)} + placeholder="Search" + size="small" + sx={{ ml: 1, flex: 1 }} + value={inputValue} + /> + {inputValue && ( + <> + + + + + + )} + + + + + ) +} + +const StyledButton = styled(IconButton)` + font-size: 24px; +` diff --git a/src/components/SourcesTableModal/SourcesView/Topics/Filter/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/Sort/index.tsx similarity index 100% rename from src/components/SourcesTableModal/SourcesView/Topics/Filter/index.tsx rename to src/components/SourcesTableModal/SourcesView/Topics/Sort/index.tsx diff --git a/src/components/SourcesTableModal/SourcesView/Topics/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/index.tsx index 968c2c818..ddb6b7e64 100644 --- a/src/components/SourcesTableModal/SourcesView/Topics/index.tsx +++ b/src/components/SourcesTableModal/SourcesView/Topics/index.tsx @@ -10,7 +10,8 @@ import { Topic } from '~/types' import { colors } from '~/utils/colors' import { Heading } from '../common' import { EditTopicModal } from './EditTopicModal' -import { Filter } from './Filter' +import { Search } from './Search' +import { Filter } from './Sort' import Table from './Table' export const TopicSources = () => { @@ -79,15 +80,16 @@ export const TopicSources = () => { return ( <> - + Topics - - - + + + +