update page,

002_source/cms/src/components/dashboard/error/_PROMPT.MD

@@ -0,0 +1,9 @@
+# task
+
+## instruction
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/_helloworld/index.tsx`
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/error/index.tsx`
+
+please draft a tsx for showing error to user thanks,

002_source/cms/src/components/dashboard/error/index.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { Alert, AlertTitle, Collapse, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { Warning as WarningIcon } from '@phosphor-icons/react/dist/ssr/Warning';
+
+interface PropsError {
+  message: string;
+  code?: string | number;
+  details?: string;
+  severity?: 'error' | 'warning' | 'info' | 'success';
+}
+
+// RULES: Sample of function
+function formatErrorMessage(message: string, code?: string | number): string {
+  return code ? `[${code}] ${message}` : message;
+}
+
+// RULES: sample of inner component
+function ErrorDetails({ details }: { details: string }): React.JSX.Element {
+  const [expanded, setExpanded] = React.useState<boolean>(false);
+
+  return (
+    <Box>
+      <Typography
+        variant="body2"
+        sx={{
+          cursor: 'pointer',
+          textDecoration: 'underline',
+          mt: 1,
+        }}
+        onClick={() => {
+          setExpanded(!expanded);
+        }}
+      >
+        {expanded ? 'Hide Details' : 'Show Details'}
+      </Typography>
+
+      <Collapse in={expanded}>
+        <Box sx={{ mt: 1, p: 1, bgcolor: 'background.paper' }}>
+          <Typography variant="body2" component="pre" sx={{ whiteSpace: 'pre-wrap' }}>
+            {details}
+          </Typography>
+        </Box>
+      </Collapse>
+    </Box>
+  );
+}
+
+// RULES: naming should be in Pascal case
+// RULES: sample of main component
+function ErrorDisplay({ message, code, details, severity = 'error' }: PropsError): React.JSX.Element {
+  const [formattedMessage, setFormattedMessage] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setFormattedMessage(formatErrorMessage(message, code));
+  }, [message, code]);
+
+  return (
+    <Box sx={{ p: 2, maxWidth: 800, width: '100%' }}>
+      <Alert
+        severity={severity}
+        icon={<WarningIcon weight="fill" />}
+        sx={{
+          '& .MuiAlert-message': {
+            width: '100%',
+          },
+        }}
+      >
+        <AlertTitle>{code ? `Error ${code}` : 'Error'}</AlertTitle>
+
+        <Typography variant="body1" gutterBottom>
+          {formattedMessage}
+        </Typography>
+
+        {details && <ErrorDetails details={details} />}
+      </Alert>
+    </Box>
+  );
+}
+
+// RULES: component should be exported
+export default ErrorDisplay;