[resumes][feat] add clear filter functionality

This commit is contained in:
Keane Chan
2022-10-28 10:11:58 +08:00
parent 9df6b52392
commit ea8db4f503
3 changed files with 28 additions and 17 deletions

View File

@ -1,4 +1,4 @@
import Link from 'next/link'; import { Button } from '@tih/ui';
import { Container } from './Container'; import { Container } from './Container';
@ -14,13 +14,12 @@ export function CallToAction() {
It's free! Take charge of your resume game by learning from the top It's free! Take charge of your resume game by learning from the top
engineers in the field. engineers in the field.
</p> </p>
<Link href="/resumes/browse"> <Button
<button className="mt-4"
className="bg-primary-500 mt-4 rounded-md py-2 px-3 text-sm font-medium text-white" href="/resumes/browse"
type="button"> label="Start browsing now"
Start browsing now variant="primary"
</button> />
</Link>
</div> </div>
</Container> </Container>
</section> </section>

View File

@ -1,4 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import { Button } from '@tih/ui';
import { Container } from './Container'; import { Container } from './Container';
@ -24,13 +25,12 @@ export function Hero() {
your fellow engineers your fellow engineers
</p> </p>
<div className="mt-10 flex justify-center gap-x-4"> <div className="mt-10 flex justify-center gap-x-4">
<Link href="/resumes/browse"> <Button
<button href="/resumes/browse"
className="bg-primary-500 rounded-md py-2 px-3 text-sm font-medium text-white" label="Start browsing now"
type="button"> variant="primary"
Start browsing now />
</button> {/* TODO: Update video */}
</Link>
<Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
<button <button
className="focus-visible:outline-primary-600 group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600" className="focus-visible:outline-primary-600 group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600"

View File

@ -285,6 +285,13 @@ export default function ResumeHomePage() {
} }
}; };
const onClearFilterClick = (filterSection: FilterId) => {
setUserFilters({
...userFilters,
[filterSection]: [],
});
};
const onShortcutChange = ({ const onShortcutChange = ({
sortOrder: shortcutSortOrder, sortOrder: shortcutSortOrder,
filters: shortcutFilters, filters: shortcutFilters,
@ -484,7 +491,7 @@ export default function ResumeHomePage() {
<Disclosure <Disclosure
key={filter.id} key={filter.id}
as="div" as="div"
className="border-b border-slate-200 py-6"> className="border-b border-slate-200 pt-6 pb-4">
{({ open }) => ( {({ open }) => (
<> <>
<h3 className="-my-3 flow-root"> <h3 className="-my-3 flow-root">
@ -507,7 +514,7 @@ export default function ResumeHomePage() {
</span> </span>
</Disclosure.Button> </Disclosure.Button>
</h3> </h3>
<Disclosure.Panel className="pt-4"> <Disclosure.Panel className="space-y-4 pt-4">
<CheckboxList <CheckboxList
description="" description=""
isLabelHidden={true} isLabelHidden={true}
@ -536,6 +543,11 @@ export default function ResumeHomePage() {
</div> </div>
))} ))}
</CheckboxList> </CheckboxList>
<p
className="cursor-pointer text-sm text-slate-500 underline"
onClick={() => onClearFilterClick(filter.id)}>
Clear
</p>
</Disclosure.Panel> </Disclosure.Panel>
</> </>
)} )}