Copy

<script setup lang="ts">
import { IconMapPin, IconMapPinOff } from "@tabler/icons-vue";
import ToggleButton from "components/Filter/ToggleButton.vue";
import { useFilterStore, type FilterState } from "src/store";
import { useRoute } from "vue-router";

const props = defineProps<{
  filters?: FilterState;
}>();

const filterStore = props.filters || useFilterStore().state;
</script>

<template>
  <div class="flex" v-if="!(useRoute().name as string)?.startsWith('charts')">
    <ToggleButton
      :checked="filterStore.resolve_ips ?? false"
      @click="filterStore.resolve_ips = !filterStore.resolve_ips"
      label="Resolve IPs"
    >
      <Component
        :is="filterStore.resolve_ips ? IconMapPin : IconMapPinOff"
        size="18"
      />
      Resolve IPs
    </ToggleButton>
  </div>
</template>

<style scoped>
@reference "src/style.css";

label {
  @apply flex cursor-pointer items-center gap-2 border border-r-0 border-stone-700 bg-stone-900/70 px-2 py-0.5 text-xs font-semibold select-none;

  &:hover {
    @apply text-stone-300;
  }

  &:first-of-type {
    @apply rounded-l-full border-l;
  }

  &:last-of-type {
    @apply rounded-r-full border-r;
  }
}

input {
  @apply hidden;
}

input:checked + label {
  @apply text-stone-200;
}
</style>