Tasks page implementation (#120)

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

@@ -0,0 +1,49 @@
+import { useId, useState } from "react";
+import { CreateNewTaskForm } from "./CreateNewTaskForm";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { SampleCase } from "../types";
+import { getSampleForInitialFormValues } from "../data/sampleTaskData";
+import { Label } from "@/components/ui/label";
+
+function CreateNewTask() {
+  const [selectedCase, setSelectedCase] = useState<SampleCase>("geico");
+  const caseInputId = useId();
+
+  return (
+    <div className="flex flex-col gap-6 px-6">
+      <div className="flex gap-4 items-center">
+        <Label htmlFor={caseInputId} className="whitespace-nowrap">
+          Select a sample:
+        </Label>
+        <Select
+          value={selectedCase}
+          onValueChange={(value) => {
+            setSelectedCase(value as SampleCase);
+          }}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a case" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="geico">Geico</SelectItem>
+            <SelectItem value="finditparts">Finditparts</SelectItem>
+            <SelectItem value="california_edd">California_EDD</SelectItem>
+            <SelectItem value="bci_seguros">bci_seguros</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <CreateNewTaskForm
+        key={selectedCase}
+        initialValues={getSampleForInitialFormValues(selectedCase)}
+      />
+    </div>
+  );
+}
+
+export { CreateNewTask };