From 7937b6b2d639a7cbe94566bfcf32a03a5d43b447 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 28 Sep 2020 20:24:41 +0530
Subject: [PATCH] feat(completion): Comp SourceSnippet - add compact layout for
 one-line related code

---
 .../CompletionCardSourceSnippet.tsx           | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/CompletionCard/CompletionCardSourceSnippet.tsx b/src/components/CompletionCard/CompletionCardSourceSnippet.tsx
index db28f61..b40e98a 100644
--- a/src/components/CompletionCard/CompletionCardSourceSnippet.tsx
+++ b/src/components/CompletionCard/CompletionCardSourceSnippet.tsx
@@ -8,18 +8,31 @@ import { getCodeTextFromCompletion } from "./utils";
 export function CompletionCardSourceSnippet() {
   const { completionDetail, code } = useCompletionCardContext();
 
+  const relatedCode = getCodeTextFromCompletion(code, completionDetail);
+
+  const hasNewline = relatedCode.includes("\n");
+
+  const directionEmojiJSX = hasNewline ? (
+    <span role="img" aria-label="See below">
+      ⤵️
+    </span>
+  ) : (
+    <span role="img" aria-label="See to the right" className="pr-1">
+      👉
+    </span>
+  );
+
+  const parentClassname = hasNewline ? "" : "flex flex-row items-center";
+  const inlineCodeExtraClassName = hasNewline
+    ? "py-2 lg:pl-3 lg:pr-8 lg:py-3"
+    : "";
+
   return (
-    <div className="">
-      <div className="my-1">
-        From source&nbsp;
-        <span role="img" aria-label="See below">
-          ⤵️
-        </span>
-        &nbsp;
-      </div>
+    <div className={parentClassname}>
+      <div className="my-1">From source&nbsp;{directionEmojiJSX}&nbsp;</div>
       <InlineResultViewer
-        className="px-1 py-1 my-1 rounded md:w-fit-content"
-        code={getCodeTextFromCompletion(code, completionDetail)}
+        className={`px-1 my-1 rounded md:w-fit-content ${inlineCodeExtraClassName}`}
+        code={relatedCode}
       />
     </div>
   );