-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat:added customizable filter button
- Loading branch information
Showing
8 changed files
with
148 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
.../components/advanced-components/extension-marketplace/buttons/filter-button.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Filter, ChevronDown } from 'lucide-react'; | ||
| import { forwardRef } from 'react'; | ||
| import { Button } from '@/components/shadcn-ui/button'; | ||
|
|
||
| /** | ||
| * The FilterButton component is a button designed for initiating filtering of data. It includes | ||
| * dropdown visuals for active filtering and idle states. it uses forwardRef to pass the button to the | ||
| * dropdown trigger asChild. | ||
| * | ||
| * @returns A button that can be used to filter. | ||
| */ | ||
| const FilterButton = forwardRef<HTMLButtonElement>((props, ref) => { | ||
| return ( | ||
| <Button | ||
| ref={ref} | ||
| className="pr-rounded-md pr-border pr-border-dashed pr-border-gray-400 pr-bg-white pr-px-4 pr-py-2 pr-text-black pr-transition pr-duration-300 pr-ease-in-out hover:pr-text-white" | ||
| {...props} | ||
| > | ||
| <Filter size={16} className="pr-mr-2 pr-h-4 pr-w-4 pr-text-gray-700" /> | ||
| Filter | ||
| <ChevronDown size={16} className="pr-ml-2 pr-h-4 pr-w-4 pr-text-gray-700" /> | ||
| </Button> | ||
| ); | ||
| }); | ||
|
|
||
| export default FilterButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
...ct/src/components/advanced-components/extension-marketplace/filter-dropdown.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuTrigger, | ||
| DropdownMenuContent, | ||
| DropdownMenuLabel, | ||
| DropdownMenuGroup, | ||
| DropdownMenuCheckboxItem, | ||
| DropdownMenuRadioItem, | ||
| DropdownMenuSeparator, | ||
| } from '@/components/shadcn-ui/dropdown-menu'; | ||
| import FilterButton from './buttons/filter-button.component'; | ||
|
|
||
| interface DropdownItem { | ||
| /** | ||
| * The label is the text that will be displayed on the dropdown item. | ||
| */ | ||
| label: string; | ||
| /** | ||
| * The checkbox boolean value determines if the item is a checkbox or radio | ||
| * item. | ||
| */ | ||
| checkbox: boolean; | ||
| /** | ||
| * The onClick function is called when the item is clicked. | ||
| */ | ||
| onClick: () => void; | ||
| } | ||
|
|
||
| interface DropdownGroup { | ||
| /** | ||
| * The label is the text that will be displayed on the dropdown group. | ||
| * It is used to categorize the items in the group. | ||
| */ | ||
| label: string; | ||
| /** | ||
| * The items array contains the items that will be displayed in the dropdown | ||
| * group | ||
| */ | ||
| items: DropdownItem[]; | ||
| } | ||
|
|
||
| interface FilterDropdownProps { | ||
| /** | ||
| * The groups array contains the groups that will be displayed in the | ||
| * dropdown | ||
| */ | ||
| groups: DropdownGroup[]; | ||
| } | ||
|
|
||
| /** | ||
| * The FilterDropdown component is a dropdown designed for filtering content. | ||
| * It includes groups of items that can be checkboxes or radio items. | ||
| * | ||
| * @param groups The groups array contains the groups that will be displayed in the dropdown | ||
| * @returns A filter dropdown. | ||
| */ | ||
| export default function FilterDropdown({ groups }: FilterDropdownProps) { | ||
| return ( | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <FilterButton /> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent> | ||
| {groups.map((group) => ( | ||
| <> | ||
| <DropdownMenuLabel>{group.label}</DropdownMenuLabel> | ||
| <DropdownMenuGroup> | ||
| {group.items.map((item) => ( | ||
| <div> | ||
| {item.checkbox ? ( | ||
| <DropdownMenuCheckboxItem onClick={item.onClick}> | ||
| {item.label} | ||
| </DropdownMenuCheckboxItem> | ||
| ) : ( | ||
| <DropdownMenuRadioItem onClick={item.onClick} value={item.label}> | ||
| {item.label} | ||
| </DropdownMenuRadioItem> | ||
| )} | ||
| </div> | ||
| ))} | ||
| </DropdownMenuGroup> | ||
| <DropdownMenuSeparator /> | ||
| </> | ||
| ))} | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters