feat: update Error to use click event handler

apps/web/.eslintrc.json

@@ -34,6 +34,7 @@
     "@typescript-eslint/no-shadow": "error",
     "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
     "@typescript-eslint/no-unnecessary-condition": "error",
+    "@typescript-eslint/no-misused-promises": ["error", { "checksVoidReturn": { "attributes": false } }],
     "@typescript-eslint/strict-boolean-expressions": ["error", { "allowString": false }],
     "complexity": ["error", 20],
     "eqeqeq": ["error", "smart"],

apps/web/vibes/soul/examples/pages/error/index.tsx

@@ -48,6 +48,14 @@ const paymentIconsArray: React.ReactNode[] = [
   <Bitcoin key="Bitcoin" />,
 ];
 
+async function ctaAction() {
+  'use server';
+
+  await new Promise<void>((resolve) => {
+    setTimeout(() => resolve(), 1000);
+  });
+}
+
 export default function Preview() {
   return (
     <>
@@ -67,7 +75,7 @@ export default function Preview() {
         searchHref="#"
       />
 
-      <Error cta={{ label: 'Try again', href: '#' }} />
+      <Error ctaAction={ctaAction} />
 
       <Subscribe
         action={action}

apps/web/vibes/soul/sections/error/index.tsx

@@ -1,20 +1,17 @@
-import { ButtonLink } from '@/vibes/soul/primitives/button-link';
-
-interface Link {
-  label: string;
-  href: string;
-}
+import { Button } from '@/vibes/soul/primitives/button';
 
 interface Props {
   title?: string;
   subtitle?: string;
-  cta?: Link;
+  ctaLabel?: string;
+  ctaAction?: () => void | Promise<void>;
 }
 
 export function Error({
   title = 'Something went wrong!',
   subtitle = 'Please try again or contact our support team for assistance.',
-  cta,
+  ctaLabel = 'Try again',
+  ctaAction,
 }: Props) {
   return (
     <section className="@container">
@@ -24,10 +21,12 @@ export function Error({
         </h1>
         <p className="text-lg text-contrast-500">{subtitle}</p>
 
-        {cta !== undefined && cta.href !== '' && cta.label !== '' && (
-          <ButtonLink className="mt-8" href={cta.href} size="large" type="button" variant="primary">
-            {cta.label}
-          </ButtonLink>
+        {ctaAction && (
+          <form action={ctaAction}>
+            <Button className="mt-8" size="large" type="submit" variant="primary">
+              {ctaLabel}
+            </Button>
+          </form>
         )}
       </div>
     </section>