♻️ [devext] extract an Alert component

developer-extension/src/panel/components/alert.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import { Alert as MantineAlert, Center, Group, MantineProvider, Space } from '@mantine/core'
+
+export function Alert({
+  level,
+  title,
+  message,
+  button,
+}: {
+  level: 'warning' | 'error'
+  title?: string
+  message: string
+  button?: ReactNode
+}) {
+  const color = level === 'warning' ? ('orange' as const) : ('red' as const)
+  return (
+    <Center mt="xl">
+      <MantineAlert color={color} title={title}>
+        {message}
+        {button && (
+          <>
+            <Space h="sm" />
+            <MantineProvider theme={{ components: { Button: { defaultProps: { color } } } }}>
+              <Group position="right">{button}</Group>
+            </MantineProvider>
+          </>
+        )}
+      </MantineAlert>
+    </Center>
+  )
+}

developer-extension/src/panel/components/app.tsx

@@ -1,7 +1,8 @@
-import { Alert, Button, Center, Group, MantineProvider } from '@mantine/core'
+import { Button, MantineProvider } from '@mantine/core'
 import { useColorScheme } from '@mantine/hooks'
 import React, { Suspense, useState } from 'react'
 import { listenDisconnectEvent } from '../disconnectEvent'
+import { Alert } from './alert'
 
 import { Panel } from './panel'
 
@@ -30,19 +31,15 @@ export function App() {
 
 function DisconnectAlert() {
   return (
-    <Center
-      sx={{
-        height: '100vh',
-      }}
-    >
-      <Alert title="Extension disconnected!" color="red">
-        The extension has been disconnected. This can happen after an update.
-        <Group position="right">
-          <Button onClick={() => location.reload()} color="red">
-            Reload extension
-          </Button>
-        </Group>
-      </Alert>
-    </Center>
+    <Alert
+      level="error"
+      title="Extension disconnected!"
+      message="The extension has been disconnected. This can happen after an update."
+      button={
+        <Button onClick={() => location.reload()} color="red">
+          Reload extension
+        </Button>
+      }
+    />
   )
 }