# Secret

import { Secret } from "zudoku/ui/Secret";
import { Value } from "zudoku/ui/Value";

The `Secret` component can be used to display secrets, typically API keys, in your Dev Portal application.

## Import

```tsx
import { Secret } from "zudoku/ui/Secret";
```

## Usage

```tsx
<Secret
  secret="pkcd_this-is-a-never-01K1DASDXXQDA9S6GKASKYAFSDH"
  status="active"
  preview={5}
  onCopy={(secret) => {
    console.log("Copied secret:", secret);
  }}
  onReveal={(revealed) => {
    console.log("Revealed:", revealed);
  }}
/>
```

 <div className="flex flex-col gap-2">
<Secret
  secret="pkcd_this-is-a-never-01K1DASDXXQDA9S6GKASKYAFSDH"
  status="active"
  className="max-w-fit"
/>

<Secret
  secret="pkcd_this-is-a-gonna-01K1DAFSDHAS9S6GE5KASKYSDXX"
  status="expiring"
  className="max-w-fit"
/>

<Secret
  secret="pkcd_this-is-a-give-01K1DAFSSDHOOASDD9S6KYGE5KAS"
  status="expired"
  className="max-w-fit"
/>

<Secret
  secret="pkcd_this-is-a-you-01K1DAGDN0NDDHXS7VBYGFME1SFSR"
  status="revoked"
  className="max-w-fit"
/>

<Secret
  secret="pkcd_this-is-a-you-01K1DAGDN0NDDHXS7VBYGFME1SFSR"
  status="none"
  className="max-w-fit"
/>

<Secret secret="pkcd_this-is-a-up-01K1DAFSDHASDXXSQDA9S6GE5KASKY" className="max-w-fit" />

<div className="flex flex-col gap-0 max-w-fit not-prose">
  <span className="text-sm font-medium">Client ID</span>
  <Value
    value="client-id-01985b58-d7af-71eb-a27e-b2062935ece4"
    className="w-full"
  />
  <span className="text-sm font-medium">Client Secret</span>
  <Secret
    secret="pkcd_this-is-a-up-01K1DAFSDHASDXXSQDA9S6GE5KASKY"
  />
</div>
</div>