Credential selector add credential option (#1926)

skyvern-frontend/src/routes/credentials/CredentialsPage.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@/components/ui/button";
+import { CardStackIcon, PlusIcon } from "@radix-ui/react-icons";
+import {
+  CredentialModalTypes,
+  useCredentialModalState,
+} from "./useCredentialModalState";
+import { CredentialsModal } from "./CredentialsModal";
+import { CredentialsList } from "./CredentialsList";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { KeyIcon } from "@/components/icons/KeyIcon";
+
+const subHeaderText =
+  "Securely store your passwords or credit cards here to link them throughout your workflows.";
+
+function CredentialsPage() {
+  const { setIsOpen, setType } = useCredentialModalState();
+  return (
+    <div className="space-y-5">
+      <h1 className="text-2xl">Credentials</h1>
+      <div className="flex items-center justify-between">
+        <div className="w-96 text-sm text-slate-300">{subHeaderText}</div>
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button>
+              <PlusIcon className="mr-2 size-6" /> Add
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-48">
+            <DropdownMenuItem
+              onSelect={() => {
+                setIsOpen(true);
+                setType(CredentialModalTypes.PASSWORD);
+              }}
+              className="cursor-pointer"
+            >
+              <KeyIcon className="mr-2 size-4" />
+              Password
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => {
+                setIsOpen(true);
+                setType(CredentialModalTypes.CREDIT_CARD);
+              }}
+              className="cursor-pointer"
+            >
+              <CardStackIcon className="mr-2 size-4" />
+              Credit Card
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <CredentialsList />
+      <CredentialsModal />
+    </div>
+  );
+}
+
+export { CredentialsPage };