feat: Add cookie consent banner + cookie policy page
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
This commit is contained in:
56
src/components/CookieConsent.tsx
Normal file
56
src/components/CookieConsent.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user