import { Box, Checkbox, FormControlLabel, Skeleton, Typography } from '@mui/material';
import { PortableText, PortableTextProps } from '@portabletext/react';
import { useQuery } from '@tanstack/react-query';
interface InstructionsProps {
keyword: string;
}
const Instructions = ({ keyword }: InstructionsProps) => {
const { data, isLoading } = useQuery<{
result: { _id: string; html: PortableTextProps['value'] }[];
}>({
queryKey: [
'/Molo/Handler.Sanity.ashx',
{ query: `*[_type == "instruction" && "${keyword}" == keyword]` },
'postForm',
],
});
const instruction = data?.result?.[0];
return (
<Box sx={{ border: 1, borderColor: '#C7C8CA8F', p: 4 }}>
{isLoading && (
<Box className="space-y-2">
{Array.from({ length: 3 }).map((_, index) => (
<Skeleton variant="text" key={index} />
))}
</Box>
)}
{instruction?.html && (
<Box sx={{ '& ul': { m: 0, pl: 0.5 } }}>
<PortableText
components={{
listItem: {
bullet: ({ children }) => (
<Box>
<FormControlLabel
componentsProps={{
typography: {
color: 'text.darkGray',
variant: 'inherit',
fontWeight: 500,
},
}}
control={<Checkbox size="small" sx={{ p: 0.7, mr: 2 }} />}
label={children}
/>
</Box>
),
},
}}
value={instruction.html}
/>
</Box>
)}
</Box>
);
};
export default Instructions;