Using website-creator skill approach with minimal changes: ✅ Added CookieConsent component (client-side, localStorage) ✅ Added CookieConsent to layout.tsx ✅ Created /cookie-policy page (Thai, PDPA-compliant) ✅ Links to Privacy Policy and Terms & Conditions Minimal changes: - No CSS changes (uses existing Tailwind classes) - No layout changes (component added to existing layout) - Only necessary files added/modified Build: ✅ Success - /cookie-policy page added
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function CookieConsent() {
|
|
const [show, setShow] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const consent = localStorage.getItem('cookie-consent');
|
|
if (!consent) {
|
|
setShow(true);
|
|
}
|
|
}, []);
|
|
|
|
const handleAccept = () => {
|
|
localStorage.setItem('cookie-consent', 'accepted');
|
|
setShow(false);
|
|
};
|
|
|
|
const handleReject = () => {
|
|
localStorage.setItem('cookie-consent', 'rejected');
|
|
setShow(false);
|
|
};
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-6 z-50 shadow-lg">
|
|
<div className="container mx-auto max-w-4xl">
|
|
<p className="text-base mb-4">
|
|
เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานเว็บไซต์ โดยคลิกยอมรับเพื่อใช้งานคุกกี้ทุกประเภท หรือคลิกปรับแต่งเพื่อเลือกคุกกี้ที่ต้องการ
|
|
</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
onClick={handleAccept}
|
|
className="px-6 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700"
|
|
>
|
|
ยอมรับ
|
|
</button>
|
|
<button
|
|
onClick={handleReject}
|
|
className="px-6 py-2 bg-gray-700 text-white font-semibold rounded-md hover:bg-gray-600"
|
|
>
|
|
ปฏิเสธ
|
|
</button>
|
|
<a
|
|
href="/cookie-policy"
|
|
className="px-6 py-2 border border-white text-white font-semibold rounded-md hover:bg-white hover:text-gray-900"
|
|
>
|
|
นโยบายคุกกี้
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|