Create custom filter type component

Author: buberdds

src/app/components/ConsensusEvents/ConsensusEventTypeFilter.tsx

@@ -1,13 +1,12 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Select } from '@oasisprotocol/ui-library/src/components/select'
-import Typography from '@mui/material/Typography'
 import { ConsensusEventType, Layer } from '../../../oasis-nexus/api'
 import { ConsensusEventFilteringType } from '../../hooks/useCommonParams'
 import { TFunction } from 'i18next'
 import { paraTimesConfig } from '../../../config'
 import { ParamSetterFunction } from '../../hooks/useTypedSearchParam'
 import { getConsensusEventTypeLabel } from './ConsensusEventDetails'
+import { FilterByType } from '../FilterByType'
 
 type Option = {
   value: ConsensusEventFilteringType
@@ -26,24 +25,6 @@ const getConsensusEventTypeOptions = (t: TFunction, layer: Layer) => {
     )
 }
 
-const FilterLabel: FC = () => {
-  const { t } = useTranslation()
-  return (
-    <Typography
-      component={'span'}
-      sx={{
-        fontStyle: 'normal',
-        fontWeight: 700,
-        fontSize: 16,
-        lineHeight: '150%',
-        marginRight: 4,
-      }}
-    >
-      {t('event.filterByType')}
-    </Typography>
-  )
-}
-
 export const ConsensusEventTypeFilter: FC<{
   layer: Layer
   value: ConsensusEventFilteringType
@@ -57,5 +38,5 @@ export const ConsensusEventTypeFilter: FC<{
     ? [...defaultOptions, ...customOptions]
     : [...defaultOptions, ...getConsensusEventTypeOptions(t, layer)]
 
-  return <Select options={options} value={value} handleChange={setValue} />
+  return <FilterByType options={options} value={value} handleChange={setValue} />
 }

src/app/components/FilterByType/index.tsx

@@ -0,0 +1,20 @@
+import { Select, SelectOption } from '@oasisprotocol/ui-library/src/components/select'
+
+type FilterByTypeProps<T extends string = string> = {
+  options: SelectOption<T>[]
+  handleChange?: (value: T) => void
+  value: T
+}
+
+export const FilterByType = <T extends string = string>({
+  handleChange,
+  options,
+  value,
+}: FilterByTypeProps<T>) => {
+  return (
+    <div className="flex gap-2 items-center">
+      <div className="text-muted-foreground text-sm font-medium">Filter by type</div>
+      <Select className="min-w-[150px]" options={options} value={value} handleChange={handleChange} />
+    </div>
+  )
+}

src/app/components/RuntimeEvents/RuntimeEventTypeFilter.tsx

@@ -1,12 +1,11 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Select } from '@oasisprotocol/ui-library/src/components/select'
-import Typography from '@mui/material/Typography'
 import { Layer, RuntimeEventType } from '../../../oasis-nexus/api'
 import { RuntimeEventFilteringType } from '../../hooks/useCommonParams'
 import { TFunction } from 'i18next'
 import { paraTimesConfig } from '../../../config'
 import { getRuntimeEventMethodLabel } from './RuntimeEventDetails'
+import { FilterByType } from '../FilterByType'
 
 type RuntimeEventTypeFilterOption = { value: RuntimeEventFilteringType; label: string }
 
@@ -22,24 +21,6 @@ const getRuntimeEventTypeOptions = (t: TFunction, layer: Layer) => {
     )
 }
 
-const FilterLabel: FC = () => {
-  const { t } = useTranslation()
-  return (
-    <Typography
-      component={'span'}
-      sx={{
-        fontStyle: 'normal',
-        fontWeight: 700,
-        fontSize: 16,
-        lineHeight: '150%',
-        marginRight: 4,
-      }}
-    >
-      {t('event.filterByType')}
-    </Typography>
-  )
-}
-
 export const RuntimeEventTypeFilter: FC<{
   layer: Layer
   value: RuntimeEventFilteringType
@@ -56,5 +37,5 @@ export const RuntimeEventTypeFilter: FC<{
     ? [...defaultOptions, ...customOptions]
     : [...defaultOptions, ...getRuntimeEventTypeOptions(t, layer)]
 
-  return <Select options={options} value={value} handleChange={setValue} />
+  return <FilterByType options={options} value={value} handleChange={setValue} />
 }

src/app/components/Transactions/ConsensusTransactionMethodFilter.tsx

@@ -1,27 +1,8 @@
 import { FC } from 'react'
 import { getConsensusTxMethodOptions, ConsensusTxMethodFilterOption } from '../ConsensusTransactionMethod'
 import { useTranslation } from 'react-i18next'
-import { Select } from '@oasisprotocol/ui-library/src/components/select'
-import Typography from '@mui/material/Typography'
 import { ParamSetterFunction } from '../../hooks/useTypedSearchParam'
-
-const FilterLabel: FC = () => {
-  const { t } = useTranslation()
-  return (
-    <Typography
-      component={'span'}
-      sx={{
-        fontStyle: 'normal',
-        fontWeight: 700,
-        fontSize: 16,
-        lineHeight: '150%',
-        marginRight: 4,
-      }}
-    >
-      {t('transactions.filterByMethod')}
-    </Typography>
-  )
-}
+import { FilterByType } from '../FilterByType'
 
 export const ConsensusTransactionMethodFilter: FC<{
   value: ConsensusTxMethodFilterOption
@@ -30,7 +11,7 @@ export const ConsensusTransactionMethodFilter: FC<{
 }> = ({ value, setValue, expand }) => {
   const { t } = useTranslation()
   return (
-    <Select
+    <FilterByType
       options={[{ value: 'any', label: 'Any' }, ...getConsensusTxMethodOptions(t)]}
       value={value}
       handleChange={setValue}

src/app/components/Transactions/RuntimeTransactionMethodFilter.tsx

@@ -1,29 +1,10 @@
 import { FC } from 'react'
 import { getRuntimeTxMethodOptions, RuntimeTxMethodFilterOption } from '../RuntimeTransactionMethod'
 import { useTranslation } from 'react-i18next'
-import { Select } from '@oasisprotocol/ui-library/src/components/select'
-import Typography from '@mui/material/Typography'
 import { Layer } from '../../../oasis-nexus/api'
 import { ParamSetterFunction } from '../../hooks/useTypedSearchParam'
 import { RuntimeTxMethodFilteringType } from '../../hooks/useCommonParams'
-
-const FilterLabel: FC = () => {
-  const { t } = useTranslation()
-  return (
-    <Typography
-      component={'span'}
-      sx={{
-        fontStyle: 'normal',
-        fontWeight: 700,
-        fontSize: 16,
-        lineHeight: '150%',
-        marginRight: 4,
-      }}
-    >
-      {t('transactions.filterByMethod')}
-    </Typography>
-  )
-}
+import { FilterByType } from '../FilterByType'
 
 export const RuntimeTransactionMethodFilter: FC<{
   layer: Layer
@@ -38,5 +19,5 @@ export const RuntimeTransactionMethodFilter: FC<{
     ? [...defaultOptions, ...customOptions]
     : [...defaultOptions, ...getRuntimeTxMethodOptions(t, layer)]
 
-  return <Select options={options} value={value} handleChange={setValue} />
+  return <FilterByType options={options} value={value} handleChange={setValue} />
 }