# @cloud-ru/ds-site-card-vacancy

> Карточка-ссылка вакансии с заголовком и описанием, нейтральным или акцентным фоном, hover/pressed-состояниями и фокусом.

Docs: /snack-v2/components/site-card-vacancy/

## Установка

```sh
pnpm add @cloud-ru/ds-site-card-vacancy
```

## Когда использовать

- Элемент списка вакансий, ведущий на детальную страницу.
- Промо-блок вакансии с акцентным фоном (`appearance='primary'`).
- Компактная карточка в мобильной раскладке (`mobile`).

Когда **не** нужен:

- Inline-ссылка в тексте:
  - используйте [`@cloud-ru/ds-link`](/components/link).
- Кнопка-действие без перехода:
  - используйте [`@cloud-ru/ds-button`](/components/button/button).
- Строка списка «лейбл — значение»:
  - используйте [`@cloud-ru/ds-uikit-product-info-row`](/components/uikit-product-info-row).

## API

### CardVacancy
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `appearance` | `neutral \| primary` | `neutral` | no | Визуальный вид карточки:  - `neutral` — нейтральный полупрозрачный фон, тёмный заголовок. - `primary` — акцентный фон `primary` с декоративным паттерном, текст `onAccent`. |
| `as` | `ElementType` | — | no | Полиморфный тег корня — `'a'` по умолчанию (карточка-ссылка), либо роутерный `Link` / `'button'` / `'div'`. |
| `className` | `string` | — | no | CSS-класс корневого элемента. |
| `data-test-id` | `string` | — | no |  |
| `description` | `string` | — | no | Описание под заголовком. Обрезается многоточием, если не помещается в одну строку. |
| `innerRef` | `any` | — | no | Ref на корневой элемент. |
| `mobile` | `boolean` | `false` | no | Компактная мобильная версия — меньшая высота и более мелкая типографика. |
| `title` | `string` | — | no | Заголовок вакансии. Обрезается многоточием, если не помещается в одну строку. |

#### Related types
- `Appearance` = `neutral | primary`
- `PolymorphicRef` (alias)

## Примеры

### External

```tsx
import { CardVacancy } from '@cloud-ru/ds-site-card-vacancy';

export function External() {
  return (
    <CardVacancy
      href='https://example.com/careers/devops'
      target='_blank'
      title='DevOps Engineer'
      description='Remote · Full-time'
    />
  );
}
```

### Mobile

```tsx
import { APPEARANCE, CardVacancy } from '@cloud-ru/ds-site-card-vacancy';

export function Mobile() {
  return (
    <CardVacancy
      href='#mobile'
      mobile
      appearance={APPEARANCE.Primary}
      title='Backend Engineer'
      content='Remote · Contract'
    />
  );
}
```

### Neutral

```tsx
import { CardVacancy } from '@cloud-ru/ds-site-card-vacancy';

export function Neutral() {
  return <CardVacancy href='#frontend' title='Frontend Developer' description='Remote · Full-time' />;
}
```

### Polymorphic

```tsx
import { CardVacancy } from '@cloud-ru/ds-site-card-vacancy';
import { useState } from 'react';

export function Polymorphic() {
  const [opened, setOpened] = useState(0);

  return (
    <CardVacancy
      as='button'
      type='button'
      title='Data Analyst'
      description={opened ? `Opened ${opened} time(s)` : 'Click to open'}
      onClick={() => setOpened(count => count + 1)}
    />
  );
}
```

### Primary

```tsx
import { APPEARANCE, CardVacancy } from '@cloud-ru/ds-site-card-vacancy';

export function Primary() {
  return (
    <CardVacancy
      href='#lead'
      appearance={APPEARANCE.Primary}
      title='Lead Product Designer'
      content='Hybrid · Full-time'
    />
  );
}
```