+
+ { !isServiceError(secrets) && (
+
+
+
+ )}
+
+ )
+}
\ No newline at end of file
diff --git a/packages/web/src/app/secrets/secretsTable.tsx b/packages/web/src/app/secrets/secretsTable.tsx
new file mode 100644
index 00000000..94623bf5
--- /dev/null
+++ b/packages/web/src/app/secrets/secretsTable.tsx
@@ -0,0 +1,147 @@
+'use client';
+import { useEffect, useMemo, useState } from "react";
+import { getSecrets, createSecret } from "../../actions"
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { columns, SecretColumnInfo } from "./columns";
+import { DataTable } from "@/components/ui/data-table";
+import { isServiceError } from "@/lib/utils";
+import { useToast } from "@/components/hooks/use-toast";
+import { deleteSecret } from "../../actions"
+import { SecretsTableProps } from "./page";
+
+const formSchema = z.object({
+ key: z.string().min(2).max(40),
+ value: z.string().min(2).max(40),
+});
+
+
+export const SecretsTable = ({ initialSecrets }: SecretsTableProps) => {
+ const [secrets, setSecrets] = useState<{ createdAt: Date; key: string; }[]>(initialSecrets);
+ const { toast } = useToast();
+
+ const fetchSecretKeys = async () => {
+ const keys = await getSecrets();
+ if ('keys' in keys) {
+ setSecrets(keys);
+ } else {
+ console.error(keys);
+ }
+ };
+
+ useEffect(() => {
+ fetchSecretKeys();
+ }, []);
+
+ const form = useForm