Add collapsible reviews section

quran · Jan 27, 2025 · 149cd7c · 149cd7c
1 parent 6df776b
commit 149cd7c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
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/pages/ramadan-activities/index.tsx b/src/pages/ramadan-activities/index.tsx
@@ -11,6 +11,10 @@ import useTranslation from 'next-translate/useTranslation';
 import NextSeoWrapper from '@/components/NextSeoWrapper';
 import PageContainer from '@/components/PageContainer';
 import InlineLink from '@/components/RamadanActivity/InlineLink';
+import ReadMoreCollapsible, {
+  Section,
+  TitleType,
+} from '@/components/RamadanActivity/ReadMoreCollapsible';
 import Button, { ButtonVariant } from '@/dls/Button/Button';
 import { getPreparingForRamadanOgImageUrl } from '@/lib/og';
 import styles from '@/pages/contentPage.module.scss';
@@ -171,27 +175,29 @@ const PreparingForRamadanPage: NextPage = (): JSX.Element => {
               understanding of the Quran and faith. Wallahi, there is an activity mentioned here and
               I will perform it.”
             </div>
-            <div>⭐⭐⭐⭐⭐ “Mashallah, this is excellent content.”</div>
-            <div>⭐⭐⭐⭐⭐ “Course was very inspiring and intuitive.”</div>
-            <div>
-              ⭐⭐⭐⭐⭐ “I kinda joined late but it surely did increase my knowledge and made me
-              reflect upon my actions. It is a great step and I wish more people to join it so that
-              they can also take benefit from it and try to improve their quality of life.”
-            </div>
-            <div>
-              ⭐⭐⭐⭐⭐ “It was extremely useful. It reminds us to act to act upon the manual given
-              to us by He Who is Exalted, High, and Mighty: Allah. Please do develop such plans for
-              other months like Rajab. Thanks!”
-            </div>
-            <div>
-              ⭐⭐⭐⭐⭐ “Not a single word in all the lessons didn't speak the truth. It was so
-              helpful, alhamdulilah. Quran.com is a wonderful website, and every person, muslim and
-              non-muslim, should use it. And, Inshallah, they will. Thank you for the help you
-              provided me.”
-            </div>
-            <div>
-              ⭐⭐⭐⭐⭐ “Important and vital read to prepare the heart for Ramadan and beyond.”
-            </div>
+            <ReadMoreCollapsible section={Section.MORE_REVIEWS} titleType={TitleType.MORE_REVIEWS}>
+              <div>⭐⭐⭐⭐⭐ “Mashallah, this is excellent content.”</div>
+              <div>⭐⭐⭐⭐⭐ “Course was very inspiring and intuitive.”</div>
+              <div>
+                ⭐⭐⭐⭐⭐ “I kinda joined late but it surely did increase my knowledge and made me
+                reflect upon my actions. It is a great step and I wish more people to join it so
+                that they can also take benefit from it and try to improve their quality of life.”
+              </div>
+              <div>
+                ⭐⭐⭐⭐⭐ “It was extremely useful. It reminds us to act to act upon the manual
+                given to us by He Who is Exalted, High, and Mighty: Allah. Please do develop such
+                plans for other months like Rajab. Thanks!”
+              </div>
+              <div>
+                ⭐⭐⭐⭐⭐ “Not a single word in all the lessons didn't speak the truth. It was so
+                helpful, alhamdulilah. Quran.com is a wonderful website, and every person, muslim
+                and non-muslim, should use it. And, Inshallah, they will. Thank you for the help you
+                provided me.”
+              </div>
+              <div>
+                ⭐⭐⭐⭐⭐ “Important and vital read to prepare the heart for Ramadan and beyond.”
+              </div>
+            </ReadMoreCollapsible>
             <div>Start this learning plan now:</div>
             <div className={styles.ctaContainer}>
               <Button