Add sections 2,3,4 of evidence page and add data only in English for …

…these sections
socialincome-san · Nov 11, 2023 · 2340119 · 2340119
1 parent 67ca974
commit 2340119
Show file tree

Hide file tree

Showing 9 changed files with 781 additions and 5 deletions.
diff --git a/shared/locales/en/website-evidence.json b/shared/locales/en/website-evidence.json
diff --git a/shared/src/utils/i18n.ts b/shared/src/utils/i18n.ts
@@ -8,14 +8,15 @@ interface TranslateProps {
 	namespace?: string;
 	language?: string;
 	context?: object;
+    returnObjects?: boolean;
 }
 
 interface TranslatorProps {
 	language: LanguageCode;
 	namespaces: string[] | string;
 }
 
-export type TranslateFunction = (key: string, translateProps?: TranslateProps) => string;
+export type TranslateFunction = (key: string, translateProps?: TranslateProps) => any;
 
 export class Translator {
 	language: LanguageCode;
@@ -40,6 +41,7 @@ export class Translator {
 				lng: language,
 				ns: namespaces,
 				fallbackLng: FALLBACK_LANGUAGE,
+                returnObjects: false,
 				interpolation: {
 					escapeValue: false,
 				},
@@ -51,6 +53,7 @@ export class Translator {
 		return this.instance.t(key, {
 			ns: translateProps?.namespace || this.namespaces,
 			lng: translateProps?.language || this.language,
+            returnObjects: translateProps?.returnObjects || false,
 			...translateProps?.context,
 		});
 	};

diff --git a/website/src/app/[lang]/[country]/(website)/evidence/page.tsx b/website/src/app/[lang]/[country]/(website)/evidence/page.tsx
@@ -1,10 +1,16 @@
 import { DefaultPageProps } from '@/app/[lang]/[country]';
 import Section1 from './section-1';
+import Section2 from './section-2';
+import Section3 from './section-3';
+import Section4 from './section-4';
 
 export default async function Page(props: DefaultPageProps) {
 	return (
 		<>
 			<Section1 {...props} />
+			<Section2 {...props} />
+            <Section3 {...props} />
+            <Section4 {...props} />
 		</>
 	);
 }
diff --git a/website/src/app/[lang]/[country]/(website)/evidence/section-1.tsx b/website/src/app/[lang]/[country]/(website)/evidence/section-1.tsx
@@ -1,8 +1,6 @@
 import { DefaultPageProps } from '@/app/[lang]/[country]';
-import { ClockIcon } from '@heroicons/react/24/solid';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
-import Link from 'next/link';
 
 export default async function Section1({ params }: DefaultPageProps) {
 	const translator = await Translator.getInstance({

diff --git a/website/src/app/[lang]/[country]/(website)/evidence/section-2.tsx b/website/src/app/[lang]/[country]/(website)/evidence/section-2.tsx
@@ -0,0 +1,35 @@
+import { DefaultPageProps } from '@/app/[lang]/[country]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer,Typography } from '@socialincome/ui';
+import { SectionCard } from './section-card';
+
+export default async function Section2({ params }: DefaultPageProps) {
+    const section = 2;
+	const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-evidence'],
+	});
+
+	const c = translator.t(`section-${section}.cards`, {returnObjects: true});
+    let cards: Object[] = [];
+    for(const card in c){cards.push(card);}
+    let i = 0;
+
+	return (
+		<BaseContainer backgroundColor='bg-blue-50' className="mt-12 p-10 rounded-sm flex flex-col items-start space-y-1">
+			<Typography size='xl' weight='medium' color='muted-foreground'>{translator.t(`section-${section}.topic`)}</Typography>
+			<div className='pb-10' >
+				<Typography as='span' size='4xl' weight='bold'>{translator.t(`section-${section}.title-black`)}</Typography>
+				<Typography as='span' size='4xl' weight='bold' className='text-red-400'>{translator.t(`section-${section}.title-red`)}</Typography>
+			</div>
+			<div className='my-32 flex space-x-20'>
+				<Typography size='2xl' weight='semibold' className='w-1/4'>{translator.t(`section-${section}.evidence`)}</Typography>
+				<div className='w-2/5 h-fit text-left space-y-10'> 
+                {
+                    cards.map((card, key)=> {i++;return (<SectionCard section={section} cardNumber={i} params={params} key={key}/>)})
+                }
+				</div>
+			</div>
+		</BaseContainer>
+	);
+}
diff --git a/website/src/app/[lang]/[country]/(website)/evidence/section-3.tsx b/website/src/app/[lang]/[country]/(website)/evidence/section-3.tsx
@@ -0,0 +1,35 @@
+import { DefaultPageProps } from '@/app/[lang]/[country]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer,Typography } from '@socialincome/ui';
+import { SectionCard } from './section-card';
+
+export default async function Section3({ params }: DefaultPageProps) {
+    const section = 3;
+	const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-evidence'],
+	});
+
+	const c = translator.t(`section-${section}.cards`, {returnObjects: true});
+    let cards: Object[] = [];
+    for(const card in c){cards.push(card);}
+    let i = 0;
+
+	return (
+		<BaseContainer backgroundColor='bg-pink-50' className="p-10 rounded-sm flex flex-col items-start space-y-1">
+			<Typography size='xl' weight='medium' color='muted-foreground'>{translator.t(`section-${section}.topic`)}</Typography>
+			<div className='pb-10' >
+				<Typography as='span' size='4xl' weight='bold'>{translator.t(`section-${section}.title-black`)}</Typography>
+				<Typography as='span' size='4xl' weight='bold' className='text-red-400'>{translator.t(`section-${section}.title-red`)}</Typography>
+			</div>
+			<div className='my-32 flex space-x-20'>
+				<Typography size='2xl' weight='semibold' className='w-1/4'>{translator.t(`section-${section}.evidence`)}</Typography>
+				<div className='w-2/5 h-fit text-left space-y-10'> 
+                {
+                    cards.map((card, key)=> {i++;return (<SectionCard section={section} cardNumber={i} params={params} key={key}/>)})
+                }
+				</div>
+			</div>
+		</BaseContainer>
+	);
+}
diff --git a/website/src/app/[lang]/[country]/(website)/evidence/section-4.tsx b/website/src/app/[lang]/[country]/(website)/evidence/section-4.tsx
@@ -0,0 +1,35 @@
+import { DefaultPageProps } from '@/app/[lang]/[country]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer,Typography } from '@socialincome/ui';
+import { SectionCard } from './section-card';
+
+export default async function Section4({ params }: DefaultPageProps) {
+    const section = 4;
+	const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-evidence'],
+	});
+
+	const c = translator.t(`section-${section}.cards`, {returnObjects: true});
+    let cards: Object[] = [];
+    for(const card in c){cards.push(card);}
+    let i = 0;
+
+	return (
+		<BaseContainer backgroundColor='bg-yellow-50' className="p-10 rounded-sm flex flex-col items-start space-y-1">
+			<Typography size='xl' weight='medium' color='muted-foreground'>{translator.t(`section-${section}.topic`)}</Typography>
+			<div className='pb-10' >
+				<Typography as='span' size='4xl' weight='bold'>{translator.t(`section-${section}.title-black`)}</Typography>
+				<Typography as='span' size='4xl' weight='bold' className='text-red-400'>{translator.t(`section-${section}.title-red`)}</Typography>
+			</div>
+			<div className='my-32 flex space-x-20'>
+				<Typography size='2xl' weight='semibold' className='w-1/4'>{translator.t(`section-${section}.evidence`)}</Typography>
+				<div className='w-2/5 h-fit text-left space-y-10'> 
+                {
+                    cards.map((card, key)=> {i++;return (<SectionCard section={section} cardNumber={i} params={params} key={key}/>)})
+                }
+				</div>
+			</div>
+		</BaseContainer>
+	);
+}
diff --git a/website/src/app/[lang]/[country]/(website)/evidence/section-card.tsx b/website/src/app/[lang]/[country]/(website)/evidence/section-card.tsx
@@ -0,0 +1,62 @@
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import {Card, CardTitle, Typography, Dialog, DialogTitle, DialogTrigger, DialogContent, DialogHeader, DialogDescription, DialogFooter, Button, } from '@socialincome/ui';
+import Link from 'next/link';
+import { DefaultParams } from '@/app/[lang]/[country]';
+import { SectionParagraph } from './section-paragraph';
+
+type SectionCardProps = {
+    section: number;
+    cardNumber: number;
+    params: DefaultParams;
+}
+
+
+export async function SectionCard({ section, cardNumber, params}: SectionCardProps){
+
+    const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-evidence'],
+	});
+
+    const p = translator.t(`section-${section}.cards.card-${cardNumber}.paragraphs`, {returnObjects: true});
+    let paragraphs: Object[] = [];
+    for(const paragraph in p){paragraphs.push(paragraph);}
+    let i = 0;
+
+
+	return (
+		<Dialog>
+			<DialogTrigger>
+				<Card className='bg-inherit border-black border w-full py-4 px-10 text-left scale-100 hover:scale-105 ease-in duration-200'>
+					<CardTitle className='text-red-400 py-2 '>{translator.t(`section-${section}.cards.card-${cardNumber}.title`)}</CardTitle>
+					<Typography size='lg'>{translator.t(`section-${section}.cards.card-${cardNumber}.description`)}</Typography>
+				</Card>
+			</DialogTrigger>
+			<DialogContent className='w-full'>
+				<DialogHeader>
+					<DialogTitle>
+						<Typography size='2xl' weight='bold'>{translator.t(`section-${section}.cards.card-${cardNumber}.title`)}</Typography>
+					</DialogTitle>
+				</DialogHeader>
+				<DialogDescription>
+                    {
+                        paragraphs.map((paragraph, key)=>{
+                            i++; return(
+                                <div className='mb-3'>
+                                    <SectionParagraph section={section} cardNumber={cardNumber} paragraphNumber={i} params={params} key={key} />
+                                </div>
+                            )
+                        })
+                    }
+					<br/>
+				</DialogDescription>
+				<DialogFooter>
+					<Link href="/get-involved">
+						<Button>{translator.t('take-action')}</Button>
+					</Link>
+				</DialogFooter>
+
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/website/src/app/[lang]/[country]/(website)/evidence/section-paragraph.tsx b/website/src/app/[lang]/[country]/(website)/evidence/section-paragraph.tsx
@@ -0,0 +1,38 @@
+import { Translator } from "@socialincome/shared/src/utils/i18n";
+import { DefaultParams } from "../..";
+import { Typography } from "@socialincome/ui";
+import Link from "next/link";
+
+type SectionParagraphProps = {
+    section: number;
+    cardNumber: number;
+    paragraphNumber: number;
+    params: DefaultParams
+}
+
+export async function SectionParagraph({section, cardNumber, paragraphNumber, params}: SectionParagraphProps){
+    const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-evidence'],
+	});
+    const pt = translator.t(`section-${section}.cards.card-${cardNumber}.paragraphs.paragraph-${paragraphNumber}`, {returnObjects: true}); 
+    let parts: Object[] = [];
+    for(const part in pt){parts.push(part);}
+    let i = 0;
+    return(
+        <div>
+            {
+                parts.map((part, key)=> {
+                i++; 
+                return (
+                    <span key={key}>
+                        <Typography as="span" size='lg'>{translator.t(`section-${section}.cards.card-${cardNumber}.paragraphs.paragraph-${paragraphNumber}.part-${i}.text`)}</Typography>
+                        <Link href={translator.t(`section-${section}.cards.card-${cardNumber}.paragraphs.paragraph-${paragraphNumber}.part-${i}.link`)}>
+                            <Typography as="span" size='lg' className='text-blue-500 hover:text-blue-800' >{translator.t(`section-${section}.cards.card-${cardNumber}.paragraphs.paragraph-${paragraphNumber}.part-${i}.text-blue`) }</Typography>
+                        </Link>
+                    </span>
+                );}
+            )}
+        </div>
+    )
+}