style changes

shiksha-platform · Aug 23, 2022 · eec8498 · eec8498
1 parent 21e967a
commit eec8498
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/packages/content-pages/src/components/CollapsibleBlockComponent.js b/packages/content-pages/src/components/CollapsibleBlockComponent.js
@@ -3,6 +3,7 @@ import { BodyMedium, Collapsible } from "@shiksha/common-lib";
 const CollapsibleBlockComponent = ({ collapsibleHeader, collapsibleContent }) => {
   return (
     <Collapsible
+      defaultCollapse
       header={collapsibleHeader}
       children={<BodyMedium py="4">{collapsibleContent}</BodyMedium>}
       p="3"

diff --git a/packages/content-pages/src/pages/ContentPage.js b/packages/content-pages/src/pages/ContentPage.js
@@ -5,28 +5,20 @@ import CollapsibleBlockComponent from "components/CollapsibleBlockComponent";
 import ImageBlockComponent from "components/ImageBlockComponent";
 import RichtextBlockComponent from "components/RichtextBlockComponent";
 import { useEffect, useState } from "react";
-import {contentPagesRegistryService} from "@shiksha/common-lib";
+import { contentPagesRegistryService } from "@shiksha/common-lib";
 
 export default function ContentPage() {
   const { slug } = useParams();
   console.log(slug);
 
-  const [pageData,setPageData]=useState([]);
+  const [pageData, setPageData] = useState([]);
 
-  useEffect(()=>{
-    contentPagesRegistryService.getContentPageData(slug).then((res)=>{
+  useEffect(() => {
+    contentPagesRegistryService.getContentPageData(slug).then((res) => {
       setPageData(res[0]);
       console.log(res[0]);
-    })
-  },[]);
-  const collapsibleProps = {
-    collapsibleHeader: "Sample question",
-    collapsibleContent: "Sample answer",
-  };
-  const imageProps = {
-    src: "https://picsum.photos/600/400",
-    align: "center",
-  };
+    });
+  }, []);
   return (
     <Layout
       _footer={{
@@ -60,20 +52,36 @@ export default function ContentPage() {
       }}
     >
       <h1>{pageData?.title}</h1>
-      {
-
-        pageData?.blocks?.map((val,idx)=>{
-
-          switch(val?.blockType){
-            case 'richtext':
-              return <RichtextBlockComponent initialData={JSON.parse(val?.blockData?.richtextData)}></RichtextBlockComponent>
-            case 'image':
-              return <ImageBlockComponent src={val?.blockData?.imgSrc}></ImageBlockComponent>
-            case 'collapsible':
-              return <CollapsibleBlockComponent {...val?.blockData}></CollapsibleBlockComponent>
-          }
-        })
-      }
+      <VStack width="100%" spacing="4" px="10">
+      {pageData?.blocks?.map((val, idx) => {
+        switch (val?.blockType) {
+          case "richtext":
+            return (
+              <Box key={idx} mb="2">
+                <RichtextBlockComponent
+                  initialData={JSON.parse(val?.blockData?.richtextData)}
+                ></RichtextBlockComponent>
+              </Box>
+            );
+          case "image":
+            return (
+              <Box key={idx} mb="2">
+              <ImageBlockComponent
+                src={val?.blockData?.imgSrc}
+              ></ImageBlockComponent>
+              </Box>
+            );
+          case "collapsible":
+            return (
+              <Box key={idx} mb="2">
+              <CollapsibleBlockComponent
+                {...val?.blockData}
+              ></CollapsibleBlockComponent>
+              </Box>
+            );
+        }
+      })}
+      </VStack>
     </Layout>
   );
 }