change appearance of example tasks (#975)

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -10,11 +10,6 @@ import { AxiosError } from "axios";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
-import {
-  ScrollArea,
-  ScrollAreaViewport,
-  ScrollBar,
-} from "@/components/ui/scroll-area";
 
 function createTemplateTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
@@ -48,12 +43,47 @@ function createTemplateTaskFromTaskGenerationParameters(
   };
 }
 
-const examplePrompts = [
-  "What is the top post on hackernews?",
-  "Navigate to Google Finance and search for AAPL",
-  "What is the top NYT bestseller?",
-  "What is the top ranked football team?",
-  "Find the top selling electrical connector on finditparts",
+const exampleCases = [
+  {
+    key: "finditparts",
+    label: "Find a product and add it to cart",
+  },
+  {
+    key: "geico",
+    label: "Geico - generate an insurance quote",
+  },
+  {
+    key: "job_application",
+    label: "Apply to a job",
+  },
+  {
+    key: "california_edd",
+    label: "California EDD",
+  },
+  {
+    key: "contact_us_forms",
+    label: "Fill a contact us form",
+  },
+  {
+    key: "bci_seguros",
+    label: "Generate an auto insurance quote",
+  },
+  {
+    key: "hackernews",
+    label: "Get the top post on Hackernews",
+  },
+  {
+    key: "AAPLStockPrice",
+    label: "Get the stock price of AAPL",
+  },
+  {
+    key: "NYTBestseller",
+    label: "Get the top NYT bestseller",
+  },
+  {
+    key: "topRankedFootballTeam",
+    label: "Get the top ranked football team",
+  },
 ];
 
 function PromptBox() {
@@ -150,26 +180,21 @@ function PromptBox() {
           </div>
         </div>
       </div>
-      <ScrollArea>
-        <ScrollAreaViewport className="h-full w-full rounded-[inherit]">
-          <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
-            {examplePrompts.map((examplePrompt) => {
-              return (
-                <div
-                  key={examplePrompt}
-                  className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
-                  onClick={() => {
-                    setPrompt(examplePrompt);
-                  }}
-                >
-                  {examplePrompt}
-                </div>
-              );
-            })}
-          </div>
-        </ScrollAreaViewport>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
+      <div className="flex flex-wrap justify-center gap-4 rounded-sm bg-slate-elevation1 p-4">
+        {exampleCases.map((example) => {
+          return (
+            <div
+              key={example.key}
+              className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
+              onClick={() => {
+                navigate(`/create/${example.key}`);
+              }}
+            >
+              {example.label}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }