fix: align single code block with the buttons (#2154)

* fix: align single code block with the buttons * fix: add justify space between code line and buttons for singleBlockCode * fix: handle the key warning * fix: fix alignment of single code line
unkeyed · Oct 8, 2024 · 69ede86 · 69ede86
1 parent 169842c
commit 69ede86
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/apps/www/components/blog/blog-code-block.tsx b/apps/www/components/blog/blog-code-block.tsx
@@ -97,27 +97,50 @@ export function BlogCodeBlockSingle({ className, children }: any) {
     document.body.appendChild(element); // Required for this to work in FireFox
     element.click();
   }
+
+  const isSingleLine = (block.children.match(/\n/g) || []).length < 2;
+
   return (
-    <div className={cn(CN_BLOG_CODE_BLOCK, className, "pl-4 pb-4")}>
-      <div className="flex flex-row justify-end gap-4 mt-2 mr-4 border-white/10 ">
-        <CopyButton value={copyData} />
-        <button
-          type="button"
-          aria-label="Download code"
-          className="p-0 m-0 align-top bg-transparent"
-          onClick={handleDownload}
+    <div className={cn(CN_BLOG_CODE_BLOCK, className, `${isSingleLine ? "p-4" : "pl-4 pb-4"}`)}>
+      <div className="flex flex-row justify-end gap-4 mt-2 mr-4 border-white/10">
+        {!isSingleLine && (
+          <>
+            <CopyButton value={copyData} />
+            <button
+              type="button"
+              aria-label="Download code"
+              className="p-0 m-0 align-top bg-transparent"
+              onClick={handleDownload}
+            >
+              <BlogCodeDownload />
+            </button>
+          </>
+        )}
+      </div>
+      <div className={`flex ${isSingleLine ? "items-center justify-between" : ""}`}>
+        <SyntaxHighlighter
+          language={block.className.replace(/language-/, "")}
+          style={darkTheme}
+          showLineNumbers={true}
+          highlighter={"hljs"}
         >
-          <BlogCodeDownload />
-        </button>
+          {block.children.trim()}
+        </SyntaxHighlighter>
+
+        {isSingleLine && (
+          <div className={cn("flex gap-4 border-white/10")}>
+            <CopyButton value={copyData} />
+            <button
+              type="button"
+              aria-label="Download code"
+              className="p-0 m-0 align-top bg-transparent"
+              onClick={handleDownload}
+            >
+              <BlogCodeDownload />
+            </button>
+          </div>
+        )}
       </div>
-      <SyntaxHighlighter
-        language={block.className.replace(/language-/, "")}
-        style={darkTheme}
-        showLineNumbers={true}
-        highlighter={"hljs"}
-      >
-        {block.children.trim()}
-      </SyntaxHighlighter>
     </div>
   );
 }
diff --git a/apps/www/components/blog/suggested-blogs.tsx b/apps/www/components/blog/suggested-blogs.tsx
@@ -19,8 +19,8 @@ export function SuggestedBlogs({ className, currentPostSlug }: BlogListProps): J
   return (
     <div>
       {posts.map((post) => (
-        <div className={cn("flex flex-col w-full mt-8 prose", className)}>
-          <Link href={post.url} key={post.url}>
+        <div key={post.url} className={cn("flex flex-col w-full mt-8 prose", className)}>
+          <Link href={post.url}>
             <div className="flex w-full">
               <div className="flex flex-col gap-2">
                 <Frame size="sm">