Add tabs to filter list by donated tech

It was necessary to replace `Translator.getInstance` with `useTranslator` and add `'use client'`, otherwise there were issues with client/server components and async/await. Not sure if this is the correct way to solve this, but it seems to work.

shared/locales/en/website-techstack.json

@@ -17,6 +17,10 @@
 		],
 		"subtitle": "At Social Income, donated tech and software play a crucial role in driving our mission forward."
 	},
+	"tabs": {
+		"tech-stack": "Tech Stack",
+		"donated-tech": "Donated Tech"
+	},
 	"badges": {
 		"donated": "Donated"
 	},

website/src/app/[lang]/[region]/(website)/techstack/(sections)/techlist.tsx

@@ -1,6 +1,10 @@
+'use client';
+
 import { DefaultParams } from '@/app/[lang]/[region]';
 import TechCard from '@/app/[lang]/[region]/(website)/techstack/(sections)/techcard';
-import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { useTranslator } from '@/hooks/useTranslator';
+import { Tabs, TabsList, TabsTrigger } from '@socialincome/ui';
+import React from 'react';
 
 type TechEntryJSON = {
 	title: string;
@@ -10,20 +14,36 @@ type TechEntryJSON = {
 	donated: boolean;
 };
 
-export async function TechList({ lang }: DefaultParams) {
-	const translator = await Translator.getInstance({
-		language: lang,
-		namespaces: ['website-techstack'],
-	});
+export function TechList({ lang }: DefaultParams) {
+	const [isDonated, setIsDonated] = React.useState(false);
+
+	const translator = useTranslator(lang, 'website-techstack');
+	const techArray: TechEntryJSON[] | undefined = translator?.t('cards');
 
-	const techArray: TechEntryJSON[] = translator.t('cards');
+	const handleTabChange = (value: string) => {
+		setIsDonated(value === 'donated');
+	};
 
 	return (
 		<div className="mx-auto max-w-6xl">
+			<div className="flex justify-center pb-10">
+				<Tabs defaultValue="tech" className="w-[400px]" onValueChange={handleTabChange}>
+					<TabsList className="grid w-full grid-cols-2 bg-primary bg-opacity-10">
+						<TabsTrigger value="tech">{translator?.t('tabs.tech-stack')}</TabsTrigger>
+						<TabsTrigger value="donated">{translator?.t('tabs.donated-tech')}</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
 			<div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-2">
-				{techArray.map((techEntry, index) => (
-					<TechCard {...techEntry} translations={{badgeDonated: translator.t('badges.donated')}} key={index} />
-				))}
+				{techArray
+					?.filter((t) => !isDonated || t.donated)
+					.map((techEntry, index) => (
+						<TechCard
+							{...techEntry}
+							translations={{ badgeDonated: translator?.t('badges.donated') || '' }}
+							key={index}
+						/>
+					))}
 			</div>
 		</div>
 	);