Merge pull request #400 from Dark-Matter-Labs/staging

Internal Link and refactoring

components/expertise-page/explination-text.js

@@ -0,0 +1,25 @@
+export default function ExplinationText({ selected }) {
+ return (
+ <div className='sm:py-6 sm:ml-3 mt-5 mb-4 global-margin sm:m-0'>
+ {selected === 'beleid' && (
+ <p className='p-base'>Vooral geïnteresseerd in het stimuleren van houtbouw via beleid?</p>
+ )}
+ {selected === 'inkoop' && (
+ <p className='p-base'>
+ Bekijk hoe je via tenders en aanbestedingen houtbouw kunt stimuleren.
+ </p>
+ )}
+ {selected === 'grondpositie' && (
+ <p className='p-base'>
+ Ben je als overheid grondeigenaar? Bekijk de mogelijkheden om houtbouw af te dwingen.
+ </p>
+ )}
+ {selected === 'subsidie' && (
+ <p className='p-base'>Bekijk hoe je via subsidies houtbouw kunt stimuleren.</p>
+ )}
+ {selected === 'fiscaal' && (
+ <p className='p-base'>Bekijk hoe je via fiscale maatregelen houtbouw kunt stimuleren.</p>
+ )}
+ </div>
+ );
+}

components/expertise-page/tab-button.js

@@ -23,7 +23,7 @@ export default function TabButton({
  <div className='flex flex-row items-baseline'>
  <h3 className='p-lg-semibild sm:p-4xl-semibold pr-1 first-letter:capitalize'>{name}</h3>{' '}
  {transitionAgenda === 'bouw' ? (
- <div className='p-2xs-bold sm:p-lg-semibild inline-block min-w-[24px]'>
+ <div className='p-2xs-bold sm:p-lg-semibild inline-block min-w-[24px] sm:min-w-[38px]'>
  ({numInstrument})
  </div>
  ) : (

components/expertise-page/tab-layout.js

@@ -0,0 +1,55 @@
+import DisplayInstruments from './display-instruments';
+import ExpertisePageInstrument from './expertise-page-instrument';
+
+export default function TabLayout({ selected, category, transitionAgenda, isPending }) {
+ return (
+ <>
+ <div className={`${isPending ? 'min-h-[1200px] bg-white' : ''}`}>
+ {/* DISPLAY INSTRUMENTS DESKTOP */}
+ <div className='flex flex-col'>
+ <ul>
+ {selected === 'beleid' && transitionAgenda === 'bouw' && (
+ <DisplayInstruments category={category} categoryName='beleid' />
+ )}
+ </ul>
+ <ul>
+ {selected === 'beleid' &&
+ transitionAgenda !== 'bouw' &&
+ category.map((instrument) => (
+ <ExpertisePageInstrument key={instrument.titel} instrument={instrument} />
+ ))}
+ </ul>
+ <ul>
+ {selected === 'inkoop' && (
+ <DisplayInstruments category={category} categoryName='inkoop' />
+ )}
+ </ul>
+ <ul>
+ {selected == 'grondpositie' && transitionAgenda === 'bouw' && (
+ <DisplayInstruments category={category} categoryName='grondpositie' />
+ )}
+ </ul>
+ <ul>
+ {selected === 'grondpositie' &&
+ transitionAgenda !== 'bouw' &&
+ category.map((instrument) => (
+ <ExpertisePageInstrument key={instrument.titel} instrument={instrument} />
+ ))}
+ </ul>
+ <ul className=''>
+ {selected === 'subsidie' &&
+ category.map((instrument) => (
+ <ExpertisePageInstrument key={instrument.titel} instrument={instrument} />
+ ))}
+ </ul>
+ <ul>
+ {selected === 'fiscaal' &&
+ category.map((instrument) => (
+ <ExpertisePageInstrument key={instrument.titel} instrument={instrument} />
+ ))}
+ </ul>
+ </div>
+ </div>
+ </>
+ );
+}