mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-08 10:46:37 +08:00
9a85363e44
* docs: add announcement popup design spec * docs: add announcement popup implementation plan * feat(api): include update_time in announcement response * feat(ui): add update_time to AnnouncementData interface * feat(ui): create AnnouncementModal component * feat(ui): manage announcement modal state in dashboard hook * feat(ui): add announcement modal to dashboard layout
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import type { AnnouncementData } from "@/api";
|
|
import { Button } from "@/shadcn-bridge/heroui/button";
|
|
import {
|
|
Modal,
|
|
ModalBody,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
} from "@/shadcn-bridge/heroui/modal";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
interface AnnouncementModalProps {
|
|
announcement: AnnouncementData;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onDontShowAgain: () => void;
|
|
}
|
|
|
|
export const AnnouncementModal = ({
|
|
announcement,
|
|
isOpen,
|
|
onClose,
|
|
onDontShowAgain,
|
|
}: AnnouncementModalProps) => {
|
|
return (
|
|
<Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()} size="2xl">
|
|
<ModalContent>
|
|
<ModalHeader className="flex flex-col gap-1">平台公告</ModalHeader>
|
|
<ModalBody>
|
|
<div className="prose prose-sm dark:prose-invert max-w-none max-h-[60vh] overflow-y-auto">
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
|
{announcement.content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button variant="flat" onPress={onDontShowAgain}>
|
|
不再提示
|
|
</Button>
|
|
<Button color="primary" onPress={onClose}>
|
|
关闭
|
|
</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|