64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
'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';
|
|
|
|
import { logger } from '@/lib/default-logger';
|
|
import { toast } from '@/components/core/toaster';
|
|
|
|
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>('');
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [showError, setShowError] = React.useState<boolean>(false);
|
|
|
|
React.useEffect(() => {
|
|
try {
|
|
setState(funcHelloworld('hello'));
|
|
} catch (error) {
|
|
setShowError(true);
|
|
}
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
if (loading) return <>Loading</>;
|
|
if (showError) return <>Error</>;
|
|
|
|
// you should obey react/jsx-no-useless-fragment
|
|
return (
|
|
<Box>
|
|
{state} <InnerComponent />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// RULES: component should be exported
|
|
export default MainComponent;
|