fix: fix contained blocks

AmazeeLabs · May 15, 2024 · 00602a5 · 00602a5
1 parent 6673c0d
commit 00602a5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 82 deletions.
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx
@@ -50,51 +50,53 @@ const theme: CustomFlowbiteTheme = {
 
 export function BlockAccordion(props: BlockAccordionFragment) {
   return (
-    <Flowbite theme={{ theme }}>
-      <Accordion collapseAll>
-        {props.items.map((item, index) => (
-          <Accordion.Panel key={index}>
-            <Accordion.Title>
-              <span className="flex items-center">
-                {item.icon && <AccordionIcon icon={item.icon} />} {item.title}
-              </span>
-            </Accordion.Title>
-            <Accordion.Content className="space-y-2">
-              <div className="sm:w-full md:w-4/5">
-                {item.textContent?.markup && (
-                  <Html
-                    plugins={[unorderedItems]}
-                    components={{
-                      li: ({
-                        unordered,
-                        children,
-                        className,
-                        ...props
-                      }: PropsWithChildren<{
-                        unordered?: boolean;
-                        className?: string;
-                      }>) => {
-                        return (
-                          <li
-                            {...props}
-                            className={clsx(className, {
-                              'ml-5 mt-1 mb-1 list-disc': unordered,
-                            })}
-                          >
-                            {children}
-                          </li>
-                        );
-                      },
-                    }}
-                    markup={item.textContent.markup}
-                  />
-                )}
-              </div>
-            </Accordion.Content>
-          </Accordion.Panel>
-        ))}
-      </Accordion>
-    </Flowbite>
+    <div className="container-content">
+      <Flowbite theme={{ theme }}>
+        <Accordion collapseAll>
+          {props.items.map((item, index) => (
+            <Accordion.Panel key={index}>
+              <Accordion.Title>
+                <span className="flex items-center">
+                  {item.icon && <AccordionIcon icon={item.icon} />} {item.title}
+                </span>
+              </Accordion.Title>
+              <Accordion.Content className="space-y-2">
+                <div className="sm:w-full md:w-4/5">
+                  {item.textContent?.markup && (
+                    <Html
+                      plugins={[unorderedItems]}
+                      components={{
+                        li: ({
+                          unordered,
+                          children,
+                          className,
+                          ...props
+                        }: PropsWithChildren<{
+                          unordered?: boolean;
+                          className?: string;
+                        }>) => {
+                          return (
+                            <li
+                              {...props}
+                              className={clsx(className, {
+                                'ml-5 mt-1 mb-1 list-disc': unordered,
+                              })}
+                            >
+                              {children}
+                            </li>
+                          );
+                        },
+                      }}
+                      markup={item.textContent.markup}
+                    />
+                  )}
+                </div>
+              </Accordion.Content>
+            </Accordion.Panel>
+          ))}
+        </Accordion>
+      </Flowbite>
+    </div>
   );
 }
 

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
@@ -3,45 +3,47 @@ import React from 'react';
 
 export function BlockQuote(props: BlockQuoteFragment) {
   return (
-    <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928] container-content">
-      <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
-        <svg
-          width="32"
-          height="24"
-          viewBox="0 0 32 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          role="img"
-          aria-labelledby="quote-svg-title"
-        >
-          <title id="quote-svg-title">Quote Symbol</title>
-          <path
-            d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
-            fill="#9CA3AF"
-          />
-        </svg>
-        <p>{props.quote && <Html markup={props.quote} />}</p>
-        <div className="flex not-prose items-center flex-wrap">
-          {props.image && (
-            <Image
-              className="w-6 h-6 rounded-full object-contain mr-3.5 "
-              source={props.image.source}
-              alt={props.image.alt || 'Author image'}
+    <div className="container-content">
+      <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
+        <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
+          <svg
+            width="32"
+            height="24"
+            viewBox="0 0 32 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            role="img"
+            aria-labelledby="quote-svg-title"
+          >
+            <title id="quote-svg-title">Quote Symbol</title>
+            <path
+              d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+              fill="#9CA3AF"
             />
-          )}
-          <div className="not-italic text-base font-semibold">
-            {props.author && <p className="not-prose">{props.author}</p>}
+          </svg>
+          <p>{props.quote && <Html markup={props.quote} />}</p>
+          <div className="flex not-prose items-center flex-wrap">
+            {props.image && (
+              <Image
+                className="w-6 h-6 rounded-full object-contain mr-3.5 "
+                source={props.image.source}
+                alt={props.image.alt || 'Author image'}
+              />
+            )}
+            <div className="not-italic text-base font-semibold">
+              {props.author && <p className="not-prose">{props.author}</p>}
+            </div>
+            {props.role && (
+              <p className="not-prose flex">
+                <span className="ml-3 text-base">/</span>
+                <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
+                  {props.role}
+                </span>
+              </p>
+            )}
           </div>
-          {props.role && (
-            <p className="not-prose flex">
-              <span className="ml-3 text-base">/</span>
-              <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
-                {props.role}
-              </span>
-            </p>
-          )}
-        </div>
-      </blockquote>
+        </blockquote>
+      </div>
     </div>
   );
 }