CRM_Montzar/apps/web/src/components/pipeline/AddDealButton.vue

<script setup lang="ts">
import UiIcon from '@/components/UiIcon.vue';
import type { PipelineAccent } from '@/lib/pipeline-board';
import { PIPELINE_ACCENT } from '@/lib/pipeline-board';

defineProps<{
  accent: PipelineAccent;
}>();

const emit = defineEmits<{
  add: [];
}>();
</script>

<template>
  <button
    type="button"
    class="add-deal"
    :style="{
      '--add-color': PIPELINE_ACCENT[accent].text,
      '--add-border': PIPELINE_ACCENT[accent].solid,
      '--add-soft': PIPELINE_ACCENT[accent].soft,
    }"
    aria-label="افزودن معامله"
    @click="emit('add')"
  >
    <UiIcon name="plus" :size="16" />
    افزودن معامله
  </button>
</template>

<style scoped>
.add-deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1.5px dashed var(--add-border);
  border-radius: 16px;
  background: #fff;
  color: var(--add-color);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.add-deal:hover {
  background: var(--add-soft);
}

.add-deal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
</style>