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
-
-
-
+
+
+
+