Popup #

<template>
  <ClientOnly>
    <HcButton @click="visible = true">
      Click to open
    </HcButton>
    <HcPopup
      v-model="visible"
      title="Basic popup"
      custom-class="w-[400px]"
    >
      <template #body>
        <div class="p-6 pb-0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </div>
      </template>

      <template #footer>
        <div class="grid grid-cols-2 gap-6 p-6">
          <HcButton
            type="outlined"
            @click="visible = false"
          >
            Cancel
          </HcButton>
          <HcButton
            @click="visible = false"
          >
            Confirm
          </HcButton>
        </div>
      </template>
    </HcPopup>
  </ClientOnly>
</template>

<script lang="ts" setup>
import { HcPopup } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const visible = ref(false);
</script>