Sheet with scrollable content

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

const paragraphs = Array.from({ length: 20 })
</script>

<template>
  <div class="flex items-center justify-center">
    <Sheet>
      <SheetTrigger as-child>
        <Button variant="outline">Scrollable Sheet</Button>
      </SheetTrigger>
      <SheetContent class="flex flex-col gap-0 space-y-0">
        <SheetHeader>
          <SheetTitle>Scrollable Content</SheetTitle>
          <SheetDescription>Description of the scrollable content.</SheetDescription>
        </SheetHeader>
        <ScrollArea class="h-[calc(100vh-230px)] flex-1 grow">
          <div class="space-y-4 px-4">
            <p v-for="(_, i) in paragraphs" :key="i" class="text-muted-foreground text-sm">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            </p>
          </div>
        </ScrollArea>
        <SheetFooter>
          <Button type="submit">Save changes</Button>
          <SheetClose as-child>
            <Button variant="outline">Cancel</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  </div>
</template>