From 93ca5b3ec0386867298e84477d87adede50649b8 Mon Sep 17 00:00:00 2001
From: kim <kim.phanhoang@epfl.ch>
Date: Fri, 26 Apr 2024 15:31:47 +0200
Subject: [PATCH] feat: add oer info page (to be done)

---
 app/oer/page.tsx                        | 39 ++++++++++++++
 src/components/pages/OERInformation.tsx | 68 +++++++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 app/oer/page.tsx
 create mode 100644 src/components/pages/OERInformation.tsx

diff --git a/app/oer/page.tsx b/app/oer/page.tsx
new file mode 100644
index 00000000..386dcef4
--- /dev/null
+++ b/app/oer/page.tsx
@@ -0,0 +1,39 @@
+import { Suspense } from 'react';
+import { dehydrate } from 'react-query/core';
+
+import Hydrate from '../../src/components/HydrateClient';
+import Wrapper from '../../src/components/common/Wrapper';
+import OERInformation from '../../src/components/pages/OERInformation';
+import { APP_AUTHOR } from '../../src/config/constants';
+import getQueryClient from '../../src/config/get-query-client';
+import en from '../../src/langs/en.json';
+import { buildSeo } from '../seo';
+
+export async function generateMetadata() {
+  // todo: get lang from location and crawler
+  // question: how to get language from
+  // @ts-ignore
+  const t = (s: string): string => en[s];
+
+  return buildSeo({
+    title: t('OER information'),
+    description: t('Information about Open Educational Resources OER'),
+    author: APP_AUTHOR,
+  });
+}
+
+const Page = async () => {
+  const queryClient = getQueryClient();
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <Suspense>
+        <Wrapper dehydratedState={dehydratedState}>
+          <OERInformation />
+        </Wrapper>
+      </Suspense>
+    </Hydrate>
+  );
+};
+export default Page;
diff --git a/src/components/pages/OERInformation.tsx b/src/components/pages/OERInformation.tsx
new file mode 100644
index 00000000..426e0c0f
--- /dev/null
+++ b/src/components/pages/OERInformation.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ArrowForward } from '@mui/icons-material';
+import { Box, Button, Typography, styled } from '@mui/material';
+
+import { LibraryIcon } from '@graasp/ui';
+
+import { GRAASP_COLOR } from '../../config/constants';
+import { useLibraryTranslation } from '../../config/i18n';
+import { ALL_COLLECTIONS_ROUTE } from '../../config/routes';
+import {
+  GRAASPER_COLLECTIONS_GRID_ID,
+  GRAASP_SELECTION_TITLE_ID,
+  MOST_LIKED_TITLE_ID,
+  RECENT_PUBLICATIONS_TITLE_ID,
+} from '../../config/selectors';
+import LIBRARY from '../../langs/constants';
+import ItemCollection from '../collection/ItemCollection';
+import HomeHeader from '../layout/HomeHeader';
+import MainWrapper from '../layout/MainWrapper';
+
+const PATTERN_OPACITY = 0.7;
+const SECONDARY_PATTERN_COLOR = '505DD2';
+
+const StyledBackgroundContainer = styled(Box)(() => ({
+  backgroundColor: GRAASP_COLOR,
+  backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23${SECONDARY_PATTERN_COLOR}' fill-opacity='${PATTERN_OPACITY}' fill-rule='evenodd'/%3E%3C/svg%3E")`,
+}));
+
+const DiscoverButton = styled(Button)(({ theme }) => ({
+  fontSize: '1.2rem',
+  padding: theme.spacing(1, 2),
+  margin: theme.spacing(3),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(3, 6),
+  },
+  backgroundColor: 'transparent',
+  textTransform: 'none',
+  ':hover': {
+    transition: 'background-color 500ms linear',
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+  },
+  '&:hover > .MuiButton-endIcon': {
+    '@keyframes bounce': {
+      '0%': { transform: 'translateX(0px)' },
+      '30%': { transform: 'translateX(15px)' },
+      '85%': { transform: 'translateX(0px)' },
+    },
+    animationName: 'bounce',
+    animationDuration: '1.2s',
+    animationIterationCount: 'infinite',
+  },
+}));
+
+const OERInformation = () => {
+  const { t } = useLibraryTranslation();
+
+  return (
+    <StyledBackgroundContainer>
+      <MainWrapper>
+        <Typography>OER Information</Typography>
+      </MainWrapper>
+    </StyledBackgroundContainer>
+  );
+};
+export default OERInformation;