125 lines
2.8 KiB
TypeScript
125 lines
2.8 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import { Button } from "@repo/shared-components";
|
|
import MDEditor from "@uiw/react-md-editor";
|
|
import { RefreshCw } from "lucide-react";
|
|
import { updateChangelogAck } from "./ChangelogActions";
|
|
import { Changelog } from "@repo/db";
|
|
|
|
export const ChangelogModal = ({
|
|
latestChangelog,
|
|
isOpen,
|
|
onClose,
|
|
}: {
|
|
latestChangelog: Changelog | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}) => {
|
|
if (!isOpen || !latestChangelog) return null;
|
|
|
|
const handleClose = async () => {
|
|
onClose();
|
|
await updateChangelogAck();
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<input
|
|
type="checkbox"
|
|
id="changelogModalToggle"
|
|
className="modal-toggle"
|
|
onChange={handleClose}
|
|
/>
|
|
<dialog open className="modal p-4">
|
|
<div className="modal-box max-h-11/12 w-11/12 max-w-2xl overflow-y-auto">
|
|
<form method="dialog">
|
|
<button
|
|
className="btn btn-sm btn-circle btn-ghost absolute right-3 top-3"
|
|
onClick={handleClose}
|
|
>
|
|
✕
|
|
</button>
|
|
</form>
|
|
<h3 className="flex items-center gap-2 text-lg font-bold">
|
|
<span className="text-primary">{latestChangelog.title}</span> ist nun Verfügbar!
|
|
</h3>
|
|
|
|
<div className="flex flex-col items-center">
|
|
{latestChangelog.previewImage && (
|
|
<Image
|
|
src={latestChangelog.previewImage}
|
|
alt="Preview"
|
|
width={800}
|
|
height={400}
|
|
className="mt-4 h-auto w-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-base-content/80 mb-2 mt-4 text-left">
|
|
<MDEditor.Markdown
|
|
source={latestChangelog.text}
|
|
style={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="modal-action">
|
|
<Button className="btn btn-info btn-outline" onClick={handleClose}>
|
|
Weiter zum HUB
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<label className="modal-backdrop" htmlFor="changelogModalToggle">
|
|
Close
|
|
</label>
|
|
</dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ChangelogBtn = ({ latestChangelog }: { latestChangelog: Changelog | null }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
if (!latestChangelog) return null;
|
|
|
|
return (
|
|
<>
|
|
<a
|
|
href="#!"
|
|
className="hover:text-primary flex items-center gap-1"
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
<RefreshCw size={12} /> {latestChangelog.title}
|
|
</a>
|
|
<ChangelogModal
|
|
latestChangelog={latestChangelog}
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const OpenChangelogOnPageload = ({
|
|
latestChangelog,
|
|
}: {
|
|
latestChangelog: Changelog | null;
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
|
|
if (!latestChangelog) return null;
|
|
|
|
return (
|
|
<>
|
|
<ChangelogModal
|
|
latestChangelog={latestChangelog}
|
|
isOpen={isOpen}
|
|
onClose={() => setIsOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|