main

components/LegalModal.tsx

@@ -0,0 +1,81 @@
+import React, { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { X, ShieldCheck, FileText } from 'lucide-react';
+import { USER_AGREEMENT_TEXT, KVKK_TEXT } from '../legal_texts';
+
+interface LegalModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    type?: 'terms' | 'kvkk' | null;
+    title?: string;
+    content?: string;
+}
+
+export const LegalModal: React.FC<LegalModalProps> = ({ isOpen, onClose, type, title: customTitle, content: customContent }) => {
+    const title = customTitle || (type === 'terms' ? 'User Agreement & IP Rights' : type === 'kvkk' ? 'KVKK & Privacy Policy' : 'Information');
+    const content = customContent || (type === 'terms' ? USER_AGREEMENT_TEXT : type === 'kvkk' ? KVKK_TEXT : '');
+    const icon = type === 'terms' ? <ShieldCheck className="w-6 h-6 text-indigo-600" /> : <FileText className="w-6 h-6 text-indigo-600" />;
+
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-50" onClose={onClose}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4 text-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                                <div className="flex items-center justify-between border-b pb-4 mb-4">
+                                    <div className="flex items-center gap-3">
+                                        {icon}
+                                        <Dialog.Title as="h3" className="text-xl font-bold leading-6 text-gray-900">
+                                            {title}
+                                        </Dialog.Title>
+                                    </div>
+                                    <button
+                                        onClick={onClose}
+                                        className="rounded-full p-1 hover:bg-gray-100 transition-colors"
+                                    >
+                                        <X className="w-5 h-5 text-gray-500" />
+                                    </button>
+                                </div>
+
+                                <div className="mt-2 text-sm text-gray-600 max-h-[60vh] overflow-y-auto whitespace-pre-line pr-2 custom-scrollbar">
+                                    {content}
+                                </div>
+
+                                <div className="mt-6 flex justify-end pt-4 border-t">
+                                    <button
+                                        type="button"
+                                        className="inline-flex justify-center rounded-lg border border-transparent bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 transition-all"
+                                        onClick={onClose}
+                                    >
+                                        I Understand
+                                    </button>
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+};