/** * ShowAllCard.vue - Show All navigation card component * * Extracted from
GiftedDialog.vue to handle "Show All" navigation * for both people and projects
entity types. * * @author Matthew Raymer */
<template>
  <li class="cursor-pointer">
    <router-link :to="navigationRoute" class="block text-center">
      <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
      <h3
        class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
      >
        Show All
      </h3>
    </router-link>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
import { RouteLocationRaw } from "vue-router";

/**
 * ShowAllCard - Displays "Show All" navigation for entity grids
 *
 * Features:
 * - Provides navigation to full entity listings
 * - Supports different routes based on entity type
 * - Maintains context through query parameters
 * - Consistent visual styling with other cards
 */
@Component
export default class ShowAllCard extends Vue {
  /** Type of entities being shown */
  @Prop({ required: true })
  entityType!: "people" | "projects";

  /** Route name to navigate to */
  @Prop({ required: true })
  routeName!: string;

  /** Query parameters to pass to the route */
  @Prop({ default: () => ({}) })
  queryParams!: Record<string, string>;

  /**
   * Computed navigation route with query parameters
   */
  get navigationRoute(): RouteLocationRaw {
    return {
      name: this.routeName,
      query: this.queryParams,
    };
  }
}
</script>

<style scoped>
/* Ensure router-link styling is consistent */
a {
  text-decoration: none;
}

a:hover .fa-circle-right {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
</style>