From 5a1c01d8cbfa2c159f9c1135c8c103323c1b65c5 Mon Sep 17 00:00:00 2001 From: Su Yin <53945359+tnsyn@users.noreply.github.com> Date: Fri, 7 Oct 2022 16:24:29 +0800 Subject: [PATCH] [resumes][feat] Add missing browse page UI (#319) * [resumes][chore] Edit TODO comment * [resumes][fix] Make sort dropdown bg white * [resumes][feat] Add missing browse page UI and cleanup --- .../resumes/browse/BrowsePageBody.tsx | 409 +++++++----------- 1 file changed, 156 insertions(+), 253 deletions(-) diff --git a/apps/portal/src/components/resumes/browse/BrowsePageBody.tsx b/apps/portal/src/components/resumes/browse/BrowsePageBody.tsx index 3fa7054f..85152270 100644 --- a/apps/portal/src/components/resumes/browse/BrowsePageBody.tsx +++ b/apps/portal/src/components/resumes/browse/BrowsePageBody.tsx @@ -1,13 +1,12 @@ import { Fragment, useState } from 'react'; -import { Dialog, Disclosure, Menu, Transition } from '@headlessui/react'; +import { Disclosure, Menu, Transition } from '@headlessui/react'; import { ChevronDownIcon, - FunnelIcon, MinusIcon, PlusIcon, } from '@heroicons/react/20/solid'; -import { XMarkIcon } from '@heroicons/react/24/outline'; -import { Tabs } from '@tih/ui'; +import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; +import { Tabs, TextInput } from '@tih/ui'; import BrowseListItem from './BrowseListItem'; import { @@ -43,202 +42,17 @@ function classNames(...classes: Array) { } export default function BrowsePageBody() { - const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false); const [tabsValue, setTabsValue] = useState('all'); + const [searchValue, setSearchValue] = useState(''); return (
-
- {/* Mobile filter dialog */} - - - -
- - -
- - -
-

- Filters -

- -
- - {/* Filters */} -
-

Categories

- - - {filters.map((section) => ( - - {({ open }) => ( - <> -

- - - {section.name} - - - {open ? ( - - -

- -
- {section.options.map((option, optionIdx) => ( -
- - -
- ))} -
-
- - )} -
- ))} -
-
-
-
-
-
- -
-
-
- {/* Filters */} -
-

Categories

-

Filters

-
    - {TOP_HITS.map((category) => ( -
  • - {/* TODO: Replace onSelect with filtering function */} - true} /> -
  • - ))} -
- - {filters.map((section) => ( - - {({ open }) => ( - <> -

- - - {section.name} - - - {open ? ( - - -

- -
- {section.options.map((option, optionIdx) => ( -
- - -
- ))} -
-
- - )} -
- ))} -
-
-
+
+
+

Filters

+
+
+
+
-
    - {TEST_RESUMES.map((resumeObj) => ( -
  • - -
  • - ))} -
+
+
+ + +
+
+ +
+ + Sort + +
- -
- - Sort - -
- - - -
- {SORT_OPTIONS.map((option) => ( - - {({ active }) => ( - - {option.name} - - )} - - ))} -
-
-
-
-
+ + +
+ {SORT_OPTIONS.map((option) => ( + + {({ active }) => ( + + {option.name} + + )} + + ))} +
+
+
+
+
+
-
+
+
+ +
+
+
+
+

Categories

+
    + {TOP_HITS.map((category) => ( +
  • + {/* TODO: Replace onClick with filtering function */} + true} /> +
  • + ))} +
+ + {filters.map((section) => ( + + {({ open }) => ( + <> +

+ + + {section.name} + + + {open ? ( + + +

+ +
+ {section.options.map((option, optionIdx) => ( +
+ + +
+ ))} +
+
+ + )} +
+ ))} +
+
+
+
+
    + {TEST_RESUMES.map((resumeObj) => ( +
  • + +
  • + ))} +
+
);