Add Prepare For Ramadan Page (#2297)

* Add Prepare For Ramadan Page * Change the route * Add image * Add collapsible reviews section
quran · Jan 28, 2025 · fac853f · fac853f
1 parent 3762519
commit fac853f
Show file tree

Hide file tree

Showing 7 changed files with 215 additions and 333 deletions.
diff --git a/public/images/ayah-level-settings.jpeg b/public/images/ayah-level-settings.jpeg
diff --git a/src/components/RamadanActivity/InlineLink.tsx b/src/components/RamadanActivity/InlineLink.tsx
@@ -6,16 +6,17 @@ import { logButtonClick } from '@/utils/eventLogger';
 type Props = {
   href: string;
   text: string;
+  isNewTab?: boolean;
 };
 
-const InlineLink: React.FC<Props> = ({ href, text }) => {
+const InlineLink: React.FC<Props> = ({ href, text, isNewTab = true }) => {
   const onLinkClicked = () => {
     logButtonClick('ramadan_activities_link', { href });
   };
   return (
     <>
       {' '}
-      <Link onClick={onLinkClicked} isNewTab href={href}>
+      <Link onClick={onLinkClicked} isNewTab={isNewTab} href={href}>
         {text}
       </Link>{' '}
     </>

diff --git a/src/components/RamadanActivity/ReadMoreCollapsible/ReadMoreCollapsible.module.scss b/src/components/RamadanActivity/ReadMoreCollapsible/ReadMoreCollapsible.module.scss
@@ -13,3 +13,7 @@
     font-size: var(--font-size-large);
     font-weight: var(--font-weight-bold);
 }
+
+.collapsibleHeader {
+    align-items: center !important;
+}
diff --git a/src/components/RamadanActivity/ReadMoreCollapsible/index.tsx b/src/components/RamadanActivity/ReadMoreCollapsible/index.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import useTranslation from 'next-translate/useTranslation';
-
 import styles from './ReadMoreCollapsible.module.scss';
 
 import Collapsible, { CollapsibleDirection } from '@/components/dls/Collapsible/Collapsible';
@@ -17,11 +15,13 @@ export enum Section {
   INVITE_PEOPLE = 'invite_people',
   CRISIS = 'crises',
   INSPIRING_READING = 'inspiring_reading',
+  MORE_REVIEWS = 'more_reviews',
 }
 
 export enum TitleType {
   SHOW_MORE = 'show_more',
   LEARN_MORE = 'learn_more',
+  MORE_REVIEWS = 'more_reviews',
 }
 
 type Props = {
@@ -35,8 +35,6 @@ const ReadMoreCollapsible: React.FC<Props> = ({
   section,
   titleType = TitleType.LEARN_MORE,
 }) => {
-  const { t } = useTranslation('common');
-
   const onCollapseOpenChange = (isCollapseOpen: boolean) => {
     if (isCollapseOpen) {
       logEvent('ramadan_activities_collapse_opened', { section });
@@ -51,11 +49,12 @@ const ReadMoreCollapsible: React.FC<Props> = ({
         onOpenChange={(isCollapseOpen) => onCollapseOpenChange(isCollapseOpen)}
         title={
           <span className={styles.title}>
-            {t(titleType === TitleType.LEARN_MORE ? 'learn-more' : 'show-more')}
+            {titleType === TitleType.MORE_REVIEWS ? 'More Reviews' : 'Learn More'}
           </span>
         }
         prefix={<ChevronDownIcon />}
         shouldRotatePrefixOnToggle
+        headerClassName={styles.collapsibleHeader}
       >
         {({ isOpen: isOpenRenderProp }) => {
           if (!isOpenRenderProp) return null;

diff --git a/src/lib/og.ts b/src/lib/og.ts
@@ -16,6 +16,9 @@ export const getLearningPlansImageUrl = ({ locale }: BaseOgOptions) =>
 export const getMediaGeneratorOgImageUrl = ({ locale }: BaseOgOptions) =>
   `${BASE_OG_URL}/api/og/media?lang=${locale}`;
 
+export const getPreparingForRamadanOgImageUrl = ({ locale }: BaseOgOptions) =>
+  `${BASE_OG_URL}/api/og/preparing-for-ramadan?lang=${locale}`;
+
 export const getChapterOgImageUrl = ({
   chapterId,
   locale,

diff --git a/src/pages/ramadan-activities/RamadanActivities.module.scss b/src/pages/ramadan-activities/RamadanActivities.module.scss
@@ -18,3 +18,8 @@
     }
     min-height: calc(5 * var(--spacing-mega));
 }
+
+.ayahLevelSettings {
+    display: flex;
+    align-items: center;
+}