55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import HowToVoteIcon from '@mui/icons-material/HowToVote';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { nextcloudApi } from '../../services/nextcloud';
|
|
|
|
interface PollMessageContentProps {
|
|
roomToken: string;
|
|
pollId: number;
|
|
pollName: string;
|
|
isOwnMessage: boolean;
|
|
}
|
|
|
|
const PollMessageContent: React.FC<PollMessageContentProps> = ({ roomToken, pollId, pollName, isOwnMessage }) => {
|
|
const { data: poll } = useQuery({
|
|
queryKey: ['nextcloud', 'poll', roomToken, pollId],
|
|
queryFn: () => nextcloudApi.getPollDetails(roomToken, pollId),
|
|
staleTime: 60_000,
|
|
});
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
mt: 0.5,
|
|
p: 1,
|
|
borderRadius: 1,
|
|
border: '1px solid',
|
|
borderColor: isOwnMessage ? 'rgba(255,255,255,0.3)' : 'divider',
|
|
bgcolor: isOwnMessage ? 'rgba(255,255,255,0.1)' : 'action.hover',
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
|
|
<HowToVoteIcon sx={{ fontSize: '1rem', opacity: 0.7 }} />
|
|
<Typography variant="caption" sx={{ opacity: 0.7 }}>Abstimmung</Typography>
|
|
</Box>
|
|
<Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
|
|
{poll?.question ?? pollName}
|
|
</Typography>
|
|
{poll?.options && poll.options.slice(0, 4).map((opt, idx) => (
|
|
<Typography key={idx} variant="caption" sx={{ display: 'block', opacity: 0.8 }}>
|
|
• {opt}
|
|
</Typography>
|
|
))}
|
|
{poll?.options && poll.options.length > 4 && (
|
|
<Typography variant="caption" sx={{ opacity: 0.6 }}>
|
|
+{poll.options.length - 4} weitere Optionen
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default PollMessageContent;
|