Skip to content

Commit c0d2f3d

Browse files
MikadowsMikadows
committed
fix: label
1 parent 663ded2 commit c0d2f3d

File tree

1 file changed

+95
-91
lines changed

1 file changed

+95
-91
lines changed

‎src/components/leaderboard/Leaderboard.tsx

Lines changed: 95 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { DateTime } from 'luxon';
22
import React, { Fragment, useState } from 'react';
33
import Gravatar from 'react-gravatar';
4+
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
45
import { useLeaderboardList } from '../../hooks/leaderboard';
56
import { Listbox, Transition } from '@headlessui/react';
6-
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
77

88
function classNames(...classes: string[]) {
99
return classes.filter(Boolean).join(' ');
@@ -47,99 +47,103 @@ const Leaderboard: React.FC<LeaderboardProps> = ({ benchmarkId }) => {
4747
let rankCounter = 1;
4848

4949
return (
50-
<>
50+
<div className="mt-3 ml-2">
5151
<div className="flex justify-between">
52-
<h1 className="text-2xl pb-3 mt-3 ml-2">Leaderboard</h1>
53-
<Listbox value={selected} onChange={setSelected}>
54-
{({ open }) => (
55-
<>
56-
<Listbox.Label className="block text-sm font-medium text-gray-700">
57-
Languages
58-
</Listbox.Label>
59-
<div className="mt-1 relative">
60-
<Listbox.Button className="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
61-
<span className="flex items-center">
62-
<img
63-
src={selected.avatar}
64-
alt=""
65-
className="flex-shrink-0 h-6 w-6 rounded-full"
66-
/>
67-
<span className="ml-3 block truncate">{selected.name}</span>
68-
</span>
69-
<span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
70-
<SelectorIcon
71-
className="h-5 w-5 text-gray-400"
72-
aria-hidden="true"
73-
/>
74-
</span>
75-
</Listbox.Button>
52+
<h1 className="text-2xl pb-3 ">Leaderboard</h1>
53+
<div>
54+
<Listbox value={selected} onChange={setSelected}>
55+
{({ open }) => (
56+
<>
57+
{/*<Listbox.Label className="block text-sm font-medium text-gray-700">*/}
58+
{/* Languages filter*/}
59+
{/*</Listbox.Label>*/}
60+
<div className="mt-1 relative">
61+
<Listbox.Button className="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
62+
<span className="flex items-center">
63+
<img
64+
src={selected.avatar}
65+
alt=""
66+
className="flex-shrink-0 h-6 w-6 rounded-full"
67+
/>
68+
<span className="ml-3 block truncate">
69+
{selected.name}
70+
</span>
71+
</span>
72+
<span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
73+
<SelectorIcon
74+
className="h-5 w-5 text-gray-400"
75+
aria-hidden="true"
76+
/>
77+
</span>
78+
</Listbox.Button>
7679

77-
<Transition
78-
show={open}
79-
as={Fragment}
80-
leave="transition ease-in duration-100"
81-
leaveFrom="opacity-100"
82-
leaveTo="opacity-0"
83-
>
84-
<Listbox.Options
85-
static
86-
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
80+
<Transition
81+
show={open}
82+
as={Fragment}
83+
leave="transition ease-in duration-100"
84+
leaveFrom="opacity-100"
85+
leaveTo="opacity-0"
8786
>
88-
{languages.map((language) => (
89-
<Listbox.Option
90-
key={language.id}
91-
className={({ active }) =>
92-
classNames(
93-
active
94-
? 'text-white bg-indigo-600'
95-
: 'text-gray-900',
96-
'cursor-default select-none relative py-2 pl-3 pr-9',
97-
)
98-
}
99-
value={language}
100-
>
101-
{({ selected, active }) => (
102-
<>
103-
<div className="flex items-center">
104-
<img
105-
src={language.avatar}
106-
alt=""
107-
className="flex-shrink-0 h-6 w-6 rounded-full"
108-
/>
109-
<span
110-
className={
111-
selected
112-
? 'font-semibold'
113-
: 'font-normal ml-3 block truncate'
114-
}
115-
>
116-
{language.name}
117-
</span>
118-
</div>
119-
120-
{selected ? (
121-
<span
122-
className={classNames(
123-
active ? 'text-white' : 'text-indigo-600',
124-
'absolute inset-y-0 right-0 flex items-center pr-4',
125-
)}
126-
>
127-
<CheckIcon
128-
className="h-5 w-5"
129-
aria-hidden="true"
87+
<Listbox.Options
88+
static
89+
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
90+
>
91+
{languages.map((language) => (
92+
<Listbox.Option
93+
key={language.id}
94+
className={({ active }) =>
95+
classNames(
96+
active
97+
? 'text-white bg-indigo-600'
98+
: 'text-gray-900',
99+
'cursor-default select-none relative py-2 pl-3 pr-9',
100+
)
101+
}
102+
value={language}
103+
>
104+
{({ selected, active }) => (
105+
<>
106+
<div className="flex items-center">
107+
<img
108+
src={language.avatar}
109+
alt=""
110+
className="flex-shrink-0 h-6 w-6 rounded-full"
130111
/>
131-
</span>
132-
) : null}
133-
</>
134-
)}
135-
</Listbox.Option>
136-
))}
137-
</Listbox.Options>
138-
</Transition>
139-
</div>
140-
</>
141-
)}
142-
</Listbox>
112+
<span
113+
className={
114+
selected
115+
? 'font-semibold'
116+
: 'font-normal ml-3 block truncate'
117+
}
118+
>
119+
{language.name}
120+
</span>
121+
</div>
122+
123+
{selected ? (
124+
<span
125+
className={classNames(
126+
active ? 'text-white' : 'text-indigo-600',
127+
'absolute inset-y-0 right-0 flex items-center pr-4',
128+
)}
129+
>
130+
<CheckIcon
131+
className="h-5 w-5"
132+
aria-hidden="true"
133+
/>
134+
</span>
135+
) : null}
136+
</>
137+
)}
138+
</Listbox.Option>
139+
))}
140+
</Listbox.Options>
141+
</Transition>
142+
</div>
143+
</>
144+
)}
145+
</Listbox>
146+
</div>
143147
</div>
144148
<div className="ml-2 flex flex-col h-80 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
145149
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
@@ -239,7 +243,7 @@ const Leaderboard: React.FC<LeaderboardProps> = ({ benchmarkId }) => {
239243
</div>
240244
</div>
241245
</div>
242-
</>
246+
</div>
243247
);
244248
};
245249

0 commit comments

Comments
 (0)