feat: replace filters with pickers

src/components/Jobs/JobList.tsx

@@ -28,12 +28,8 @@ const JobList = ({
 
   return (
     <CustomBox marginTop={marginTop} marginBottom={marginBottom}>
-      {Object.entries(jobs)
+      {Object.entries(jobs).map(([businessUnit, jobList]) => (
-        .filter(([businessUnit, _]) =>
+        <Container id={businessUnit} key={businessUnit + '-jobs'}>
-          !activeBUs?.length ? true : activeBUs.includes(businessUnit),
-        )
-        .map(([businessUnit, jobList]) => (
-          <Container key={businessUnit + '-jobs'}>
           <TitleContainer>
             <Title>{title ?? businessUnit}</Title>
           </TitleContainer>
@@ -58,6 +54,7 @@ const Container = styled.div`
   width: 100%;
   justify-content: space-between;
   border-top: 1px solid rgba(0, 0, 0, 0.18);
+  scroll-margin-top: 24px;
 
   @media (max-width: ${breakpoints.md}px) {
     margin-top: 60px;

src/components/Jobs/JobPicker.tsx

@@ -1,5 +1,6 @@
 import { breakpoints, uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import Link from 'next/link'
 import { calculatElementCount } from '../../../utils/count'
 import { FilterTitle } from '../Filter'
 import { Tag } from '../Tag'
@@ -15,7 +16,7 @@ type Props = {
   setActiveBUs: React.Dispatch<React.SetStateAction<string[]>>
 }
 
-const JobFilter = ({ data, activeBUs, setActiveBUs }: Props) => {
+const JobPicker = ({ data, activeBUs, setActiveBUs }: Props) => {
   if (data == null) {
     return <div>Something went wrong</div>
   }
@@ -26,7 +27,7 @@ const JobFilter = ({ data, activeBUs, setActiveBUs }: Props) => {
     if (activeBUs.includes(bu)) {
       setActiveBUs((prevBUs) => prevBUs.filter((item) => item !== bu))
     } else {
-      setActiveBUs((prevBUs) => [...prevBUs, bu])
+      setActiveBUs([bu])
     }
   }
 
@@ -35,18 +36,21 @@ const JobFilter = ({ data, activeBUs, setActiveBUs }: Props) => {
       <FilterTitle title="Open Vacancies" length={calculatElementCount(data)} />
       <Border />
       <BUs>
+        <CustomLink href="/jobs">
           <Tag active={activeBUs.length === 0} onClick={() => setActiveBUs([])}>
             All Jobs
           </Tag>
+        </CustomLink>
         {businessUnits?.length
           ? businessUnits.map((bu: string) => (
+              <CustomLink key={bu + '-tag'} href={`#${bu}`}>
                 <Tag
                   active={activeBUs.includes(bu)}
-                key={bu + '-tag'}
                   onClick={() => toggleBU(bu)}
                 >
                   {bu}
                 </Tag>
+              </CustomLink>
             ))
           : null}
       </BUs>
@@ -92,4 +96,8 @@ const Border = styled.hr`
   margin: 0;
 `
 
-export default JobFilter
+const CustomLink = styled(Link)`
+  text-decoration: none;
+`
+
+export default JobPicker

src/components/Jobs/index.ts

@@ -1,3 +1,3 @@
-export { default as JobFilter } from './JobFilter'
 export { default as JobItem } from './JobItem'
 export { default as JobList } from './JobList'
+export { default as JobPicker } from './JobPicker'

src/components/Services/ServiceList.tsx

@@ -1,5 +1,6 @@
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import { toBuInUrl } from '../../../utils/bu'
 import ServiceItem, { ServiceType } from './ServiceItem' // adjust path accordingly
 
 type Props = {
@@ -17,7 +18,7 @@ const ServiceList = ({ services, activeServices }: Props) => {
       !activeServices?.length ? true : activeServices.includes(service.title),
     )
     .map((service, idx) => (
-      <Container key={idx + '-services'}>
+      <Container id={toBuInUrl(service.title)} key={idx + '-services'}>
         <TitleContainer>
           <Title>{service.title}</Title>
         </TitleContainer>
@@ -33,6 +34,7 @@ const Container = styled.div`
   width: 100%;
   justify-content: space-between;
   border-top: 1px solid rgba(0, 0, 0, 0.18);
+  scroll-margin-top: 24px;
 
   @media (max-width: ${breakpoints.md}px) {
     margin-top: 60px;

src/components/Services/ServicePicker.tsx

@@ -1,5 +1,7 @@
 import { breakpoints, uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import Link from 'next/link'
+import { toBuInUrl } from '../../../utils/bu'
 import { FilterTitle } from '../Filter'
 import { Tag } from '../Tag'
 import { ServiceType } from './ServiceItem'
@@ -10,7 +12,7 @@ type Props = {
   setActiveServices: React.Dispatch<React.SetStateAction<string[]>>
 }
 
-const ServiceFilter = ({
+const ServicePicker = ({
   services,
   activeServices,
   setActiveServices,
@@ -25,10 +27,7 @@ const ServiceFilter = ({
         prevServicesContainer.filter((item) => item !== service),
       )
     } else {
-      setActiveServices((prevServicesContainer) => [
+      setActiveServices([service])
-        ...prevServicesContainer,
-        service,
-      ])
     }
   }
 
@@ -39,13 +38,17 @@ const ServiceFilter = ({
       <ServicesContainer>
         {services?.length
           ? services.map((service) => (
+              <CustomLink
+                key={service.title + '-tag'}
+                href={`#${toBuInUrl(service.title)}`}
+              >
                 <Tag
                   active={activeServices.includes(service.title)}
-                key={service.title + '-tag'}
                   onClick={() => toggleService(service.title)}
                 >
                   {service.title}
                 </Tag>
+              </CustomLink>
             ))
           : null}
       </ServicesContainer>
@@ -95,4 +98,8 @@ const Border = styled.hr`
   margin: 0;
 `
 
-export default ServiceFilter
+const CustomLink = styled(Link)`
+  text-decoration: none;
+`
+
+export default ServicePicker

src/components/Services/index.ts

@@ -1,3 +1,3 @@
-export { default as ServiceFilter } from './ServiceFilter'
 export { default as ServiceItem } from './ServiceItem'
 export { default as ServiceList } from './ServiceList'
+export { default as ServicePicker } from './ServicePicker'

src/pages/jobs.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@/components/Box'
-import { JobFilter, JobList } from '@/components/Jobs'
+import { JobList, JobPicker } from '@/components/Jobs'
 import { SEO } from '@/components/SEO'
 import { breakpoints } from '@/configs/ui.configs'
 import { SubPageLayout } from '@/layouts/SubPageLayout'
@@ -21,7 +21,7 @@ const Page = ({ jobs }: any) => {
       <SEO />
       <div>
         <CustomBox marginBottom="180px">
-          <JobFilter
+          <JobPicker
             data={jobs}
             activeBUs={activeBUs}
             setActiveBUs={setActiveBUs}

src/pages/services.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@/components/Box'
 import { SEO } from '@/components/SEO'
-import { ServiceFilter, ServiceList } from '@/components/Services'
+import { ServiceList, ServicePicker } from '@/components/Services'
 import ServiceContact from '@/components/Services/ServiceContact'
 import { ServiceType } from '@/components/Services/ServiceItem'
 import { breakpoints } from '@/configs/ui.configs'
@@ -22,7 +22,7 @@ const Page = ({ services }: any) => {
       <SEO />
       <div>
         <CustomBox marginBottom="180px">
-          <ServiceFilter
+          <ServicePicker
             services={services}
             activeServices={activeServices}
             setActiveServices={setActiveServices}

utils/bu.ts

@@ -20,3 +20,12 @@ export const businessUnitMark = (businessUnit: string) => {
       return ''
   }
 }
+
+export function toBuInUrl(bu: string) {
+  return bu
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+}