Connect data, Add filters

src/Components/CheckboxGroup.tsx

@@ -0,0 +1,28 @@
+import { Checkbox, CheckboxOptionType } from 'antd';
+
+interface CheckboxGroupProps {
+  options: CheckboxOptionType[];
+  value: string[];
+  onChange: (checkedValues: string[]) => void;
+}
+
+function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
+  const { options, value, onChange } = props;
+
+  return (
+    <div
+      className='padding-04'
+      style={{ border: '0.06rem solid var(--gray-400)' }}
+    >
+      <p className='undp-typography label'>Filter by subprogrammes</p>
+      <Checkbox.Group
+        options={options}
+        value={value}
+        className='undp-checkbox'
+        onChange={checkedValues => onChange(checkedValues as string[])}
+      />
+    </div>
+  );
+}
+
+export default CheckboxGroup;

src/Components/Constants.tsx

@@ -0,0 +1,63 @@
+import { Leaf, School, BriefcaseBusiness, Flag, Shell } from 'lucide-react';
+
+// constants.ts
+export interface Programme {
+  label: string;
+  value: string;
+  color: string;
+  icon: any;
+  subcategories?: Subcategory[];
+}
+
+export interface Subcategory {
+  label: string;
+  value: string;
+}
+
+export const PROGRAMMES: Programme[] = [
+  {
+    label: 'All Sustainable Financial Programmes',
+    value: 'all_programmes',
+    color: '#006EB5',
+    icon: Leaf,
+  },
+  {
+    label: 'Public finance for the SDGs',
+    value: 'public',
+    color: '#5DD4F0',
+    icon: School,
+    subcategories: [
+      { label: 'Sub Programme 1.1', value: 'subProgramme1.1' },
+      { label: 'Sub Programme 1.2', value: 'subProgramme1.2' },
+    ],
+  },
+  {
+    label: 'Unlocking private capital and aligning for the SDGs',
+    value: 'private',
+    color: '#02A38A',
+    icon: BriefcaseBusiness,
+    subcategories: [
+      { label: 'Sub Programme 2.1', value: 'subProgramme2.1' },
+      { label: 'Sub Programme 2.2', value: 'subProgramme2.2' },
+    ],
+  },
+  {
+    label: 'Integrated National Financing Frameworks',
+    value: 'frameworks',
+    color: '#E78625',
+    icon: Flag,
+  },
+  {
+    label: 'Biofin',
+    value: 'biofin',
+    color: '#E0529E',
+    icon: Shell,
+  },
+];
+
+export const GROUPS = [
+  { label: 'All Countries', value: 'allCountries' },
+  { label: 'Fragile and Affected', value: 'fragile_affected' },
+  { label: 'LDC', value: 'ldc' },
+  { label: 'SIDS', value: 'sids' },
+];

src/Components/Filter.tsx

@@ -0,0 +1,34 @@
+import { Radio } from 'antd';
+import styled from 'styled-components';
+import { GROUPS } from './Constants';
+
+const StyledRadioGroup = styled(Radio.Group)`
+  display: flex;
+  flex-direction: column; // Display items in one column
+`;
+
+interface CountryGroupProps {
+  onRadioChange: (value: string) => void; // Callback function prop for Radio Group
+  selectedRadio: string; // Selected radio value
+}
+
+function FilterCountryGroup(props: CountryGroupProps): JSX.Element {
+  const { onRadioChange, selectedRadio } = props;
+
+  return (
+    <div
+      className='padding-04'
+      style={{ border: '0.06rem solid var(--gray-400)' }}
+    >
+      <p className='undp-typography label'>Filter by country group</p>
+      <StyledRadioGroup
+        options={GROUPS}
+        value={selectedRadio}
+        onChange={(e: any) => onRadioChange(e.target.value)}
+        className='undp-radio'
+      />
+    </div>
+  );
+}
+
+export default FilterCountryGroup;