feat(envited.ascs.digital): Create footer (#130)

ASCS-eV · Mar 6, 2024 · 454de32 · 454de32
2 parents ef05b2d + de61077
commit 454de32
Show file tree

Hide file tree

Showing 11 changed files with 162 additions and 4 deletions.
diff --git a/apps/envited.ascs.digital/app/dashboard/layout.tsx b/apps/envited.ascs.digital/app/dashboard/layout.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 
 import { NAVIGATION_DASHBOARD } from '../../common/constants'
+import { Footer } from '../../modules/Footer'
 import { Header } from '../../modules/Header'
 import { Navigation } from '../../modules/Navigation'
 
@@ -22,6 +23,7 @@ export default function DashboardLayout({ children }: DashboardProps) {
           </div>
         </div>
       </main>
+      <Footer />
     </>
   )
 }
diff --git a/apps/envited.ascs.digital/app/layout.tsx b/apps/envited.ascs.digital/app/layout.tsx
@@ -1,3 +1,5 @@
+import { Footer } from '../modules/Footer'
+import { Header } from '../modules/Header'
 import { NotificationContainer } from '../modules/Notifications'
 import { Providers } from '../modules/Theme/Providers'
 import './global.css'
@@ -22,8 +24,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <meta name="theme-color" content="#ffffff"></meta>
       </head>
       <body className="bg-white dark:bg-gray-800">
+        <Header />
         <NotificationContainer />
         <Providers>{children}</Providers>
+        <Footer />
       </body>
     </html>
   )

diff --git a/apps/envited.ascs.digital/app/members/page.tsx b/apps/envited.ascs.digital/app/members/page.tsx
@@ -1,13 +1,11 @@
 import { getPublishedProfiles } from '../../common/serverActions'
-import { Header } from '../../modules/Header'
 import { Members } from '../../modules/Members'
 
 export default async function Index() {
   const profiles = await getPublishedProfiles()
 
   return (
     <>
-      <Header />
       <main>
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <Members members={profiles} />

diff --git a/apps/envited.ascs.digital/app/page.tsx b/apps/envited.ascs.digital/app/page.tsx
@@ -1,11 +1,9 @@
 import { ExampleTable } from '../modules/ExampleTable'
-import { Header } from '../modules/Header'
 import { HeroHeader } from '../modules/HeroHeader'
 
 export default async function Index() {
   return (
     <>
-      <Header />
       <main>
         <HeroHeader />
         <div className="mx-auto max-w-6xl">

diff --git a/apps/envited.ascs.digital/common/i18n/useI18n.ts b/apps/envited.ascs.digital/common/i18n/useI18n.ts
@@ -1,5 +1,6 @@
 import { compose, mergeDeepRight, pathOr, propOr, reduce } from 'ramda'
 
+import { FooterTranslation } from '../../modules/Footer'
 import { HeaderTranslation } from '../../modules/Header'
 import { HeroHeaderTranslation } from '../../modules/HeroHeader'
 import { MemberTranslation } from '../../modules/Member'
@@ -11,6 +12,7 @@ const getTranslationsForLanguage = (namespace: string) => (locale: Locale) => pa
 
 const mergeTranslations = reduce(mergeDeepRight, { [Locale.en_GB]: {}, [Locale.de_DE]: {} })
 const translationObject = mergeTranslations([
+  FooterTranslation,
   HeaderTranslation,
   HeroHeaderTranslation,
   MemberTranslation,

diff --git a/apps/envited.ascs.digital/modules/Footer/Footer.intl.ts b/apps/envited.ascs.digital/modules/Footer/Footer.intl.ts
@@ -0,0 +1,12 @@
+import { Locale, TranslationsMap } from '../../common/i18n/types'
+import de from './locales/de_DE.json'
+import en from './locales/en_GB.json'
+
+export const translations: TranslationsMap = {
+  [Locale.en_GB]: {
+    Footer: en,
+  },
+  [Locale.de_DE]: {
+    Footer: de,
+  },
+}
diff --git a/apps/envited.ascs.digital/modules/Footer/Footer.test.tsx b/apps/envited.ascs.digital/modules/Footer/Footer.test.tsx
@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom'
+import { render } from '@testing-library/react'
+
+import { Footer } from './Footer'
+
+describe('Footer', () => {
+  it('should render successfully', () => {
+    // when ... rendering component
+    // then ... should render as expected
+    const { getByText } = render(<Footer />)
+    expect(getByText('Envited')).toBeInTheDocument()
+  })
+})
diff --git a/apps/envited.ascs.digital/modules/Footer/Footer.tsx b/apps/envited.ascs.digital/modules/Footer/Footer.tsx
@@ -0,0 +1,112 @@
+import { useTranslation } from 'apps/envited.ascs.digital/common/i18n'
+import Image from 'next/image'
+import { FC } from 'react'
+
+export interface FooterProps {}
+
+const navigation = {
+  solutions: [
+    { name: 'Home', href: '#' },
+    { name: 'Assets', href: '#' },
+    { name: 'Members', href: '#' },
+    { name: 'Imprint', href: '#' },
+  ],
+  support: [
+    { name: 'Community', href: '#' },
+    { name: 'Events', href: '#' },
+    { name: 'News', href: '#' },
+  ],
+  social: [
+    {
+      name: 'X',
+      href: '#',
+      icon: props => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
+        </svg>
+      ),
+    },
+    {
+      name: 'GitHub',
+      href: '#',
+      icon: props => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+  ],
+}
+
+export const Footer: FC<FooterProps> = () => {
+  const { t } = useTranslation('Footer')
+
+  return (
+    <footer className="bg-gray-50 dark:bg-transparent" aria-labelledby="footer-heading">
+      <div className="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <div className="space-y-8">
+            <Image src="/envited-logo.png" alt="ENVITED" priority height={40} width={170} />
+            <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">{t('[Description] envited')}</p>
+          </div>
+          <div className="grid grid-cols-2 gap-8 xl:col-span-2">
+            <div className="md:grid md:grid-cols-2 md:gap-8" />
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
+                  {t('[Heading] data space')}
+                </h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.solutions.map(item => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
+                  {t('[Heading] envited')}
+                </h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.support.map(item => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-16 border-t border-gray-900/10 dark:border-white/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
+          <div className="flex space-x-6 md:order-2">
+            {navigation.social.map(item => (
+              <a key={item.name} href={item.href} className="text-gray-500 hover:text-gray-400">
+                <span className="sr-only">{item.name}</span>
+                <item.icon className="h-6 w-6" aria-hidden="true" />
+              </a>
+            ))}
+          </div>
+          <p className="mt-8 text-xs leading-5 text-gray-500 dark:text-gray-400 md:order-1 md:mt-0">
+            &copy; {t('[Heading] copyright')}
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/apps/envited.ascs.digital/modules/Footer/index.ts b/apps/envited.ascs.digital/modules/Footer/index.ts
@@ -0,0 +1,5 @@
+import { translations } from './Footer.intl'
+
+export { Footer } from './Footer'
+
+export { translations as FooterTranslation }
diff --git a/apps/envited.ascs.digital/modules/Footer/locales/de_DE.json b/apps/envited.ascs.digital/modules/Footer/locales/de_DE.json
@@ -0,0 +1,6 @@
+{
+  "[Description] envited": "The ENVITED data market offers significant added value for all the market players operating in the environment of virtual testing. Through a single point of access, partners will be able to connect to a large range of different Technologie Partners and End Users.",
+  "[Heading] data space": "Data space",
+  "[Heading] envited": "Envited",
+  "[Heading] copyright": "2024 Envited Data Space, Inc. All rights reserved."
+}
diff --git a/apps/envited.ascs.digital/modules/Footer/locales/en_GB.json b/apps/envited.ascs.digital/modules/Footer/locales/en_GB.json
@@ -0,0 +1,6 @@
+{
+  "[Description] envited": "The ENVITED data market offers significant added value for all the market players operating in the environment of virtual testing. Through a single point of access, partners will be able to connect to a large range of different Technologie Partners and End Users.",
+  "[Heading] data space": "Data space",
+  "[Heading] envited": "Envited",
+  "[Heading] copyright": "2024 Envited Data Space, Inc. All rights reserved."
+}