zelda
/
zulip-notes-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update message view

This commit is contained in:
Admin 2025-05-23 16:33:53 +07:00
parent 3468a96c05
commit 044edab180
1 changed files with 52 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/message.tsx
View File

@ -37,56 +37,62 @@ export default function Message({ data, onDelete }: IMessageProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
console.log({ data });
return ( return (
<Paper <Paper
key={data.message} shadow="xs"
shadow="xs" radius="md"
radius="md" p="xs"
p="xs" withBorder
withBorder className={`flex items-center relative gap-3 w-full transition-all duration-300 ${
className={`flex items-center relative gap-3 w-full transition-all duration-300 ${ animation ? "animate-pulse !bg-blue-100" : ""
animation ? "animate-pulse !bg-blue-100" : "" }`}
}`} >
> <div className="flex items-center w-full flex-col">
<div className="flex items-center w-full flex-col"> <Box className="flex items-center justify-between w-full">
<Box className="flex items-center justify-between w-full"> <div className="text-xs font-bold">
<div className="text-xs font-bold"> {data.recipient.length > 0 && <span>{data.recipient}</span>}
{data.recipient.length > 0 && <span>{data.recipient}</span>} </div>
</div> <span className="text-xs">
<span className="text-xs"> {dayjs(data.time).format("HH:mm D/M/YYYY")}
{dayjs(data.time).format("HH:mm D/M/YYYY")} </span>
</span> </Box>
</Box>
<Box className="w-full flex items-center"> <Box className="w-full flex items-center">
<Textarea <Textarea
defaultValue={messageContent} defaultValue={messageContent}
value={messageContent} value={messageContent}
className="flex-1" className="flex-1"
variant="unstyled" variant="unstyled"
readOnly readOnly
/> />
<Box className="flex gap-2"> <Box className="flex gap-2">
<Tooltip label="View"> <Tooltip label="View">
<ActionIcon onClick={toggle} variant="light" size="sm"> <ActionIcon onClick={toggle} variant="light" size="sm">
{show ? <IconEyeOff size={16} /> : <IconEye size={16} />} {show ? <IconEyeOff size={16} /> : <IconEye size={16} />}
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Tooltip label="Delete"> <Tooltip label="Delete">
<ActionIcon <ActionIcon
onClick={onDelete} onClick={onDelete}
variant="light" variant="light"
size="sm" size="sm"
color="red" color="red"
> >
<IconTrash size={16} /> <IconTrash size={16} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
</Box>
</Box> </Box>
</Box>
<Box className="flex items-center justify-start w-full"><span className="text-xs text-left">From: {data.sender}</span></Box> <Box className="flex items-center justify-start w-full">
</div> <span className="text-xs text-left">
</Paper> {data.sender.split("@")[0]
? `From: ${data.sender.split("@")[0]}`
: ""}
</span>
</Box>
</div>
</Paper>
); );
} }