Components
Loading preview...
Here is Dialog component
npx shadcn@latest add https://21st.dev/r/anubra266/dialog-2"use client";
import { Dialog } from "@ark-ui/react/dialog";
import { Portal } from "@ark-ui/react/portal";
import { X } from "lucide-react";
import { useState, useRef } from "react";
export default function TermsDialog() {
const [hasReadToBottom, setHasReadToBottom] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);
const handleScroll = () => {
const content = contentRef.current;
if (!content) return;
const scrollPercentage =
content.scrollTop / (content.scrollHeight - content.clientHeight);
if (scrollPercentage >= 0.99 && !hasReadToBottom) {
setHasReadToBottom(true);
}
};
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<button className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer inline-flex items-center justify-center">
Terms & Conditions
</button>
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop className="data-[state=open]:animate-backdrop-in data-[state=closed]:animate-backdrop-out fixed inset-0 z-50 bg-black/50 backdrop-blur-xs" />
<Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
<Dialog.Content className="data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out relative w-full max-w-lg h-[70vh] rounded-lg bg-white dark:bg-gray-900 shadow-lg flex flex-col">
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<Dialog.Title className="text-lg font-semibold text-gray-900 dark:text-white">
Terms & Conditions
</Dialog.Title>
<Dialog.CloseTrigger asChild>
<button className="p-1 text-gray-400 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors cursor-pointer">
<X className="h-4 w-4" />
</button>
</Dialog.CloseTrigger>
</div>
<div
ref={contentRef}
onScroll={handleScroll}
className="flex-1 overflow-y-auto p-4 space-y-4"
>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
Acceptance of Terms
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
By accessing and using this website, users agree to comply
with and be bound by these Terms of Service. Users who do not
agree with these terms should discontinue use of the website
immediately.
</p>
</div>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
User Account Responsibilities
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
Users are responsible for maintaining the confidentiality of
their account credentials. Any activities occurring under a
user's account are the sole responsibility of the account
holder. Users must notify the website administrators
immediately of any unauthorized account access.
</p>
</div>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
Content Usage and Restrictions
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
The website and its original content are protected by
intellectual property laws. Users may not reproduce,
distribute, modify, create derivative works, or commercially
exploit any content without explicit written permission from
the website owners.
</p>
</div>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
Limitation of Liability
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
The website provides content "as is" without any warranties.
The website owners shall not be liable for direct, indirect,
incidental, consequential, or punitive damages arising from
user interactions with the platform.
</p>
</div>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
User Conduct Guidelines
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-2">
Users must adhere to the following guidelines when using our
platform:
</p>
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-disc list-inside">
<li>Not upload harmful or malicious content</li>
<li>Respect intellectual property rights</li>
<li>Maintain respectful communication</li>
<li>Report any suspicious activities</li>
<li>Follow all applicable local and international laws</li>
</ul>
</div>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
Privacy and Data Protection
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
We are committed to protecting your privacy and personal data.
All user information is handled according to our Privacy
Policy and applicable data protection regulations. We do not
sell or share personal information with third parties without
explicit consent.
</p>
</div>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
Termination of Service
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
We reserve the right to terminate or suspend user accounts and
access to our services at any time, without prior notice, for
conduct that violates these Terms of Service or is harmful to
other users or our business interests.
</p>
</div>
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
Changes to Terms
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
These Terms of Service may be updated from time to time. Users
will be notified of significant changes, and continued use of
the website after such changes constitutes acceptance of the
modified terms.
</p>
</div>
</div>
<div className="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700">
{!hasReadToBottom ? (
<p className="text-xs text-gray-500 dark:text-gray-500">
Read all terms before accepting.
</p>
) : (
<div />
)}
<div className="flex gap-3">
<Dialog.CloseTrigger asChild>
<button className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer inline-flex items-center justify-center">
Cancel
</button>
</Dialog.CloseTrigger>
<Dialog.CloseTrigger asChild>
<button
disabled={!hasReadToBottom}
className={`px-3 py-1.5 text-sm rounded-lg transition-colors cursor-pointer inline-flex items-center justify-center ${
hasReadToBottom
? "bg-gray-900 dark:bg-gray-600 text-white hover:bg-gray-800 dark:hover:bg-gray-500"
: "bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed"
}`}
>
I agree
</button>
</Dialog.CloseTrigger>
</div>
</div>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>
);
}