algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-30 13:43:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

[question][ui] integrate backend voting (#355)

Browse Source 
Co-authored-by: wlren <weilinwork99@gmail.com>
This commit is contained in:
Jeff Sieu
2022-10-10 22:23:58 +08:00
committed by GitHub
parent 7052e8c175
commit 50d3386592
25 changed files with 639 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/portal/src/components/questions/QuestionSearchBar.tsx
View File

@ -1,5 +1,8 @@
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { Select, TextInput } from '@tih/ui';
import {
AdjustmentsHorizontalIcon,
MagnifyingGlassIcon,
} from '@heroicons/react/24/outline';
import { Button, Select, TextInput } from '@tih/ui';
export type SortOption = {
label: string;
@ -7,6 +10,7 @@ export type SortOption = {
};
export type QuestionSearchBarProps<SortOptions extends Array<SortOption>> = {
onFilterOptionsToggle: () => void;
onSortChange?: (sortValue: SortOptions[number]['value']) => void;
sortOptions: SortOptions;
sortValue: SortOptions[number]['value'];
@ -18,10 +22,11 @@ export default function QuestionSearchBar<
onSortChange,
sortOptions,
sortValue,
onFilterOptionsToggle,
}: QuestionSearchBarProps<SortOptions>) {
return (
<div className="flex items-center gap-2">
<div className="flex-1 pt-1">
<div className="flex items-center gap-4">
<div className="flex-1">
<TextInput
isLabelHidden={true}
label="Search by content"
@ -30,16 +35,28 @@ export default function QuestionSearchBar<
startAddOnType="icon"
/>
</div>
<span aria-hidden={true} className="pl-3 pr-1 pt-1 text-sm">
Sort by:
</span>
<Select
display="inline"
isLabelHidden={true}
label="Sort by"
options={sortOptions}
value={sortValue}
onChange={onSortChange}></Select>
<div className="flex items-center gap-2">
<span aria-hidden={true} className="align-middle text-sm font-medium">
Sort by:
</span>
<Select
display="inline"
isLabelHidden={true}
label="Sort by"
options={sortOptions}
value={sortValue}
onChange={onSortChange}
/>
</div>
<div className="lg:hidden">
<Button
addonPosition="start"
icon={AdjustmentsHorizontalIcon}
label="Filter options"
variant="tertiary"
onClick={onFilterOptionsToggle}
/>
</div>
</div>
);
}