94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { FC, useState } from "react";
|
|
import { SheetBetter } from "./sheet";
|
|
import { NotificationUnread } from "@/lib/svg/NotificationUnread";
|
|
import { X } from "lucide-react";
|
|
import { ListUI } from "../list/ListUI";
|
|
import { events } from "@/lib/utils/event";
|
|
import { apix } from "@/lib/utils/apix";
|
|
import { getNumber } from "@/lib/utils/getNumber";
|
|
|
|
export const NotificationSheet: FC<{ children?: any; className?: string }> = ({
|
|
children,
|
|
className,
|
|
}) => {
|
|
const [isNotification, setNotification] = useState(false);
|
|
return (
|
|
<SheetBetter
|
|
open={isNotification}
|
|
contentOpen={
|
|
<div className={className}>
|
|
{children ? children : <NotificationUnread className="h-6 w-6" />}
|
|
</div>
|
|
}
|
|
side="right"
|
|
onOpenChange={(event) => {
|
|
setNotification(event);
|
|
}}
|
|
showClose={false}
|
|
className="p-0"
|
|
>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex flex-row py-4 items-center px-2 border-b border-gray-300">
|
|
<div className="flex flex-grow">
|
|
<p className="font-bold text-lg">Notification</p>
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => {
|
|
setNotification(false);
|
|
}}
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col flex-grow">
|
|
<ListUI
|
|
className={"border-none"}
|
|
name="todo"
|
|
content={({ item }: any) => {
|
|
return (
|
|
<>
|
|
<div className="border border-gray-200 bg-white p-2 rounded-lg shadow-lg max-w-md">
|
|
<div className="flex flex-col">
|
|
<div className="flex flex-row gap-x-2 text-xs items-center">
|
|
<div className=" p-1 rounded-md font-bold text-gray-800 bg-red-500">
|
|
ANNOUNCEMENT
|
|
</div>
|
|
<div className="text-gray-600 ">March 17, 2025</div>
|
|
</div>
|
|
<p className="text-xs py-2">
|
|
Join our online event and learn how to make money online
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}}
|
|
onLoad={async (param: any) => {
|
|
const params = await events("onload-param", {
|
|
...param,
|
|
});
|
|
const result: any = await apix({
|
|
port: "recruitment",
|
|
value: "data.data.job_postings",
|
|
path: `/api/job-postings${params}`,
|
|
validate: "array",
|
|
});
|
|
return result;
|
|
}}
|
|
onCount={async () => {
|
|
const result: any = await apix({
|
|
port: "recruitment",
|
|
value: "data.data.total",
|
|
path: `/api/job-postings?page=1&page_size=1`,
|
|
validate: "object",
|
|
});
|
|
return getNumber(result);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</SheetBetter>
|
|
);
|
|
};
|