92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { ExternalLink } from 'lucide-react'
|
|
import { useRedirectIfNotAuth } from '@/utils/auth'
|
|
|
|
export default function PrivacySettingsPage() {
|
|
const userInfo = useRedirectIfNotAuth()
|
|
|
|
if (!userInfo) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-600 mx-auto"></div>
|
|
<p className="mt-4 text-gray-600">Loading...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const tabs = [
|
|
{ id: 'profile', name: 'Personal profile', href: '/settings' },
|
|
{ id: 'privacy', name: 'Data & privacy', href: '/settings/privacy' },
|
|
{ id: 'billing', name: 'Billing', href: '/settings/billing' },
|
|
]
|
|
|
|
return (
|
|
<div className="bg-stone-50 min-h-screen">
|
|
<div className="px-8 py-8">
|
|
<div className="mb-6">
|
|
<p className="text-xs text-gray-500 mb-1">Settings</p>
|
|
<h1 className="text-3xl font-bold text-gray-900">Personal settings</h1>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<nav className="flex space-x-10">
|
|
{tabs.map((tab) => (
|
|
<a
|
|
key={tab.id}
|
|
href={tab.href}
|
|
className={`pb-4 px-2 border-b-2 font-medium text-sm transition-colors ${
|
|
tab.id === 'privacy'
|
|
? 'border-gray-900 text-gray-900'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
{tab.name}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="bg-white border border-gray-200 rounded-lg p-6 flex flex-col">
|
|
<div className="flex-grow">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-3">Privacy Policy</h3>
|
|
<p className="text-gray-500 text-sm leading-relaxed">
|
|
Understand how we collect, use, and protect your personal information.
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-end mt-6">
|
|
<button
|
|
onClick={() => window.open('https://www.pickle.com/ko/privacy-policy', '_blank')}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md text-sm font-medium transition-colors"
|
|
>
|
|
Privacy
|
|
<ExternalLink className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded-lg p-6 flex flex-col">
|
|
<div className="flex-grow">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-3">Terms of Service</h3>
|
|
<p className="text-gray-500 text-sm leading-relaxed">
|
|
Understand your rights and responsibilities when using our platform.
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-end mt-6">
|
|
<button
|
|
onClick={() => window.open('https://www.pickle.com/ko/terms-of-service', '_blank')}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md text-sm font-medium transition-colors"
|
|
>
|
|
Terms
|
|
<ExternalLink className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|