72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
// src/components/WhatsNewModal.tsx
|
|
import React from 'react';
|
|
import { XCircleIcon } from './icons/XCircleIcon';
|
|
import { GiftIcon } from './icons/GiftIcon';
|
|
|
|
export interface WhatsNewModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
version: string;
|
|
commitMessage: string;
|
|
}
|
|
|
|
export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
version,
|
|
commitMessage,
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-center items-center p-4"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="whats-new-title"
|
|
className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md m-4 transform transition-all"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="p-6">
|
|
<div className="flex items-center mb-4">
|
|
<div className="p-2 bg-brand-primary-light dark:bg-brand-primary-dark rounded-full mr-4">
|
|
<GiftIcon className="w-6 h-6 text-brand-primary" />
|
|
</div>
|
|
<div>
|
|
<h2 id="whats-new-title" className="text-xl font-bold text-gray-900 dark:text-white">
|
|
What's New?
|
|
</h2>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Version: {version}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
|
|
<p className="text-base font-medium text-gray-800 dark:text-gray-200">
|
|
{commitMessage}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-end">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
|
|
>
|
|
Got it!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<XCircleIcon className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|