104 lines
2.3 KiB
TypeScript
104 lines
2.3 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Button, cn } from "@repo/shared-components";
|
|
import MDEditor from "@uiw/react-md-editor";
|
|
import { Check, RefreshCw } from "lucide-react";
|
|
import { Changelog } from "@repo/db";
|
|
|
|
export const ChangelogModal = ({
|
|
latestChangelog,
|
|
isOpen,
|
|
onClose,
|
|
}: {
|
|
latestChangelog: Changelog;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}) => {
|
|
return (
|
|
<dialog open={isOpen} 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={onClose}
|
|
>
|
|
✕
|
|
</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 && (
|
|
<img
|
|
src={latestChangelog.previewImage}
|
|
alt="Preview"
|
|
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={onClose}>
|
|
<Check size={20} />
|
|
gelesen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<label className="modal-backdrop" htmlFor="changelogModalToggle">
|
|
Close
|
|
</label>
|
|
</dialog>
|
|
);
|
|
};
|
|
|
|
export const ChangelogModalBtn = ({
|
|
latestChangelog,
|
|
autoOpen,
|
|
onClose,
|
|
className = "",
|
|
hideIcon = false,
|
|
}: {
|
|
latestChangelog: Changelog | null | undefined;
|
|
autoOpen: boolean;
|
|
onClose?: () => void;
|
|
className?: string;
|
|
hideIcon?: boolean;
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(autoOpen);
|
|
|
|
if (!latestChangelog) return null;
|
|
|
|
return (
|
|
<>
|
|
<a
|
|
href="#!"
|
|
className={cn("hover:text-primary flex items-center gap-1", className)}
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
{!hideIcon && <RefreshCw size={12} />} {latestChangelog.title}
|
|
</a>
|
|
<ChangelogModal
|
|
latestChangelog={latestChangelog}
|
|
isOpen={isOpen}
|
|
onClose={() => {
|
|
setIsOpen(false);
|
|
if (onClose) {
|
|
onClose();
|
|
}
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|