Saving tasks in UI (#346)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

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

@@ -0,0 +1,86 @@
+import { SampleCase } from "../types";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { useNavigate } from "react-router-dom";
+import { SavedTasks } from "./SavedTasks";
+import { getSample } from "../data/sampleTaskData";
+
+const templateSamples: {
+  [key in SampleCase]: {
+    title: string;
+    description: string;
+  };
+} = {
+  blank: {
+    title: "Blank",
+    description: "Create task from a blank template",
+  },
+  geico: {
+    title: "Geico",
+    description: "Generate an auto insurance quote",
+  },
+  finditparts: {
+    title: "Finditparts",
+    description: "Find a product and add it to cart",
+  },
+  california_edd: {
+    title: "California_EDD",
+    description: "Fill the employer services online enrollment form",
+  },
+  bci_seguros: {
+    title: "bci_seguros",
+    description: "Generate an auto insurance quote",
+  },
+};
+
+function TaskTemplates() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-6xl mx-auto px-8">
+      <section className="py-4">
+        <header>
+          <h1 className="text-3xl">Skyvern Templates</h1>
+        </header>
+        <Separator className="mt-2 mb-8" />
+        <div className="grid grid-cols-4 gap-4">
+          {Object.entries(templateSamples).map(([sampleKey, sample]) => {
+            return (
+              <Card key={sampleKey}>
+                <CardHeader>
+                  <CardTitle>{sample.title}</CardTitle>
+                  <CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
+                    {getSample(sampleKey as SampleCase).url}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent
+                  className="h-48 hover:bg-muted/40 cursor-pointer"
+                  onClick={() => {
+                    navigate(sampleKey);
+                  }}
+                >
+                  {sample.description}
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </section>
+      <section className="py-4">
+        <header>
+          <h1 className="text-3xl">Your Templates</h1>
+        </header>
+        <Separator className="mt-2 mb-8" />
+        <SavedTasks />
+      </section>
+    </div>
+  );
+}
+
+export { TaskTemplates };