Dialog with keyboard shortcuts list

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Kbd } from "@/components/ui/kbd"

const shortcuts = [
  { keys: ["⌘", "K"], action: "Search" },
  { keys: ["⌘", "B"], action: "Bold" },
  { keys: ["⌘", "I"], action: "Italic" },
  { keys: ["⌘", "S"], action: "Save" },
  { keys: ["⌘", "Z"], action: "Undo" },
  { keys: ["⌘", "⇧", "Z"], action: "Redo" },
  { keys: ["⌘", "N"], action: "New File" },
  { keys: ["⌘", "P"], action: "Quick Open" },
  { keys: ["⌘", "/"], action: "Toggle Comment" },
  { keys: ["⌘", "D"], action: "Duplicate Line" },
]

const half = Math.ceil(shortcuts.length / 2)
const columns = [shortcuts.slice(0, half), shortcuts.slice(half)]
</script>

<template>
  <div class="flex items-center justify-center">
    <Dialog>
      <DialogTrigger as-child>
        <Button variant="outline">Keyboard Shortcuts</Button>
      </DialogTrigger>
      <DialogContent class="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Keyboard Shortcuts</DialogTitle>
          <DialogDescription>Quick reference for commonly used keyboard shortcuts.</DialogDescription>
        </DialogHeader>
        <div class="grid grid-cols-2 gap-x-6 gap-y-3">
          <div v-for="(column, colIndex) in columns" :key="colIndex" class="space-y-3">
            <div v-for="shortcut in column" :key="shortcut.action" class="flex items-center justify-between">
              <span class="text-muted-foreground text-sm">{{ shortcut.action }}</span>
              <div class="flex gap-1">
                <Kbd v-for="(key, index) in shortcut.keys" :key="index">{{ key }}</Kbd>
              </div>
            </div>
          </div>
        </div>
        <DialogFooter>
          <DialogClose as-child>
            <Button variant="outline">Close</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</template>