1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Отображение данныхmetadatapillsdata

Metadata Pill List

Группа плашек «ключ-значение» для компактного вывода характеристик.

OS:MacOS
Ver:14.5
Arch:ARM64

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { KeyValuePillGroup } from 'react-component-kit-ui/data';

<KeyValuePillGroup>Content</KeyValuePillGroup>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/KeyValuePillGroup.tsx + KeyValuePillGroup.css:

KeyValuePillGroup.tsx
'use client';

import './KeyValuePillGroup.css';

/** KeyValuePillGroup — ported from astro-component-kit. */
export interface KeyValuePillGroupProps {
}

export function KeyValuePillGroup({}: KeyValuePillGroupProps) {
  return (
    <>
      <div className="meta-row" data-rk-ffdece="">
        <div className="m-pill" data-rk-ffdece="">OS:<span data-rk-ffdece="">MacOS</span></div>
        <div className="m-pill" data-rk-ffdece="">Ver:<span data-rk-ffdece="">14.5</span></div>
        <div className="m-pill" data-rk-ffdece="">Arch:<span data-rk-ffdece="">ARM64</span></div>
      </div>
    </>
  );
}

export default KeyValuePillGroup;
KeyValuePillGroup.css
/* KeyValuePillGroup — ported from astro-component-kit (data/KeyValuePillGroup.astro) */

.meta-row:where([data-rk-ffdece]) { display: flex; gap: 8px; flex-wrap: wrap; }
.m-pill:where([data-rk-ffdece]) { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); }
span:where([data-rk-ffdece]) { color: #e2e8f0; margin-left: 6px; }

Краткая информация

Категория
Отображение данных
Имя файла
KeyValuePillGroup.tsx
Зависимости
Нет — чистый React + CSS
Теги
metadatapillsdata