Item

import {
  IconBookOpenOutline18,
  IconChartUsageOutline18,
  IconChevronRightOutline18,
} from "@unkey/icons";
import {
  Button,
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@unkey/ui";

export default function BasicItem() {
  return (
    <div className="flex flex-col gap-4">
      <Item>
        <ItemContent>
          <ItemTitle>Basic Item</ItemTitle>
          <ItemDescription>A simple item with title and description.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Action</Button>
        </ItemActions>
      </Item>
      <Item
        variant="outline"
        render={
          <a href="/primitives/item">
            <ItemMedia>
              <IconChartUsageOutline18 />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>Usage</ItemTitle>
              <ItemDescription>Track your spend and usage across Unkey.</ItemDescription>
            </ItemContent>
            <ItemActions>
              <IconChevronRightOutline18 />
            </ItemActions>
          </a>
        }
      />
      <Item
        variant="outline"
        render={
          <a href="/primitives/item">
            <ItemMedia>
              <IconBookOpenOutline18 />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>Docs</ItemTitle>
              <ItemDescription>How plans, usage and invoices work.</ItemDescription>
            </ItemContent>
            <ItemActions>
              <IconChevronRightOutline18 />
            </ItemActions>
          </a>
        }
      />
    </div>
  );
}

import { IconChartUsageOutline18, IconChevronRightOutline18 } from "@unkey/icons";
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@unkey/ui";

export default function InternalLinkItem() {
  return (
    <Item
      variant="outline"
      render={
        <a href="/primitives/item">
          <ItemMedia>
            <IconChartUsageOutline18 />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Usage</ItemTitle>
            <ItemDescription>Track your spend and usage across Unkey</ItemDescription>
          </ItemContent>
          <ItemActions>
            <IconChevronRightOutline18 />
          </ItemActions>
        </a>
      }
    />
  );
}

import { IconArrowUpRightOutline18, IconBookOpenOutline18 } from "@unkey/icons";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
  VisuallyHidden,
} from "@unkey/ui";

export default function ExternalLinkItem() {
  return (
    <Item
      variant="outline"
      render={
        <a href="https://unkey.com/docs" target="_blank" rel="noopener noreferrer">
          <ItemMedia>
            <IconBookOpenOutline18 />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>
              Documentation
              <VisuallyHidden> (opens in a new tab)</VisuallyHidden>
            </ItemTitle>
            <ItemDescription>How plans, usage and invoices work</ItemDescription>
          </ItemContent>
          <ItemActions>
            <IconArrowUpRightOutline18 />
          </ItemActions>
        </a>
      }
    />
  );
}

import { IconChartUsageOutline18, IconGaugeOutline18 } from "@unkey/icons";
import {
  Button,
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemHeader,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@unkey/ui";

export default function ItemGroupExample() {
  return (
    <ItemGroup variant="outline">
      <ItemHeader>
        <ItemContent>
          <ItemTitle>Usage this month</ItemTitle>
          <ItemDescription>Resets on 1 September</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Manage plan</Button>
        </ItemActions>
      </ItemHeader>
      <ItemSeparator />
      <Item>
        <ItemMedia>
          <IconChartUsageOutline18 />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Key verifications</ItemTitle>
          <ItemDescription>1.2M of 2M included</ItemDescription>
        </ItemContent>
        <ItemActions className="tabular-nums">$0.00</ItemActions>
      </Item>
      <Item>
        <ItemMedia>
          <IconGaugeOutline18 />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Compute</ItemTitle>
          <ItemDescription>18 hours of vCPU time</ItemDescription>
        </ItemContent>
        <ItemActions className="tabular-nums">$4.32</ItemActions>
      </Item>
    </ItemGroup>
  );
}