docs: make code blocks collapsible (#7606)

* added collapsible code feature

* fixed side shadow

* fix build errors

* change design

* make code blocks collapsible

www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx

@@ -12,6 +12,9 @@ export type CodeBlockActionsProps = {
   source: string
   isSingleLine?: boolean
   inHeader: boolean
+  showGradientBg?: boolean
+  inInnerCode?: boolean
+  isCollapsed: boolean
   canShowApiTesting?: boolean
   blockStyle: CodeBlockStyle
   onApiTesting: React.Dispatch<React.SetStateAction<boolean>>
@@ -22,6 +25,9 @@ export type CodeBlockActionsProps = {
 export const CodeBlockActions = ({
   source,
   inHeader,
+  showGradientBg = true,
+  inInnerCode = false,
+  isCollapsed,
   isSingleLine = false,
   canShowApiTesting = false,
   blockStyle,
@@ -45,65 +51,87 @@ export const CodeBlockActions = ({
   return (
     <div
       className={clsx(
-        "absolute hidden md:flex md:justify-end",
-        "xs:rounded xs:absolute xs:right-0 xs:top-0 xs:w-[calc(10%+24px)] xs:h-full xs:bg-transparent",
-        !inHeader && [
-          "md:right-docs_0.5",
-          isSingleLine && "md:top-docs_0.25",
-          !isSingleLine && "md:top-docs_0.5",
-        ],
-        inHeader && "md:right-docs_1 md:top-docs_0.5"
+        "absolute hidden md:block",
+        "xs:rounded xs:absolute xs:right-0 xs:top-0 xs:w-[calc(17%+10px)] xs:h-full"
       )}
     >
-      {canShowApiTesting && (
-        <Tooltip
-          text="Test API"
-          tooltipClassName="font-base"
-          className={clsx(
-            "h-fit",
-            !inHeader && "p-[6px]",
-            inHeader && "px-[6px] pb-[6px]"
-          )}
-        >
-          <PlaySolid
-            className={clsx("cursor-pointer", iconColor)}
-            onClick={() => onApiTesting(true)}
-          />
-        </Tooltip>
-      )}
-      {!noReport && (
-        <Tooltip
-          text="Report Issue"
-          tooltipClassName="font-base"
-          className={clsx(
-            "h-fit",
-            !inHeader && "p-[6px]",
-            inHeader && "px-[6px] pb-[6px]"
-          )}
-        >
-          <Link
-            href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
-              `Docs(Code Issue): `
-            )}`}
-            target="_blank"
+      <div
+        className={clsx(
+          !inHeader &&
+            showGradientBg && [
+              inInnerCode &&
+                "xs:bg-subtle-code-fade-right-to-left dark:xs:bg-subtle-code-fade-right-to-left-dark",
+              !inInnerCode &&
+                "xs:bg-base-code-fade-right-to-left dark:xs:bg-base-code-fade-right-to-left-dark",
+            ],
+          (inHeader || !showGradientBg) && "xs:bg-transparent",
+          "z-[9] w-full h-full absolute top-0 left-0"
+        )}
+      />
+      <div
+        className={clsx(
+          "md:flex md:justify-end z-[11] relative",
+          !inHeader && [
+            "md:pr-docs_0.5",
+            isCollapsed && "md:pt-docs_2.5",
+            !isCollapsed && [
+              isSingleLine && "md:pt-docs_0.25",
+              !isSingleLine && "md:pt-docs_0.5",
+            ],
+          ],
+          inHeader && "md:pr-docs_1 md:pt-docs_0.5"
+        )}
+      >
+        {canShowApiTesting && (
+          <Tooltip
+            text="Test API"
+            tooltipClassName="font-base"
             className={clsx(
-              "bg-transparent border-none cursor-pointer rounded",
-              "[&:not(:first-child)]:ml-docs_0.5",
-              "inline-flex justify-center items-center invisible xs:visible"
+              "h-fit",
+              !inHeader && "p-[6px]",
+              inHeader && "px-[6px] pb-[6px]"
             )}
-            rel="noreferrer"
           >
-            <ExclamationCircle className={clsx(iconColor)} />
-          </Link>
-        </Tooltip>
-      )}
-      {!noCopy && (
-        <CodeBlockCopyAction
-          source={source}
-          inHeader={inHeader}
-          iconColor={iconColor}
-        />
-      )}
+            <PlaySolid
+              className={clsx("cursor-pointer", iconColor)}
+              onClick={() => onApiTesting(true)}
+            />
+          </Tooltip>
+        )}
+        {!noReport && (
+          <Tooltip
+            text="Report Issue"
+            tooltipClassName="font-base"
+            className={clsx(
+              "h-fit",
+              !inHeader && "p-[6px]",
+              inHeader && "px-[6px] pb-[6px]"
+            )}
+          >
+            <Link
+              href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
+                `Docs(Code Issue): `
+              )}`}
+              target="_blank"
+              className={clsx(
+                "bg-transparent border-none cursor-pointer rounded",
+                "[&:not(:first-child)]:ml-docs_0.5",
+                "inline-flex justify-center items-center invisible xs:visible"
+              )}
+              rel="noreferrer"
+            >
+              <ExclamationCircle className={clsx(iconColor)} />
+            </Link>
+          </Tooltip>
+        )}
+        {!noCopy && (
+          <CodeBlockCopyAction
+            source={source}
+            inHeader={inHeader}
+            iconColor={iconColor}
+          />
+        )}
+      </div>
     </div>
   )
 }