# Recipes

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "zudoku/ui/Card";
import { Badge } from "zudoku/ui/Badge";
import { Link } from "zudoku/components";

export const recipes = [
  {
    title: "Authenticate",
    category: "Getting Started",
    description: "Exchange the client credentials for an access token.",
    endpoints: ["POST /v1/auth/:org"],
    href: "/recipes/authentication",
  },
  {
    title: "Retrieve Offline Devices",
    category: "Monitoring",
    description:
      "Retrieve every device whose status is offline, paging through the full result set.",
    endpoints: ["GET /v1/devices"],
    href: "/recipes/retrieve-offline-devices",
  },
  {
    title: "Onboard Discovered Devices",
    category: "Inventory",
    description:
      "Onboard the discovered devices that are ready to onboard, and track the task to completion.",
    endpoints: ["GET /v1/discoveredDevices", "POST /v1/tasks"],
    href: "/recipes/onboard-discovered-devices",
  },
  {
    title: "Restart Devices",
    category: "Automation",
    description:
      "Restart the devices that support the task, and confirm they return online.",
    endpoints: ["GET /v1/devices", "POST /v1/tasks"],
    href: "/recipes/restart-devices",
  },
  {
    title: "Rotate Device Passwords",
    category: "Automation",
    description:
      "Rotate the passwords on the devices that support the task, and track the task to completion.",
    endpoints: ["GET /v1/devices", "POST /v1/tasks"],
    href: "/recipes/rotate-passwords",
  },
  {
    title: "Rotate SSL Certificates",
    category: "Automation",
    description:
      "Rotate the SSL certificates on the devices that support the task, and track the task to completion.",
    endpoints: ["GET /v1/devices", "POST /v1/tasks"],
    href: "/recipes/rotate-ssl-certificates",
  },
];

Recipes are runnable examples of common jobs. Each one combines several steps, and often
several endpoints, into a single script.

<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 not-prose my-6">
  {recipes.map((recipe) => (
    <Link key={recipe.href} to={recipe.href} className="block">
      <Card className="h-full cursor-pointer hover:ring-primary transition-colors">
        <CardHeader>
          <div className="flex items-center gap-2">
            <Badge variant="outline">{recipe.category}</Badge>
          </div>
          <CardTitle className="text-base mt-2">{recipe.title}</CardTitle>
          <CardDescription>{recipe.description}</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-wrap gap-2">
          {recipe.endpoints.map((endpoint) => (
            <Badge
              key={endpoint}
              variant="secondary"
              className="font-mono text-xs max-w-full whitespace-normal"
            >
              {endpoint}
            </Badge>
          ))}
        </CardContent>
      </Card>
    </Link>
  ))}
</div>