File size: 2,155 Bytes
0bfe2e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
'use client';
import { Button } from '@/components/ui/button/button';
import { cn } from '@/components/ui/core/styling';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import React from 'react';

interface LuffyErrorProps {
  children?: React.ReactNode;
  className?: string;
  reset?: () => void;
  title?: string | null;
  showRefreshButton?: boolean;
}

export const LuffyError: React.FC<LuffyErrorProps> = (props) => {
  const {
    children,
    reset,
    className,
    title = 'Oops!',
    showRefreshButton = false,
    ...rest
  } = props;

  const router = useRouter();

  return (
    <>
      <div
        data-luffy-error
        className={cn(
          'w-full flex flex-col items-center mt-10 space-y-4',
          className
        )}
      >
        {
          <div
            data-luffy-error-image-container
            className="size-[8rem] mx-auto flex-none rounded-[--radius-md] object-cover object-center relative overflow-hidden"
          >
            <Image
              data-luffy-error-image
              src="/logo.png"
              alt={''}
              fill
              quality={100}
              priority
              sizes="10rem"
              className="object-contain object-top"
            />
          </div>
        }
        <div data-luffy-error-content className="text-center space-y-4">
          {!!title && <h3 data-luffy-error-title>{title}</h3>}
          <div data-luffy-error-content-children>{children}</div>
          <div data-luffy-error-content-buttons>
            {showRefreshButton && !reset && (
              <Button
                data-luffy-error-content-button-refresh
                intent="warning-subtle"
                onClick={() => router.refresh()}
              >
                Retry
              </Button>
            )}
            {!!reset && (
              <Button
                data-luffy-error-content-button-reset
                intent="warning-subtle"
                onClick={reset}
              >
                Retry
              </Button>
            )}
          </div>
        </div>
      </div>
    </>
  );
};