puffpastry-frontend/src/components/VotingControls.vue

<template>
  <div class="flex flex-row justify-around">
    <div>
      <Confirm
        :width="24" :height="24" :box="96"
        class="inline-block fill-gray-50 hover:fill-green-500 cursor-pointer mx-2"
        :class="{'fill-green-500': vote === 'Positive'}"
        @click="recordAccept"
      />
      <span class="text-white align-bottom font-poppins hidden sm:inline-block">Approve</span>
    </div>
    <div>
      <Cancel
        :width="24" :height="24" :box="96"
        class="inline-block fill-gray-50 hover:fill-red-500 cursor-pointer mx-2"
        :class="{'fill-red-500': vote === 'Negative'}"
        @click="recordDecline"
      />
      <span class="text-white align-bottom font-poppins hidden sm:inline-block">Reject</span>
    </div>
    <div>
      <Abstain
        :width="24" :height="24" :box="96"
        class="inline-block fill-gray-50 hover:fill-amber-500 cursor-pointer mx-2"
        @click="recordAbstain"
      />
      <span class="text-white align-bottom font-poppins hidden sm:inline-block">Abstain</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {VoteIssueRequest, VoteIssueResponse} from "../types/issue.ts";
import Cancel from "./icons/Cancel.vue";
import Confirm from "./icons/Confirm.vue";
import freighter from "@stellar/freighter-api";
import Abstain from "./icons/Abstain.vue";

const props = defineProps<{ selectedId: string, vote?: 'Positive' | 'Negative' }>();

const recordAccept = async () => {
  if (!props.selectedId) return;
  const addr = await freighter.getAddress();
  // TODO: replace this call
  await post<VoteIssueRequest, VoteIssueResponse>('/issues/vote',
      { issue_id: props.selectedId.toString(), wallet: addr.address, vote: "Positive" })
}
const recordDecline = async () => {
  if (!props.selectedId) return;
  const addr = await freighter.getAddress();
  // TODO: replace this call
  await post<VoteIssueRequest, VoteIssueResponse>('/issues/vote',
      { issue_id: props.selectedId, wallet: addr.address, vote: "Negative" })
}
const recordAbstain = async () => {
  if (!props.selectedId) return;
  const addr = await freighter.getAddress();
}
</script>

<style lang="postcss">
.font-poppins {
  font-family: 'Poppins', sans-serif;
}
</style>