GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-24 07:20:15 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update announcement

Browse Source 
feat: update announcement
Co-Authored-By: Minghan Zhang <112773885+zmh-program@users.noreply.github.com>
This commit is contained in:
Deng Junhai 2024-03-31 00:15:53 +08:00
parent aaa1a8ed86
commit 03512d0fc8
2 changed files with 58 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/src/components/app/Announcement.tsx
View File

@ -1,16 +1,16 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import {
AlertDialog, Dialog,
AlertDialogAction, DialogContent,
AlertDialogCancel, DialogDescription,
AlertDialogContent, DialogFooter,
AlertDialogDescription, DialogHeader,
AlertDialogFooter, DialogTitle,
AlertDialogHeader, DialogTrigger,
AlertDialogTitle, DialogAction,
AlertDialogTrigger, DialogCancel,
} from "@/components/ui/alert-dialog"; } from "@/components/ui/dialog";
import { AnnouncementEvent, announcementEvent } from "@/events/announcement.ts"; import { AnnouncementEvent, announcementEvent } from "@/events/announcement.ts";
import { Bell, Check } from "lucide-react"; import { Bell, Check } from "lucide-react";
import Markdown from "@/components/Markdown.tsx"; import Markdown from "@/components/Markdown.tsx";
@ -32,8 +32,8 @@ function Announcement() {
}, []); }, []);
return ( return (
<AlertDialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<AlertDialogTrigger asChild> <DialogTrigger asChild>
<Button <Button
variant={`outline`} variant={`outline`}
size={`icon`} size={`icon`}
@ -41,28 +41,28 @@ function Announcement() {
> >
<Bell className={`h-4 w-4`} /> <Bell className={`h-4 w-4`} />
</Button> </Button>
</AlertDialogTrigger> </DialogTrigger>
<AlertDialogContent className={`announcement-dialog flex-dialog`}> <DialogContent className={`announcement-dialog flex-dialog`}>
<AlertDialogHeader notTextCentered> <DialogHeader notTextCentered>
<AlertDialogTitle <DialogTitle
className={"flex flex-row items-center select-none"} className={"flex flex-row items-center select-none"}
> >
<Bell className="inline-block w-4 h-4 mr-2" /> <Bell className="inline-block w-4 h-4 mr-2" />
<p className={`translate-y-[-1px]`}>{t("announcement")}</p> <p className={`translate-y-[-1px]`}>{t("announcement")}</p>
</AlertDialogTitle> </DialogTitle>
<AlertDialogDescription> <DialogDescription>
<Markdown acceptHtml={true}>{announcement || t("empty")}</Markdown> <Markdown acceptHtml={true}>{announcement || t("empty")}</Markdown>
</AlertDialogDescription> </DialogDescription>
</AlertDialogHeader> </DialogHeader>
<AlertDialogFooter> <DialogFooter>
<AlertDialogCancel>{t("close")}</AlertDialogCancel> <DialogCancel onClick={() => setOpen(false)}>{t("close")}</DialogCancel>
<AlertDialogAction> <DialogAction onClick={() => setOpen(false)}>
<Check className="w-4 h-4 mr-1" /> <Check className="w-4 h-4 mr-1" />
{t("i-know")} {t("i-know")}
</AlertDialogAction> </DialogAction>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
); );
} }

33
app/src/components/ui/dialog.tsx
View File

@ -3,6 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { cn } from "./lib/utils"; import { cn } from "./lib/utils";
import { Button, ButtonProps } from "@/components/ui/button.tsx";
const Dialog = DialogPrimitive.Root; const Dialog = DialogPrimitive.Root;
@ -61,11 +62,13 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ const DialogHeader = ({
className, className,
notTextCentered,
...props ...props
}: React.HTMLAttributes<HTMLDivElement>) => ( }: React.HTMLAttributes<HTMLDivElement> & {notTextCentered?: boolean}) => (
<div <div
className={cn( className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left", "flex flex-col space-y-1.5 sm:text-left",
!notTextCentered && "text-center",
className, className,
)} )}
{...props} {...props}
@ -114,6 +117,30 @@ const DialogDescription = React.forwardRef<
)); ));
DialogDescription.displayName = DialogPrimitive.Description.displayName; DialogDescription.displayName = DialogPrimitive.Description.displayName;
const DialogCancel = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, ...props }, ref) => (
<Button
ref={ref}
variant={variant ?? "outline"}
{...props}
/>
)
);
DialogCancel.displayName = "DialogCancel";
const DialogAction = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, ...props }, ref) => (
<Button
ref={ref}
variant={variant ?? "default"}
{...props}
/>
)
);
DialogAction.displayName = "DialogAction";
export { export {
Dialog, Dialog,
DialogTrigger, DialogTrigger,
@ -122,4 +149,6 @@ export {
DialogFooter, DialogFooter,
DialogTitle, DialogTitle,
DialogDescription, DialogDescription,
DialogCancel,
DialogAction,
}; };