Function ShortcutCard

Source

export const ShortcutCard = ({
  shortcutItem,
}: {
  shortcutItem: (typeof SHORTCUTS)[0];
}) => (
  <motion.div
    initial={{ opacity: 0, y: 10 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.2 }}
    className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3 hover:bg-white/10"
  >
    <div className="flex flex-col gap-1">
      <p className="text-foreground text-sm font-medium">
        {shortcutItem.description}
      </p>
      {shortcutItem.scope && shortcutItem.scope !== "global" && (
        <Badge variant="outline" className="w-fit text-xs">
          {humanizeScope(shortcutItem.scope)}
        </Badge>
      )}
    </div>
    <div className="flex flex-wrap gap-2">
      {/* Primary key combo */}
      <div className="flex gap-1">
        {formatShortcutKey(shortcutItem.keys)
          .split("+")
          .map((key) => (
            <kbd
              key={`${key}-primary`}
              className="rounded border border-white/20 bg-white/10 px-2 py-1 font-mono text-xs font-semibold text-white/80"
            >
              {key}
            </kbd>
          ))}
      </div>
      {/* Alternative key combos */}
      {shortcutItem.altKeys && shortcutItem.altKeys.length > 0 && (
        <>
          <span className="text-muted-foreground text-xs">/</span>
          {shortcutItem.altKeys.map((altKey) => (
            <div
              key={`${formatShortcutKey(altKey)}-alt`}
              className="flex gap-1"
            >
              {formatShortcutKey(altKey)
                .split("+")
                .map((key) => (
                  <kbd
                    key={`${key}-alt-${formatShortcutKey(altKey)}`}
                    className="rounded border border-white/20 bg-white/10 px-2 py-1 font-mono text-xs font-semibold text-white/80"
                  >
                    {key}
                  </kbd>
                ))}
            </div>
          ))}
        </>
      )}
    </div>
  </motion.div>
);
Copy