Empty State

<template>
  <v-empty-state
    headline="No items found"
    title="Get started"
    text="Add your first item to get started with this feature"
  />
</template>

<template>
  <v-empty-state
    icon="mdi-inbox"
    title="Your inbox is empty"
    text="When you receive messages, they will appear here"
  />
</template>

<template>
  <v-empty-state
    image="/path/to/image.svg"
    title="No results"
    text="Try adjusting your search or filters"
  />
</template>

<template>
  <v-empty-state
    icon="mdi-cloud-upload"
    title="No files uploaded"
    text="Upload your first file to get started"
    action-text="Upload File"
    @click:action="handleUpload"
  />
</template>

<script setup>
const handleUpload = () => {
  console.log('Upload clicked')
}
</script>

<template>
  <v-empty-state
    title="Page not found"
    text="The page you're looking for doesn't exist"
    action-text="Go Home"
    to="/"
  />
</template>

<template>
  <v-empty-state
    justify="start"
    title="Empty"
    text="No content available"
  />
</template>

<template>
  <v-empty-state
    icon="mdi-magnify"
    size="150"
    title="No results"
  />
</template>