65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { ErrorBoundary } from '@sentry/react';
|
|
import { CompetitionsHeader } from '../../components/competitions/competitions-header';
|
|
import { useRef, useState } from 'react';
|
|
import { useT } from '../../lib/use-t';
|
|
import { useTeams } from '../../lib/hooks/use-teams';
|
|
import { CompetitionsLeaderboard } from '../../components/competitions/competitions-leaderboard';
|
|
import {
|
|
Input,
|
|
Loader,
|
|
VegaIcon,
|
|
VegaIconNames,
|
|
} from '@vegaprotocol/ui-toolkit';
|
|
import { usePageTitle } from '../../lib/hooks/use-page-title';
|
|
|
|
export const CompetitionsTeams = () => {
|
|
const t = useT();
|
|
|
|
usePageTitle([t('Competitions'), t('Teams')]);
|
|
|
|
const { data: teamsData, loading: teamsLoading } = useTeams();
|
|
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const [filter, setFilter] = useState<string | null | undefined>(undefined);
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<CompetitionsHeader title={t('Join a team')}>
|
|
<p className="text-lg mb-1">{t('Choose a team to get involved')}</p>
|
|
</CompetitionsHeader>
|
|
|
|
<div className="mb-6 flex justify-end">
|
|
<div className="w-full md:w-60 h-10 relative">
|
|
<span className="absolute z-10 pointer-events-none opacity-90 top-[5px] left-[5px]">
|
|
<VegaIcon name={VegaIconNames.SEARCH} size={18} />
|
|
</span>
|
|
<Input
|
|
ref={inputRef}
|
|
className="opacity-90 text-right"
|
|
placeholder={t('Name')}
|
|
onKeyUp={() => {
|
|
const value = inputRef.current?.value;
|
|
if (value != filter) setFilter(value);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{teamsLoading ? (
|
|
<Loader size="small" />
|
|
) : (
|
|
<CompetitionsLeaderboard
|
|
data={teamsData.filter((td) => {
|
|
if (filter && filter.length > 0) {
|
|
const re = new RegExp(filter, 'i');
|
|
return re.test(td.name);
|
|
}
|
|
return true;
|
|
})}
|
|
/>
|
|
)}
|
|
</div>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|