chore: transfer repo
This commit is contained in:
Danijel
164
components/cookies/CookieSettingsModal.tsx
Normal file
164
components/cookies/CookieSettingsModal.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Heading, Text } from '@/components/ui/Typography';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CookieCategoryCard } from './CookieCategoryCard';
|
||||
import { CookiePreferences, useCookieConsent } from './CookieContext';
|
||||
|
||||
// Cookie category descriptions
|
||||
const COOKIE_DESCRIPTIONS = {
|
||||
necessary: {
|
||||
title: 'Neophodni kolačići',
|
||||
description: 'Ovi kolačići su neophodni za funkcioniranje web stranice i ne mogu biti isključeni. Oni omogućuju osnovne funkcionalnosti poput navigacije stranice i pristupa sigurnim područjima.'
|
||||
},
|
||||
analytics: {
|
||||
title: 'Analitički kolačići',
|
||||
description: 'Ovi kolačići nam pomažu razumjeti kako posjetitelji koriste našu web stranicu, prikupljajući anonimne statističke podatke. Oni nam pomažu poboljšati korisničko iskustvo i performanse stranice.'
|
||||
},
|
||||
marketing: {
|
||||
title: 'Marketinški kolačići',
|
||||
description: 'Ovi kolačići se koriste za praćenje posjetitelja na web stranicama. Namjera je prikazati oglase koji su relevantni i privlačni za pojedinog korisnika i time vrijedniji za izdavače i vanjske oglašivače.'
|
||||
},
|
||||
preferences: {
|
||||
title: 'Kolačići za personalizaciju',
|
||||
description: 'Ovi kolačići omogućuju web stranici da zapamti izbore koje ste napravili (poput korisničkog imena, jezika ili regije) i pružaju poboljšane, personalizirane značajke.'
|
||||
}
|
||||
};
|
||||
|
||||
export function CookieSettingsModal() {
|
||||
const { preferences, showModal, savePreferences, closeModal } = useCookieConsent();
|
||||
const [localPreferences, setLocalPreferences] = useState<CookiePreferences>(preferences);
|
||||
|
||||
// Sync with parent preferences when they change
|
||||
useEffect(() => {
|
||||
setLocalPreferences(preferences);
|
||||
}, [preferences]);
|
||||
|
||||
const handleToggle = (category: keyof CookiePreferences) => {
|
||||
if (category === 'necessary') return; // Necessary cookies can't be disabled
|
||||
|
||||
setLocalPreferences(prev => ({
|
||||
...prev,
|
||||
[category]: !prev[category]
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
savePreferences(localPreferences);
|
||||
};
|
||||
|
||||
if (!showModal) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 z-50"
|
||||
onClick={closeModal}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b flex justify-between items-center sticky top-0 bg-white z-20">
|
||||
<Heading level={3}>Postavke kolačića</Heading>
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
aria-label="Close"
|
||||
>
|
||||
<XMarkIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<Text className="mb-6">
|
||||
Ova web stranica koristi kolačiće za poboljšanje korisničkog iskustva. Možete prilagoditi svoje postavke
|
||||
kolačića omogućavanjem ili onemogućavanjem svake kategorije. Kolačići označeni kao "Neophodni"
|
||||
su potrebni za osnovne funkcije web stranice i ne mogu biti isključeni.
|
||||
</Text>
|
||||
|
||||
{/* Cookie categories */}
|
||||
<div className="space-y-6">
|
||||
{/* Necessary cookies - always enabled */}
|
||||
<CookieCategoryCard
|
||||
title={COOKIE_DESCRIPTIONS.necessary.title}
|
||||
description={COOKIE_DESCRIPTIONS.necessary.description}
|
||||
enabled={true}
|
||||
onChange={() => {}}
|
||||
disabled={true}
|
||||
/>
|
||||
|
||||
{/* Analytics cookies */}
|
||||
<CookieCategoryCard
|
||||
title={COOKIE_DESCRIPTIONS.analytics.title}
|
||||
description={COOKIE_DESCRIPTIONS.analytics.description}
|
||||
enabled={localPreferences.analytics}
|
||||
onChange={() => handleToggle('analytics')}
|
||||
/>
|
||||
|
||||
{/* Marketing cookies */}
|
||||
<CookieCategoryCard
|
||||
title={COOKIE_DESCRIPTIONS.marketing.title}
|
||||
description={COOKIE_DESCRIPTIONS.marketing.description}
|
||||
enabled={localPreferences.marketing}
|
||||
onChange={() => handleToggle('marketing')}
|
||||
/>
|
||||
|
||||
{/* Preference cookies */}
|
||||
<CookieCategoryCard
|
||||
title={COOKIE_DESCRIPTIONS.preferences.title}
|
||||
description={COOKIE_DESCRIPTIONS.preferences.description}
|
||||
enabled={localPreferences.preferences}
|
||||
onChange={() => handleToggle('preferences')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 border-t pt-4">
|
||||
<Heading level={4} className="mb-3">O kolačićima</Heading>
|
||||
<Text className="mb-4">
|
||||
Kolačići su male tekstualne datoteke koje web stranice postavljaju na vaš uređaj prilikom posjeta.
|
||||
Koriste se za pamćenje vaših postavki, poboljšanje funkcionalnosti i prikupljanje analitičkih podataka.
|
||||
</Text>
|
||||
|
||||
<Heading level={4} className="mb-2 mt-4">Kako koristimo kolačiće</Heading>
|
||||
<Text className="mb-4">
|
||||
Koristimo različite vrste kolačića za različite svrhe. Neki su neophodni za rad web stranice,
|
||||
dok drugi nam pomažu optimizirati sadržaj i korisničko iskustvo.
|
||||
</Text>
|
||||
|
||||
<Heading level={4} className="mb-2 mt-4">Vaša prava</Heading>
|
||||
<Text className="mb-4">
|
||||
U skladu s EU regulativom o kolačićima, omogućujemo vam upravljanje postavkama kolačića.
|
||||
Više informacija možete pronaći u našim <a href="/privacy-policy" className="underline">Pravilima privatnosti</a> i
|
||||
<a href="/terms-of-service" className="underline ml-1">Uvjetima korištenja</a>.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer with buttons */}
|
||||
<div className="p-4 border-t sticky bottom-0 bg-white">
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={closeModal}
|
||||
>
|
||||
Odustani
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSave}
|
||||
>
|
||||
Spremi postavke
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user