56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogTitle,
|
||
DialogDescription,
|
||
DialogClose
|
||
} from "@/components/ui/dialog";
|
||
import { Button } from "@/components/ui/button";
|
||
import { X } from "lucide-react";
|
||
import "./index.css";
|
||
|
||
export const ReceiveDialog = ({
|
||
isOpen = false,
|
||
onOpenChange,
|
||
onConfirm
|
||
}: {
|
||
isOpen?: boolean;
|
||
onOpenChange?: (open: boolean) => void;
|
||
onConfirm?: () => void;
|
||
}) => {
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||
<DialogContent className="sm:max-w-md border-none bg-transparent p-0 shadow-none">
|
||
<DialogTitle className="sr-only">接收新消息</DialogTitle>
|
||
<DialogDescription className="sr-only">您有一条新的消息，是否立即查看？</DialogDescription>
|
||
<DialogClose className="absolute right-[38px] top-2 z-10 rounded-full w-[28px] h-[28px] bg-[#acacad] flex items-center justify-center bg-[#FFFFFF33]">
|
||
<X className="w-[12px] h-[12px] text-white"/>
|
||
<span className="sr-only" onClick={() => onOpenChange?.(false)}>关闭</span>
|
||
</DialogClose>
|
||
<div className="relative flex flex-col items-center">
|
||
<img
|
||
src="/icons/receive.png"
|
||
alt="接收"
|
||
className="rounded-lg w-full h-[286px] px-[48px]"
|
||
/>
|
||
<div className="absolute top-1/2 left-0 right-0 flex flex-col items-center px-[20px] py-[17px] text-center mx-[48px] rounded-[40px] custom-bg">
|
||
<h3 className="font-[600] text-[18px] text-black mb-[7px]">AI通话时长送你啦～</h3>
|
||
<p className="text-sm text-white/90 mb-6 text-[#666]">志愿怎么选？分数能上哪？六维AI填报师来帮你解答~</p>
|
||
<div className="flex space-x-4 w-full justify-center">
|
||
|
||
<Button
|
||
className="bg-[#1580FF] text-white w-full rounded-[50px] text-[16px] py-[11px]"
|
||
onClick={() => {
|
||
onConfirm?.();
|
||
onOpenChange?.(false);
|
||
}}
|
||
>
|
||
领取时长
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}; |