radionica3d/src/components/CookieBanner.vue

<template>
  <div v-if="isVisible" class="fixed bottom-0 left-0 right-0 z-50 p-4 animate-in slide-in-from-bottom-4 duration-500">
    <div class="max-w-4xl mx-auto bg-foreground text-background p-4 sm:p-6 rounded-2xl shadow-2xl flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
      <div class="flex-1 text-sm font-medium text-background/90 text-center sm:text-left">
        {{ t("cookies.message") }}
      </div>
      <div class="flex flex-shrink-0 gap-3 w-full sm:w-auto">
        <button @click="leave" class="flex-1 sm:flex-none px-4 py-2 bg-background/20 hover:bg-background/30 text-background rounded-full font-bold text-sm transition-colors whitespace-nowrap">
          {{ t("cookies.leave") }}
        </button>
        <button @click="accept" class="flex-1 sm:flex-none px-6 py-2 bg-primary text-primary-foreground rounded-full font-bold text-sm transition-colors whitespace-nowrap">
          {{ t("cookies.accept") }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const isVisible = ref(false);

onMounted(() => {
  const consent = localStorage.getItem('cookie_consent');
  if (!consent) {
    isVisible.value = true;
  }
});

const accept = () => {
  localStorage.setItem('cookie_consent', 'accepted');
  isVisible.value = false;
};

const leave = () => {
  window.location.href = "https://www.google.com";
};
</script>