feat: update Error to use click event handler

makeswift · Dec 31, 2024 · 01f71c9 · 01f71c9
1 parent dcd193c
commit 01f71c9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/apps/web/vibes/soul/examples/pages/error/index.tsx b/apps/web/vibes/soul/examples/pages/error/index.tsx
@@ -67,7 +67,7 @@ export default function Preview() {
         searchHref="#"
       />
 
-      <Error cta={{ label: 'Try again', href: '#' }} />
+      <Error ctaAction={() => null} />
 
       <Subscribe
         action={action}

diff --git a/apps/web/vibes/soul/sections/error/index.tsx b/apps/web/vibes/soul/sections/error/index.tsx
@@ -1,20 +1,21 @@
-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;
+}
+
+function defaultAction() {
+  window.location.reload();
 }
 
 export function Error({
   title = 'Something went wrong!',
   subtitle = 'Please try again or contact our support team for assistance.',
-  cta,
+  ctaLabel = 'Try again',
+  ctaAction = defaultAction,
 }: Props) {
   return (
     <section className="@container">
@@ -24,11 +25,11 @@ 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>
-        )}
+        <form action={ctaAction}>
+          <Button className="mt-8" size="large" type="submit" variant="primary">
+            {ctaLabel}
+          </Button>
+        </form>
       </div>
     </section>
   );