Drop Area

import { TCard } from "@dija/tohama-components";
import { useDropArea } from "@dija/tohama-use";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const { element, isDragging } = useDropArea({
      onDrop: async (files) => {
        // handle files
      },
    });

    return () => (
      <div ref={element} class="text-center">
        <TCard design="raised" color={isDragging.value ? "success" : "secondary"} p>
          Drop Files Here
        </TCard>
      </div>
    );
  },
});