Tristan Yang
59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
import { FC, FormEvent } from "react";
|
|
import styled from "styled-components";
|
|
import usePinMessage from "../../../common/hook/usePinMessage";
|
|
import IconSurprise from "../../../assets/icons/emoji.surprise.svg";
|
|
import IconClose from "../../../assets/icons/close.svg";
|
|
import { useTranslation } from "react-i18next";
|
|
import PinnedMessage from "../../../common/component/PinnedMessage";
|
|
const Styled = styled.div`
|
|
.preview {
|
|
background: none;
|
|
.down img {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
`;
|
|
type Props = {
|
|
id: number;
|
|
};
|
|
const PinList: FC<Props> = ({ id }: Props) => {
|
|
const { t } = useTranslation("chat");
|
|
const { pins, unpinMessage, canPin } = usePinMessage(id);
|
|
const handleUnpin = (evt: FormEvent<HTMLButtonElement>) => {
|
|
const { mid } = evt.currentTarget.dataset;
|
|
if (!mid) return;
|
|
unpinMessage(+mid);
|
|
};
|
|
const noPins = pins.length == 0;
|
|
return (
|
|
<Styled className="p-4 drop-shadow-md overflow-y-scroll max-h-[90vh] min-w-[486px] rounded-xl bg-gray-50">
|
|
<h4 className=" text-gray-600 mb-4 font-semibold">{t("pinned_msg")}({pins.length})</h4>
|
|
{noPins ? (
|
|
<div className="flex flex-col items-center gap-2 w-full p-4">
|
|
<IconSurprise />
|
|
<div className="w-60 font-semibold text-gray-500 text-center">{t("pin_empty_tip")}</div>
|
|
</div>
|
|
) : (
|
|
<ul className="flex flex-col gap-2">
|
|
{pins.map((data) => {
|
|
return (
|
|
<li key={data.mid} className="group relative border border-solid border-slate-100 rounded-md ">
|
|
<PinnedMessage data={data} />
|
|
<div className="invisible group-hover:visible flex items-center gap-1 absolute top-1 right-1 p-1 border border-solid border-black/10 rounded-md">
|
|
{canPin && (
|
|
<button className="flex bg-none border-none" data-mid={data.mid} onClick={handleUnpin}>
|
|
<IconClose className="fill-slate-900" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</Styled>
|
|
);
|
|
};
|
|
export default PinList;
|