Glossary Added

.gitignore

@@ -11,6 +11,8 @@
 # next.js
 /.next/
 /out/
+public/robots.txt
+public/sitemap*.xml
 
 # production
 /build

app/[locale]/[state]/analytics/components/default-output-window.tsx

@@ -1,4 +1,9 @@
 import React from 'react';
+import { useTranslations } from 'next-intl';
+import { Button, Icon, Text } from 'opub-ui';
+
+import { docsLink, userGuideLink } from '@/config/site';
+import { cn } from '@/lib/utils';
 import {
   Ellipse,
   Exposure,
@@ -7,19 +12,11 @@ import {
   RiskScore,
   Vulnerability,
 } from '@/components/FactorIcons';
-import { useTranslations } from 'next-intl';
-import { Button, Icon, Text } from 'opub-ui';
-
-import { docsLink, userGuideLink } from '@/config/site';
-import { cn } from '@/lib/utils';
 import Icons from '@/components/icons';
 import { MediaRendering } from '@/components/media-rendering';
 import styles from './styles.module.scss';
 
-export function DefaultWindow({
-  indicatorDescriptions,
-  onClose,
-}: any) {
+export function DefaultWindow({ indicatorDescriptions, onClose }: any) {
   const t = useTranslations('analytics.detail');
   const tCommon = useTranslations('common');
   const list: { title: string; slug: string; description: string }[] = [];
@@ -57,11 +54,7 @@ export function DefaultWindow({
         >
           {/* State-level header with only close button (no icon/title) */}
           <div className="mb-1 flex items-start justify-end ">
-            <Button
-              onClick={onClose}
-              kind="tertiary"
-              aria-label={t('close')}
-            >
+            <Button onClick={onClose} kind="tertiary" aria-label={t('close')}>
               <Icon source={Icons.cross} />
             </Button>
           </div>
@@ -79,11 +72,7 @@ export function DefaultWindow({
   );
 }
 
-export const AboutIndicator = ({
-  IndicatorData,
-}: {
-  IndicatorData: any;
-}) => {
+export const AboutIndicator = ({ IndicatorData }: { IndicatorData: any }) => {
   const t = useTranslations('analytics.about');
   const IconMap: { [key: string]: React.ReactNode } = {
     'risk-score': <RiskScore color={'#000000'} />,
@@ -114,10 +103,11 @@ export const AboutIndicator = ({
           />
         </div>
       </div>
-      <Text className="my-4" variant="bodyLg">
-        {t('calculation')}
-      </Text>
-
+      {IndicatorData.length > 1 && (
+        <Text className="my-4" variant="bodyLg">
+          {t('calculation')}
+        </Text>
+      )}
       <div className="flex flex-col items-start gap-4 p-3">
         {IndicatorData.slice(1)?.map((indicator: any, index: number) => (
           <div
@@ -182,5 +172,3 @@ export const AboutIndicator = ({
     </div>
   );
 };
-
-

app/[locale]/glossary/page.tsx

@@ -0,0 +1,48 @@
+import { notFound } from 'next/navigation';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { Text } from 'opub-ui';
+
+import { features, glossaryCsv } from '@/config/site';
+import { parseGlossary } from '@/lib/glossary';
+import GlossaryClient from '@/components/glossary/glossary-client';
+import GlossaryHeaderNav from '@/components/glossary/glossary-header-nav';
+
+export const dynamic = 'force-static';
+
+export default async function GlossaryPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  if (!features.glossary) notFound();
+
+  const t = await getTranslations({ locale, namespace: 'glossary' });
+  const terms = parseGlossary(glossaryCsv);
+
+  return (
+    <main className="w-full bg-[#222136]">
+      <div className="bg-[#222136]">
+        <div className=" mx-auto mb-6 flex h-[300px] w-full max-w-6xl flex-col items-start justify-center  space-y-4 p-4 lg:p-0">
+          <Text variant="heading4xl" className="text-[#FFC152]">
+            {t('heading')}
+          </Text>
+          <Text
+            variant="headingLg"
+            fontWeight="regular"
+            className="text-[#fff]"
+          >
+            {t('description')}
+          </Text>
+          <GlossaryHeaderNav />
+        </div>
+      </div>
+
+      <section className="min-h-[calc(100vh-400px)] w-full bg-baseGreenSolid5 p-4 lg:p-0">
+        <GlossaryClient terms={terms} />
+      </section>
+    </main>
+  );
+}

app/[locale]/layout.tsx

@@ -126,20 +126,22 @@ export default async function LocaleLayout({
       <body className={fontSans.className}>
         <NextIntlClientProvider locale={locale} messages={messages}>
           <Provider>
-            <MediaRendering minWidth={null} maxWidth="1023">
-              <MobileNav />
-            </MediaRendering>
-            <MediaRendering minWidth="1024" maxWidth={null}>
-              <MainNav prefLangCookie={prefLangCookie} />
-            </MediaRendering>
-
-            {children}
-
-            {Footer && (
+            <div className="min-h-screen flex flex-col">
+              <MediaRendering minWidth={null} maxWidth="1023">
+                <MobileNav />
+              </MediaRendering>
               <MediaRendering minWidth="1024" maxWidth={null}>
-                <Footer />
+                <MainNav prefLangCookie={prefLangCookie} />
               </MediaRendering>
-            )}
+
+              <main className="flex-1">{children}</main>
+
+              {Footer && (
+                <MediaRendering minWidth="1024" maxWidth={null}>
+                  <Footer />
+                </MediaRendering>
+              )}
+            </div>
           </Provider>
         </NextIntlClientProvider>
       </body>