Sheets that open from any side.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"

const sides = ["top", "right", "bottom", "left"] as const
const paragraphs = Array.from({ length: 5 })
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <Sheet v-for="side in sides" :key="side">
      <SheetTrigger as-child>
        <Button variant="outline" class="capitalize">{{ side }}</Button>
      </SheetTrigger>
      <SheetContent :side="side" class="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]">
        <SheetHeader>
          <SheetTitle>{{ `Sheet Side: ${side}` }}</SheetTitle>
          <SheetDescription>{{ `This sheet opens from the ${side} side of the screen.` }}</SheetDescription>
        </SheetHeader>
        <div class="text-muted-foreground p-4 text-sm">
          <p v-for="(_, i) in paragraphs" :key="i" class="mb-2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>
        <SheetFooter>
          <SheetClose as-child>
            <Button variant="outline">Close</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  </div>
</template>