From 723fe1516f1bd5b4bb9314db74901df9ba38a3f2 Mon Sep 17 00:00:00 2001 From: Shubham Bhat Date: Fri, 10 Jan 2025 12:49:48 +0530 Subject: [PATCH 01/14] added dynamic icons to the filter in tools page --- components/Sidebar.tsx | 36 ++++++++++++++++--- pages/tools/components/Sidebar.tsx | 41 ++++++++++++++-------- pages/tools/components/ui/DropdownMenu.tsx | 7 ++-- public/icons/dialect.svg | 1 + public/icons/environment.svg | 1 + public/icons/language.svg | 1 + public/icons/license.svg | 1 + public/icons/tooling.svg | 1 + 8 files changed, 69 insertions(+), 20 deletions(-) create mode 100644 public/icons/dialect.svg create mode 100644 public/icons/environment.svg create mode 100644 public/icons/language.svg create mode 100644 public/icons/license.svg create mode 100644 public/icons/tooling.svg diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 962d2412e..683c4dfa1 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -355,7 +355,14 @@ export const DocsNav = ({
@@ -498,7 +512,14 @@ export const DocsNav = ({
diff --git a/pages/tools/components/Sidebar.tsx b/pages/tools/components/Sidebar.tsx index 5a1c75717..f0a2696c6 100644 --- a/pages/tools/components/Sidebar.tsx +++ b/pages/tools/components/Sidebar.tsx @@ -1,12 +1,26 @@ import React, { Dispatch, SetStateAction, useRef } from 'react'; -import FilterIcon from '~/public/icons/filter.svg'; +import LanguageIcon from '~/public/icons/language.svg'; +import ToolingIcon from '~/public/icons/tooling.svg'; +import EnvironmentIcon from '~/public/icons/environment.svg'; +import DialectIcon from '~/public/icons/dialect.svg'; +import LicenseIcon from '~/public/icons/license.svg'; import DropdownMenu from './ui/DropdownMenu'; import Checkbox from './ui/Checkbox'; import SearchBar from './SearchBar'; +import FilterIcon from '~/public/icons/filter.svg'; import toTitleCase from '../lib/toTitleCase'; import type { Transform } from '../hooks/useToolsTransform'; import type { FilterCriteriaFields } from '../index.page'; import { postAnalytics } from '../lib/postAnalytics'; +import { useTheme } from 'next-themes'; + +const filterIcons = { + languages: LanguageIcon, + toolingTypes: ToolingIcon, + environments: EnvironmentIcon, + drafts: DialectIcon, + licenses: LicenseIcon, +}; interface SidebarProps { filterCriteria: Record; @@ -45,19 +59,11 @@ export default function Sidebar({ groupBy: prev.groupBy || 'toolingTypes', languages: formData.getAll('languages').map((value) => value as string), licenses: formData.getAll('licenses').map((value) => value as string), - drafts: formData - .getAll('drafts') - .map((value) => value) as Transform['drafts'], - toolingTypes: formData - .getAll('toolingTypes') - .map((value) => value as string), - environments: formData - .getAll('environments') - .map((value) => value as string), + drafts: formData.getAll('drafts').map((value) => value) as Transform['drafts'], + toolingTypes: formData.getAll('toolingTypes').map((value) => value as string), + environments: formData.getAll('environments').map((value) => value as string), showObsolete: - (formData.get('showObsolete') as string) === 'showObsolete' - ? 'true' - : 'false', + (formData.get('showObsolete') as string) === 'showObsolete' ? 'true' : 'false', } satisfies Transform; postAnalytics({ eventType: 'query', eventPayload: newTransform }); return newTransform; @@ -72,6 +78,7 @@ export default function Sidebar({ resetTransform(); setIsSidebarOpen((prev) => !prev); }; + const { resolvedTheme } = useTheme(); return (
@@ -79,8 +86,13 @@ export default function Sidebar({ {filters.map(({ label, accessorKey }) => { const checkedValues = transform[accessorKey as keyof Transform] || []; + const IconComponent = filterIcons[accessorKey as keyof typeof filterIcons]; return ( - }> + } + > {filterCriteria[accessorKey as FilterCriteriaFields] ?.map(String) .map((filterOption) => ( @@ -111,6 +123,7 @@ export default function Sidebar({ type='submit' className='bg-primary text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none' > + {/* */} Apply Filters
); -} +} \ No newline at end of file From bd07ca39ca5422630bb167b4a37c1d462b410878 Mon Sep 17 00:00:00 2001 From: Shubham Bhat Date: Sun, 26 Jan 2025 20:14:36 +0530 Subject: [PATCH 13/14] revert submodule changes --- _includes/community | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/community b/_includes/community index b81462a65..903010740 160000 --- a/_includes/community +++ b/_includes/community @@ -1 +1 @@ -Subproject commit b81462a65d1f9d4941edfa8a4eff8189c2ef1068 +Subproject commit 903010740745b96f9b21204c4b578bb77d84cb53 From c90a0a41d4d4a2f08d50e1c3d8e87e0b8bccf9b8 Mon Sep 17 00:00:00 2001 From: Shubham Bhat Date: Sun, 26 Jan 2025 20:36:21 +0530 Subject: [PATCH 14/14] fixed prettier errors --- components/Sidebar.tsx | 2 +- pages/tools/components/Sidebar.tsx | 25 +++++++++++++--------- pages/tools/components/ui/DropdownMenu.tsx | 2 +- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 18cf5e916..683c4dfa1 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -759,4 +759,4 @@ export const DocsNav = ({ }; export const getLayout = (page: React.ReactNode) => - getSiteLayout({page}); \ No newline at end of file + getSiteLayout({page}); diff --git a/pages/tools/components/Sidebar.tsx b/pages/tools/components/Sidebar.tsx index 373d41701..e53e78a8e 100644 --- a/pages/tools/components/Sidebar.tsx +++ b/pages/tools/components/Sidebar.tsx @@ -7,12 +7,10 @@ import LicenseIcon from '~/public/icons/license.svg'; import DropdownMenu from './ui/DropdownMenu'; import Checkbox from './ui/Checkbox'; import SearchBar from './SearchBar'; -import FilterIcon from '~/public/icons/filter.svg'; import toTitleCase from '../lib/toTitleCase'; import type { Transform } from '../hooks/useToolsTransform'; import type { FilterCriteriaFields } from '../index.page'; import { postAnalytics } from '../lib/postAnalytics'; -import { useTheme } from 'next-themes'; const filterIcons = { languages: LanguageIcon, @@ -59,11 +57,19 @@ export default function Sidebar({ groupBy: prev.groupBy || 'toolingTypes', languages: formData.getAll('languages').map((value) => value as string), licenses: formData.getAll('licenses').map((value) => value as string), - drafts: formData.getAll('drafts').map((value) => value) as Transform['drafts'], - toolingTypes: formData.getAll('toolingTypes').map((value) => value as string), - environments: formData.getAll('environments').map((value) => value as string), + drafts: formData + .getAll('drafts') + .map((value) => value) as Transform['drafts'], + toolingTypes: formData + .getAll('toolingTypes') + .map((value) => value as string), + environments: formData + .getAll('environments') + .map((value) => value as string), showObsolete: - (formData.get('showObsolete') as string) === 'showObsolete' ? 'true' : 'false', + (formData.get('showObsolete') as string) === 'showObsolete' + ? 'true' + : 'false', } satisfies Transform; postAnalytics({ eventType: 'query', eventPayload: newTransform }); return newTransform; @@ -78,7 +84,6 @@ export default function Sidebar({ resetTransform(); setIsSidebarOpen((prev) => !prev); }; - const { resolvedTheme } = useTheme(); return (
@@ -86,7 +91,8 @@ export default function Sidebar({ {filters.map(({ label, accessorKey }) => { const checkedValues = transform[accessorKey as keyof Transform] || []; - const IconComponent = filterIcons[accessorKey as keyof typeof filterIcons]; + const IconComponent = + filterIcons[accessorKey as keyof typeof filterIcons]; return ( - {/* */} Apply Filters
); -} \ No newline at end of file +} diff --git a/pages/tools/components/ui/DropdownMenu.tsx b/pages/tools/components/ui/DropdownMenu.tsx index 75176a14b..7352b179e 100644 --- a/pages/tools/components/ui/DropdownMenu.tsx +++ b/pages/tools/components/ui/DropdownMenu.tsx @@ -75,4 +75,4 @@ export default function DropdownMenu({
); -} \ No newline at end of file +}