update page,

002_source/cms/src/components/_helloworld/index.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import { Typography } from '@mui/material';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import { Box } from '@mui/system';
+import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
+
+interface PropsHelloworld {
+  message: string;
+}
+
+// RULES: Sample of function
+function funcHelloworld(hello: string): string {
+  const helloworld: PropsHelloworld = { message: hello };
+  const output = `${helloworld.message} world!`;
+
+  return output;
+}
+
+// RULES: sample of inner component
+function InnerComponent(): React.JSX.Element {
+  return (
+    <Box>
+      <Typography sx={{ color: 'red' }}>inner component</Typography>
+      <ListItemIcon />
+      <TrashIcon />
+    </Box>
+  );
+}
+
+// RULES: naming should be in Pascal case
+// RULES: sample of main component
+function MainComponent(): React.JSX.Element {
+  const [state, setState] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setState(funcHelloworld('hello'));
+  }, []);
+
+  // you should obey react/jsx-no-useless-fragment
+  return (
+    <Box>
+      {state} <InnerComponent />
+    </Box>
+  );
+}
+
+// RULES: component should be exported
+export default MainComponent;