thrillwiki_django_no_react/frontend/src/components/entity/AuthPrompt.vue

<template>
  <div class="space-y-4">
    <div class="text-center">
      <div class="mb-4">
        <div
          class="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center"
        >
          <svg
            class="h-6 w-6 text-blue-600 dark:text-blue-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
            />
          </svg>
        </div>
      </div>

      <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
        Sign in to contribute
      </h4>

      <p class="text-gray-600 dark:text-gray-400 mb-6">
        You need to be signed in to add "{{ searchTerm }}" to ThrillWiki's database. Join our
        community of theme park enthusiasts!
      </p>
    </div>

    <!-- Benefits List -->
    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 space-y-3">
      <h5 class="font-medium text-gray-900 dark:text-white flex items-center gap-2">
        <svg
          class="h-5 w-5 text-green-600 dark:text-green-400"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5 13l4 4L19 7"
          />
        </svg>
        What you can do:
      </h5>
      <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
        <li class="flex items-start gap-2">
          <svg
            class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
            />
          </svg>
          Add new parks, rides, and companies
        </li>
        <li class="flex items-start gap-2">
          <svg
            class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
            />
          </svg>
          Edit and improve existing entries
        </li>
        <li class="flex items-start gap-2">
          <svg
            class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            />
          </svg>
          Save your favorite places
        </li>
        <li class="flex items-start gap-2">
          <svg
            class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2v-6a2 2 0 012-2h8z"
            />
          </svg>
          Share reviews and experiences
        </li>
      </ul>
    </div>

    <!-- Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-3">
      <button
        @click="handleLogin"
        class="flex-1 bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
      >
        Sign In
      </button>
      <button
        @click="handleSignup"
        class="flex-1 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg font-semibold border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
      >
        Create Account
      </button>
    </div>

    <!-- Alternative Options -->
    <div class="text-center pt-4 border-t border-gray-200 dark:border-gray-700">
      <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Or continue exploring ThrillWiki</p>
      <button
        @click="handleBrowseExisting"
        class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors"
      >
        Browse existing entries →
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  searchTerm: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  login: []
  signup: []
  browse: []
}>()

const handleLogin = () => {
  emit('login')
}

const handleSignup = () => {
  emit('signup')
}

const handleBrowseExisting = () => {
  emit('browse')
}
</script>