diff --git a/public/images/clear.svg b/public/images/clear.svg
new file mode 100644
index 00000000..b86003e5
--- /dev/null
+++ b/public/images/clear.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx
index 741002bb..ee818e92 100644
--- a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx
+++ b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx
@@ -1,4 +1,4 @@
-import type { BaseSyntheticEvent } from 'react'
+import type { BaseSyntheticEvent, MouseEvent } from 'react'
import { useEffect, useState } from 'react'
import find from 'lodash/find'
@@ -60,10 +60,16 @@ export const useTournamentFilter = () => {
close()
}
+ const onResetSelectedTournament = (e: MouseEvent) => {
+ e.stopPropagation()
+ setSelectedTournamentId(null)
+ }
+
return {
close,
handleScroll,
isOpen,
+ onResetSelectedTournament,
onTournamentSelect,
open,
selectedTournament,
diff --git a/src/features/HeaderFilters/components/TournamentFilter/index.tsx b/src/features/HeaderFilters/components/TournamentFilter/index.tsx
index 8a2724a2..3cc9b758 100644
--- a/src/features/HeaderFilters/components/TournamentFilter/index.tsx
+++ b/src/features/HeaderFilters/components/TournamentFilter/index.tsx
@@ -11,6 +11,7 @@ import {
DropdownButton,
ButtonTitle,
Arrows,
+ ClearButton,
} from './styled'
export const TournamentFilter = () => {
@@ -18,6 +19,7 @@ export const TournamentFilter = () => {
close,
handleScroll,
isOpen,
+ onResetSelectedTournament,
onTournamentSelect,
open,
selectedTournament,
@@ -38,6 +40,11 @@ export const TournamentFilter = () => {
:
}
+ {
+ selectedTournament && (
+
+ )
+ }
{
diff --git a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
index d44a60f4..6fcffdd0 100644
--- a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
@@ -22,6 +22,7 @@ export const DropdownButton = styled.button`
position: relative;
height: 100%;
width: 100%;
+ padding-right: 45px;
outline: none;
border: none;
display: flex;
@@ -52,7 +53,7 @@ export const DropdownButton = styled.button`
export const ButtonTitle = styled.span`
display: inline-block;
- width: 80%;
+ flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -86,3 +87,16 @@ export const Wrapper = styled.div`
border-bottom-right-radius: 2px;
}
`
+
+export const ClearButton = styled.button`
+ outline: none;
+ border: none;
+ cursor: pointer;
+ width: 10px;
+ height: 10px;
+ margin-left: 10px;
+ background-color: transparent;
+ background-image: url(/images/clear.svg);
+ background-position: center;
+ background-repeat: no-repeat;
+`