diff --git a/apps/website/src/components/index.tsx b/apps/website/src/components/index.tsx index 096e0f20..2e50d9c0 100644 --- a/apps/website/src/components/index.tsx +++ b/apps/website/src/components/index.tsx @@ -1,2 +1,4 @@ export { Breadcrumbs } from './breadcrumbs/breadcrumbs' +export { EpicOverview } from './epic-overview' export { SideBar } from './side-bar/side-bar' +export { TableIssues } from './table-issues' diff --git a/apps/website/src/components/table-issues/filters/filter-author.tsx b/apps/website/src/components/table-issues/filters/filter-author.tsx new file mode 100644 index 00000000..c0c3ffc8 --- /dev/null +++ b/apps/website/src/components/table-issues/filters/filter-author.tsx @@ -0,0 +1,79 @@ +import { useState } from 'react' + +import { Avatar, Button, Input, Text } from '@status-im/components' +import { DropdownMenu } from '@status-im/components/src/dropdown-menu' +import { DropdownIcon, SearchIcon } from '@status-im/icons' + +type Props = { + authors: { + id: number + name: string + avatar?: string + }[] +} +const FilterAuthor = (props: Props) => { + const { authors } = props + + const [authorFilterText, setAuthorFilterText] = useState('') + const filteredAuthors = authors.filter(author => + author.name.toLowerCase().includes(authorFilterText.toLowerCase()) + ) + + const [selectedAuthors, setSelectedAuthors] = useState([]) + + return ( +
+ + + +
+ } + size={32} + value={authorFilterText} + onChangeText={setAuthorFilterText} + /> +
+ {filteredAuthors.map(author => ( + + } + label={author.name} + checked={selectedAuthors.includes(author.id)} + onSelect={() => { + if (selectedAuthors.includes(author.id)) { + setSelectedAuthors( + selectedAuthors.filter(id => id !== author.id) + ) + } else { + setSelectedAuthors([...selectedAuthors, author.id]) + } + }} + /> + ))} + {filteredAuthors.length === 0 && ( +
+ No authors found +
+ )} +
+
+
+ ) +} + +export { FilterAuthor } diff --git a/apps/website/src/components/table-issues/index.tsx b/apps/website/src/components/table-issues/index.tsx new file mode 100644 index 00000000..2a1b462d --- /dev/null +++ b/apps/website/src/components/table-issues/index.tsx @@ -0,0 +1 @@ +export { TableIssues } from './table-issues' diff --git a/apps/website/src/components/table-issues.tsx b/apps/website/src/components/table-issues/table-issues.tsx similarity index 71% rename from apps/website/src/components/table-issues.tsx rename to apps/website/src/components/table-issues/table-issues.tsx index 649a1b3a..e047a920 100644 --- a/apps/website/src/components/table-issues.tsx +++ b/apps/website/src/components/table-issues/table-issues.tsx @@ -1,10 +1,11 @@ import { useState } from 'react' -import { Avatar, Button, Input, Tag, Text } from '@status-im/components' -import { DropdownMenu } from '@status-im/components/src/dropdown-menu' -import { DropdownIcon, OpenIcon, SearchIcon } from '@status-im/icons' +import { Avatar, Button, Tag, Text } from '@status-im/components' +import { OpenIcon } from '@status-im/icons' import Link from 'next/link' +import { FilterAuthor } from './filters/filter-author' + const issues = [ { id: 5154, @@ -92,11 +93,6 @@ const authors = [ export const TableIssues = () => { const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open') - const [authorFilterText, setAuthorFilterText] = useState('') - const filteredAuthors = authors.filter(author => - author.name.toLowerCase().includes(authorFilterText.toLowerCase()) - ) - return (
@@ -123,48 +119,7 @@ export const TableIssues = () => {
-
- - - -
- } - size={32} - value={authorFilterText} - onChangeText={setAuthorFilterText} - /> -
- {filteredAuthors.map(author => ( - - } - label={author.name} - onSelect={() => alert('Author: ' + author.name)} - /> - ))} - {filteredAuthors.length === 0 && ( -
- No authors found -
- )} -
-
-
+