Code & Kbd

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Text,
  Kbd,
  Code
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Shortcuts</CardTitle>
          <CardDescription>A compact keyboard reference.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            {
              [
                ["Command palette", ["Cmd", "K"]],
                ["Search", ["/"]],
                ["Save", ["Ctrl", "S"]],
                ["Close", ["Esc"]],
              ].map(([label, keys]) => (<div
                key={label as string}
                className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
              >
                <Text size="sm">
                  {label as string}
                </Text>
                <span className="flex flex-wrap items-center gap-3 min-w-0">
                  {
                    (keys as string[]).map((key) => (<Kbd key={key}>
                      {key}
                    </Kbd>))
                  }
                </span>
              </div>))
            }
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Terminal</CardTitle>
          <CardDescription>A block is the right surface for a command.</CardDescription>
        </CardHeader>
        <CardContent>
          <Code block>
            {
              `$ pnpm install
$ pnpm build:all
$ pnpm "playground dev"`
            }
          </Code>
        </CardContent>
      </Card>
    </div>
  );
}